Make browser context network-aware and render Mermaid diagrams

[anglinb]

Summary

• detect loopback versus network browser access and pass the normalized browser origin into agent turns
• tell agents which browser-visible hostname to use for servers, while preserving cloud tunnel behavior
• rewrite discovered localhost server URLs for LAN access
• preview linked project files in the web app during network sessions while retaining desktop opens on the local machine
• render fenced mermaid Markdown blocks as responsive, theme-aware SVG diagrams
• lazy-load Mermaid, use strict security mode, and preserve a copyable source fallback when a diagram is invalid

Verification

• bun test src/client/components/messages/shared.test.tsx src/shared/browser-context.test.ts src/server/browser-context.test.ts src/client/lib/pathUtils.test.ts src/client/components/messages/attachmentPreview.test.ts
• bunx tsc --noEmit
• bun run build
• manually verified the original Samsung plan file and its Mermaid flowchart from a LAN-origin browser session

🌸 Shipped with Kanna — an open-source workspace for all your coding agents. Written by codex/gpt-5.6-sol.

[greptile-apps]

Confidence Score: 4/5

The PR should not merge until discovered server links avoid rewriting loopback-only listeners to unreachable LAN addresses; the remaining preview limitations are lower-impact.

Findings

1.  Loopback Links Become Unreachable ▶
2.  Windows Paths Fail Preview ▶
3.  Zero Size Misclassifies JSON ▶

Summary

• Normalizes browser origins and distinguishes loopback from network access.
• Adds network-aware URL rewriting to the browser panel.
• Routes project-local transcript links through the scoped file-content endpoint.
• Extends attachment preview metadata and MIME inference.
• The URL rewrite lacks listener-interface awareness, while linked-file previews have Windows-path and large-JSON limitations.

Diagram

%%{init: {'theme': 'neutral'}}%%
flowchart LR
  B[Browser window origin] --> C{Loopback origin?}
  C -->|Yes| L[Keep localhost server URLs]
  C -->|No| N[Network access context]
  N --> A[Attach context to agent turn]
  N --> R[Rewrite discovered loopback URL]
  R --> I{Server listens on network interface?}
  I -->|Yes| O[Open rewritten browser URL]
  I -->|No or unknown| D[Rewritten URL is unreachable]
  N --> F[Click absolute workspace file link]
  F --> P{Path recognized inside project?}
  P -->|Yes| E[Fetch scoped project-file endpoint]
  P -->|No| X[Show outside-project error]

Loading

_{Reviews (1) · Last reviewed commit: "Make browser links network-aware"}

[greptile-apps]

Loopback links become unreachable

When Kanna is opened through the machine's LAN hostname or IP, this rewrites every discovered loopback URL to that hostname. Discovery does not retain whether the server listens only on loopback, so a server bound to 127.0.0.1 is presented and opened as http://<lan-host>:<port>, where it is unreachable. This also breaks same-machine sessions in which the original localhost URL was usable. Preserve the listener's bind interface and rewrite only servers known to accept network traffic, or retain a usable fallback.

[greptile-apps]

Windows paths fail preview

This check strips either trailing separator but always appends / and then performs a raw prefix comparison. On Windows, runtime.localPath comes from the platform-native path.resolve and uses backslashes, so valid files inside the active project are reported as outside it and cannot be previewed during network sessions. Normalize both paths consistently and add Windows path cases.

[greptile-apps]

Zero size misclassifies JSON

Workspace attachments always use size: 0, which bypasses the classifier's existing large-JSON guard. JSON files above the preview threshold therefore open in the modal, are truncated by the text preview reader, and can no longer be parsed or formatted as JSON instead of following the large-file new-tab path. Obtain the actual file size before classification or classify workspace files without relying on a fabricated zero size.