Add title

[Gared]

No description provided.

[qodo-code-review]

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

[qodo-free-for-open-source-projects]

Code Review by Qodo

🐞 Bugs (2) 📘 Rule violations (0) 📎 Requirement gaps (0) 🎨 UX issues (0) 🔗 Cross-repo conflicts (0)

1. scan.title not in type ✓ Resolved 🐞 Bug ≡ Correctness

Description

getName() reads instance.scan.title, but ScanResult (the type of instance.scan) does not
define title, so this change will not type-check and is already being worked around with
(instance.scan as any).title on the home page.

Code

src/lib/instance-utils.tsx[R9-16]

+export const getName = (instance: Instance): string => {
+    const domain = instance.name.replace(/^https?:\/\//i, "")
+
+    if (instance.scan.title) {
+        return instance.scan.title + ' [' + domain + ']';
+    }
+
+    return domain;

Evidence

The repo’s ScanResult type does not define title, yet the new helper accesses
instance.scan.title and home.tsx uses an any cast to reach a title field anyway, demonstrating
the mismatch.

src/types/InstancesResponse.ts[11-22]
src/lib/instance-utils.tsx[9-17]
src/pages/home.tsx[54-57]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`getName()` uses `instance.scan.title`, but `ScanResult` in `src/types/InstancesResponse.ts` does not include a `title` field. This should be modeled in the type (and the `any` cast in `home.tsx` removed) so builds type-check and callers don’t need unsafe casts.
### Issue Context
- `getName()` is used for `document.title` and instance headings, so it’s a shared, central helper.
- The home page currently uses `(instance.scan as any).title`, indicating the typing mismatch is already impacting code quality.
### Fix Focus Areas
- src/types/InstancesResponse.ts[11-22]
- src/lib/instance-utils.tsx[9-17]
- src/pages/home.tsx[54-57]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Unsafe instance URL opening 🐞 Bug ⛨ Security

Description

window.open(instance.name) is now called without normalizing/validating the URL, so bare hostnames
can open as a relative path and non-http(s) schemes (e.g., javascript:) can be opened if they ever
reach instance.name.

Code

src/pages/instances.tsx[R133-135]

                              <td className="border px-4 py-2 cursor-pointer" onClick={() => {
-                                    if (!instance.name.startsWith("http")) {
-                                        instance.name = "http://" + instance.name;
-                                    }
                                  window.open(instance.name);
-                                }}>{instance.name}</td>
+                                }}>{getName(instance)}</td>

Evidence

The click handler opens instance.name directly. Separately, findInstanceByName() explicitly
supports names with and without http(s)://, indicating bare hostnames are expected to exist. The
scan request flow uses user-provided input and appends the returned instance to the list, increasing
the importance of strict URL handling on open.

src/pages/instances.tsx[124-136]
src/lib/instance-utils.tsx[52-57]
src/pages/instances.tsx[149-167]
src/pages/home.tsx[89-97]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The instances list now opens `instance.name` directly. Without scheme allowlisting and normalization:
- A bare hostname (no scheme) can navigate to a relative path on the current origin instead of the intended site.
- If `instance.name` contains an unexpected scheme, the browser may open it.
### Issue Context
There’s evidence in the codebase that instance names can be handled with/without schemes (see `findInstanceByName`). Also, the UI can request scans based on user-provided input and then adds the returned instance into the in-memory list.
### Fix Focus Areas
- src/pages/instances.tsx[124-139]
- src/pages/home.tsx[89-97]
- src/lib/instance-utils.tsx[52-57]
- src/pages/instances.tsx[149-167]
### Implementation notes
- Introduce a small helper (e.g. `toHttpUrl(name: string): string | null`) that:
- Prepends `https://` or `http://` when no scheme is present (pick one consistently).
- Uses `new URL(...)` to parse and rejects non-`http:`/`https:` protocols.
- Use it before `window.open(...)` and no-op (or toast) on invalid URLs.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

3. Bad version string comparison 🐞 Bug ≡ Correctness

Description

The home-page “top instances” filter compares versions with version.replaceAll('.', '') > '27',
which is a lexicographic string comparison and will exclude/include the wrong instances (e.g.,
2.10.0 → 2100 compares less than 27).

Code

src/pages/home.tsx[R21-23]

+                    if (instance.scan.is_public && instance.scan.websocket_available && !hasFailures(instance) && instance.name.startsWith('https://') && instance.scan.version.replaceAll(".", "") > "27") {
                      topInstances.push(instance)
                  }

Evidence

Home filters by a dot-stripped version string using the > operator (string compare). Elsewhere,
versions are sorted using localeCompare with { numeric: true }, indicating numeric ordering is
intended rather than lexicographic string ordering.

src/pages/home.tsx[16-23]
src/pages/instances.tsx[66-69]
src/lib/instance-utils.tsx[4-7]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The home-page filter uses lexicographic string comparison on a dot-stripped version string. This does not reflect semantic/numeric ordering and will misclassify versions.
### Issue Context
The codebase already treats versions as numeric-sortable in other places (e.g., `localeCompare(..., { numeric: true })`).
### Fix Focus Areas
- src/pages/home.tsx[18-23]
- src/pages/instances.tsx[66-69]
- src/lib/instance-utils.tsx[4-7]
### Implementation notes
- Parse version into numeric segments (major/minor/patch) and compare tuples, or introduce a small utility like `compareVersions(a,b)`.
- Apply the same utility to `isOldVersion()` to keep version handling consistent.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

[qodo-free-for-open-source-projects]

PR Summary by Qodo

Use Etherpad instance titles and card-based instance list on home page
✨ Enhancement 📝 Documentation 🕐 20-40 Minutes

Walkthroughs

Description

• Display instance titles (when available) alongside domains across pages.
• Redesign home page public-instance list into responsive cards with plugin chips.
• Tighten “top instances” filter to newer versions for better baseline quality.

Diagram

graph TD
  Home["Home page"] --> ApiGet["apiGet client"] --> Backend{{"ether-scan API"}}
  Home --> GetName(["getName() util"])
  Instances["Instances page"] --> GetName
  Detail["Instance detail page"] --> GetName
  GetName --> Types["InstancesResponse types"]

  subgraph Legend
    direction LR
    _p["Page"] ~~~ _u(["Shared util"]) ~~~ _e{{"External API"}}
  end

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Type scan.title explicitly (and remove casts)

• ➕ Eliminates (instance.scan as any).title and reduces runtime/compile-time drift
• ➕ Makes getName() and UI rendering safer and self-documenting
• ➖ Requires confirming/aligning the backend JSON shape and updating types accordingly

2. Normalize displayName server-side

• ➕ Centralizes naming rules and keeps clients consistent across UIs
• ➕ Avoids repeating domain stripping / formatting logic in frontend
• ➖ Requires backend changes and versioned API rollout

3. Introduce a dedicated UI component (InstanceCard)

• ➕ Encapsulates rendering rules (title/domain/plugins/version) and improves reuse
• ➕ Keeps Home page lean and easier to test
• ➖ Adds a new component and may feel like extra structure for a small app

Recommendation: Keep the current shared getName() approach (good consolidation), but strongly consider updating the type model so scan.title is defined on the correct type (likely the scan result, not PluginData) and remove the as any usage in home.tsx. This will prevent subtle breakages when scan payloads change and makes the UI logic consistently type-safe.

File Changes

Enhancement (5)

instance-utils.tsx Add getName() to prefer scanned title over raw URL +11/-0

Add getName() to prefer scanned title over raw URL

• Introduces 'getName(instance)' that strips protocol to get a domain, and uses 'instance.scan.title' when available (formatted as 'Title [domain]'). Provides a consistent display-name helper for multiple pages.

src/lib/instance-utils.tsx

---

home.tsx Redesign home page instances list into cards and tighten filters +73/-34

Redesign home page instances list into cards and tighten filters

• Replaces the table-based public instance list with a responsive grid of cards showing title, domain, version, and plugin chips plus an “Open Instance” button. Also updates introductory copy and raises the version filter threshold from >22 to >27 for the featured instances list.

src/pages/home.tsx

---

instance.tsx Use getName() for document title and instance header +3/-3

Use getName() for document title and instance header

• Switches the page title and the visible instance name to use the shared 'getName()' helper, allowing scanned titles to appear in the browser title and details page header.

src/pages/instance.tsx

---

instances.tsx Display friendly instance name via getName() in list and dialog +3/-6

Display friendly instance name via getName() in list and dialog

• Uses 'getName()' for the clickable instance column and dialog description. Removes the in-place mutation that prefixed 'http://' to 'instance.name' before opening the URL.

src/pages/instances.tsx

---

InstancesResponse.ts Extend plugin data type with optional title field +1/-0

Extend plugin data type with optional title field

• Adds a 'title: string | null' field to 'PluginData'. Note: the UI changes primarily reference 'instance.scan.title', so type alignment may need verification.

src/types/InstancesResponse.ts

---