@gokulvenkatareddy/cortex 0.1.7

package/apps/octogent/apps/web/src/components/ui/ConfirmationDialog.tsx

@@ -0,0 +1,86 @@
+import type { ReactNode } from "react";
+
+import { ActionButton } from "./ActionButton";
+
+type ConfirmationDialogProps = {
+  title: string;
+  ariaLabel: string;
+  message: ReactNode;
+  warning: string;
+  confirmLabel: string;
+  isConfirmDisabled: boolean;
+  isBusy: boolean;
+  cancelAriaLabel?: string;
+  onCancel: () => void;
+  onConfirm: () => void;
+  children?: ReactNode;
+};
+
+export const ConfirmationDialog = ({
+  title,
+  ariaLabel,
+  message,
+  warning,
+  confirmLabel,
+  isConfirmDisabled,
+  isBusy,
+  cancelAriaLabel,
+  onCancel,
+  onConfirm,
+  children,
+}: ConfirmationDialogProps) => (
+  <section
+    aria-label={ariaLabel}
+    className="delete-confirm-dialog"
+    onKeyDown={(event) => {
+      if (event.key !== "Escape" || isBusy) return;
+      event.preventDefault();
+      onCancel();
+    }}
+    tabIndex={-1}
+  >
+    <header className="delete-confirm-header">
+      <h2>{title}</h2>
+      <div className="delete-confirm-header-actions">
+        <span className="pill blocked">DESTRUCTIVE</span>
+        <ActionButton
+          aria-label="Close confirmation"
+          className="delete-confirm-close"
+          disabled={isBusy}
+          onClick={onCancel}
+          size="dense"
+          variant="accent"
+        >
+          Close
+        </ActionButton>
+      </div>
+    </header>
+    <div className="delete-confirm-body">
+      <p className="delete-confirm-message">{message}</p>
+      <p className="delete-confirm-warning">{warning}</p>
+      {children}
+    </div>
+    <div className="delete-confirm-actions">
+      <ActionButton
+        aria-label={cancelAriaLabel ?? "Cancel"}
+        className="delete-confirm-cancel"
+        disabled={isBusy}
+        onClick={onCancel}
+        size="dense"
+        variant="accent"
+      >
+        Cancel
+      </ActionButton>
+      <ActionButton
+        aria-label={`Confirm ${title.toLowerCase()}`}
+        className="delete-confirm-submit"
+        disabled={isConfirmDisabled}
+        onClick={onConfirm}
+        size="dense"
+        variant="danger"
+      >
+        {confirmLabel}
+      </ActionButton>
+    </div>
+  </section>
+);

package/apps/octogent/apps/web/src/components/ui/MarkdownContent.tsx

@@ -0,0 +1,43 @@
+import { marked } from "marked";
+import { useMemo } from "react";
+
+marked.setOptions({
+  breaks: true,
+  gfm: true,
+});
+
+const escapeRegExp = (str: string) => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+const highlightHtml = (html: string, term: string): string => {
+  const escaped = escapeRegExp(term);
+  const regex = new RegExp(`(${escaped})`, "gi");
+
+  // Only highlight text nodes — skip anything inside HTML tags
+  // Split on tags, highlight only the non-tag segments
+  const parts = html.split(/(<[^>]*>)/);
+  return parts
+    .map((part) => {
+      if (part.startsWith("<")) return part;
+      return part.replace(regex, '<mark class="search-highlight">$1</mark>');
+    })
+    .join("");
+};
+
+type MarkdownContentProps = {
+  content: string;
+  className?: string;
+  highlightTerm?: string;
+};
+
+export const MarkdownContent = ({ content, className, highlightTerm }: MarkdownContentProps) => {
+  const html = useMemo(() => {
+    const rendered = marked.parse(content, { async: false }) as string;
+    if (highlightTerm && highlightTerm.length > 0) {
+      return highlightHtml(rendered, highlightTerm);
+    }
+    return rendered;
+  }, [content, highlightTerm]);
+
+  // biome-ignore lint/security/noDangerouslySetInnerHtml: markdown is rendered only inside the local operator UI and highlight markup is controlled.
+  return <div className={className} dangerouslySetInnerHTML={{ __html: html }} />;
+};

package/apps/octogent/apps/web/src/components/ui/SettingsToggle.tsx

@@ -0,0 +1,34 @@
+type SettingsToggleProps = {
+  label: string;
+  description: string;
+  ariaLabel: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+};
+
+export const SettingsToggle = ({
+  label,
+  description,
+  ariaLabel,
+  checked,
+  onChange,
+}: SettingsToggleProps) => (
+  <button
+    aria-checked={checked}
+    aria-label={ariaLabel}
+    className="settings-toggle-option"
+    data-active={checked ? "true" : "false"}
+    onClick={() => onChange(!checked)}
+    role="switch"
+    type="button"
+  >
+    <span className="settings-toggle-copy">
+      <span className="settings-toggle-label">{label}</span>
+      <span className="settings-toggle-description">{description}</span>
+    </span>
+    <span className="settings-toggle-switch" aria-hidden="true">
+      <span className="settings-toggle-thumb" />
+    </span>
+    <span className="settings-toggle-state">{checked ? "Enabled" : "Disabled"}</span>
+  </button>
+);

package/apps/octogent/apps/web/src/components/ui/StatusBadge.tsx

@@ -0,0 +1,24 @@
+export type StatusBadgeTone = "live" | "idle" | "processing" | "queued" | "blocked" | "warning";
+
+type StatusBadgeProps = {
+  tone: StatusBadgeTone;
+  label?: string;
+  compactLabel?: string;
+  className?: string;
+};
+
+export const StatusBadge = ({ tone, label, compactLabel, className }: StatusBadgeProps) => {
+  const classes = ["status-badge", "pill", tone, className]
+    .filter((value) => Boolean(value))
+    .join(" ");
+  const fullLabel = label ?? tone.toUpperCase();
+
+  return (
+    <span className={classes}>
+      <span className="status-badge__full">{fullLabel}</span>
+      {compactLabel && compactLabel !== fullLabel ? (
+        <span className="status-badge__compact">{compactLabel}</span>
+      ) : null}
+    </span>
+  );
+};

package/apps/octogent/apps/web/src/main.tsx

@@ -0,0 +1,17 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import { App } from "./App";
+import "./styles.css";
+
+const rootElement = document.getElementById("root");
+
+if (!rootElement) {
+  throw new Error("Root container '#root' was not found.");
+}
+
+createRoot(rootElement).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/apps/octogent/apps/web/src/runtime/HttpTerminalSnapshotReader.ts

@@ -0,0 +1,87 @@
+import type { AgentState, TerminalSnapshot, TerminalSnapshotReader } from "@octogent/core";
+
+type HttpResponse = {
+  ok: boolean;
+  status: number;
+  json: () => Promise<unknown>;
+};
+
+type HttpRequestInit = {
+  method: "GET";
+  headers: Record<string, string>;
+  signal?: AbortSignal | null;
+};
+
+type HttpFetcher = (input: string, init: HttpRequestInit) => Promise<HttpResponse>;
+
+type HttpTerminalSnapshotReaderOptions = {
+  endpoint: string;
+  fetcher?: HttpFetcher;
+  signal?: AbortSignal;
+};
+
+const isAgentState = (value: unknown): value is AgentState =>
+  value === "live" || value === "idle" || value === "queued" || value === "blocked";
+
+const isTerminalSnapshot = (value: unknown): value is TerminalSnapshot => {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+
+  const snapshot = value as Record<string, unknown>;
+
+  return (
+    typeof snapshot.terminalId === "string" &&
+    typeof snapshot.label === "string" &&
+    isAgentState(snapshot.state) &&
+    typeof snapshot.tentacleId === "string" &&
+    (snapshot.tentacleName === undefined || typeof snapshot.tentacleName === "string") &&
+    (snapshot.workspaceMode === undefined ||
+      snapshot.workspaceMode === "shared" ||
+      snapshot.workspaceMode === "worktree") &&
+    typeof snapshot.createdAt === "string"
+  );
+};
+
+export class HttpTerminalSnapshotReader implements TerminalSnapshotReader {
+  private readonly endpoint: string;
+  private readonly fetcher: HttpFetcher;
+  private readonly signal: AbortSignal | undefined;
+
+  constructor({ endpoint, fetcher, signal }: HttpTerminalSnapshotReaderOptions) {
+    this.endpoint = endpoint;
+    this.fetcher =
+      fetcher ??
+      ((input, init) =>
+        fetch(input, {
+          ...init,
+          signal: init.signal ?? null,
+        }));
+    this.signal = signal;
+  }
+
+  async listTerminalSnapshots(): Promise<TerminalSnapshot[]> {
+    const requestInit: HttpRequestInit = {
+      method: "GET",
+      headers: {
+        Accept: "application/json",
+      },
+    };
+    if (this.signal) {
+      requestInit.signal = this.signal;
+    }
+
+    const response = await this.fetcher(this.endpoint, requestInit);
+
+    if (!response.ok) {
+      throw new Error(`Unable to load terminal snapshots (${response.status})`);
+    }
+
+    const payload: unknown = await response.json();
+    if (!Array.isArray(payload)) {
+      return [];
+    }
+
+    return payload.filter(isTerminalSnapshot);
+  }
+}

package/apps/octogent/apps/web/src/runtime/runtimeEndpoints.ts

@@ -0,0 +1,412 @@
+type LocationLike = Pick<Location, "host" | "protocol">;
+
+const readRuntimeBaseUrl = (): string | null => {
+  const value = import.meta.env.VITE_OCTOGENT_API_ORIGIN;
+  if (typeof value !== "string") {
+    return null;
+  }
+
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : null;
+};
+
+const withTrailingSlash = (value: string) => (value.endsWith("/") ? value : `${value}/`);
+
+const buildAbsoluteUrl = (baseUrl: string, pathname: string) => {
+  const normalizedPath = pathname.startsWith("/") ? pathname.slice(1) : pathname;
+  return new URL(normalizedPath, withTrailingSlash(baseUrl)).toString();
+};
+
+const localWebSocketUrl = (location: LocationLike, tentacleId: string) => {
+  const protocol = location.protocol === "https:" ? "wss:" : "ws:";
+  return `${protocol}//${location.host}/api/terminals/${tentacleId}/ws`;
+};
+
+const localRuntimeWebSocketUrl = (location: LocationLike, pathname: string) => {
+  const protocol = location.protocol === "https:" ? "wss:" : "ws:";
+  return `${protocol}//${location.host}${pathname}`;
+};
+
+const toWebSocketBase = (runtimeBaseUrl: string): string | null => {
+  try {
+    const url = new URL(runtimeBaseUrl);
+    if (url.protocol === "https:") {
+      url.protocol = "wss:";
+      return url.toString();
+    }
+    if (url.protocol === "http:") {
+      url.protocol = "ws:";
+      return url.toString();
+    }
+    return null;
+  } catch {
+    return null;
+  }
+};
+
+export const buildTerminalSnapshotsUrl = (runtimeBaseUrl = readRuntimeBaseUrl()) => {
+  if (!runtimeBaseUrl) {
+    return "/api/terminal-snapshots";
+  }
+
+  return buildAbsoluteUrl(runtimeBaseUrl, "/api/terminal-snapshots");
+};
+
+export const buildTerminalEventsSocketUrl = (
+  runtimeBaseUrl = readRuntimeBaseUrl(),
+  location: LocationLike = window.location,
+) => {
+  if (!runtimeBaseUrl) {
+    return localRuntimeWebSocketUrl(location, "/api/terminal-events/ws");
+  }
+
+  const websocketBase = toWebSocketBase(runtimeBaseUrl);
+  if (!websocketBase) {
+    return localRuntimeWebSocketUrl(location, "/api/terminal-events/ws");
+  }
+
+  return buildAbsoluteUrl(websocketBase, "/api/terminal-events/ws");
+};
+
+export const buildTerminalsUrl = (runtimeBaseUrl = readRuntimeBaseUrl()) => {
+  if (!runtimeBaseUrl) {
+    return "/api/terminals";
+  }
+
+  return buildAbsoluteUrl(runtimeBaseUrl, "/api/terminals");
+};
+
+export const buildCodexUsageUrl = (runtimeBaseUrl = readRuntimeBaseUrl()) => {
+  if (!runtimeBaseUrl) {
+    return "/api/codex/usage";
+  }
+
+  return buildAbsoluteUrl(runtimeBaseUrl, "/api/codex/usage");
+};
+
+export const buildClaudeUsageUrl = (runtimeBaseUrl = readRuntimeBaseUrl()) => {
+  if (!runtimeBaseUrl) {
+    return "/api/claude/usage";
+  }
+
+  return buildAbsoluteUrl(runtimeBaseUrl, "/api/claude/usage");
+};
+
+export const buildGithubSummaryUrl = (runtimeBaseUrl = readRuntimeBaseUrl()) => {
+  if (!runtimeBaseUrl) {
+    return "/api/github/summary";
+  }
+
+  return buildAbsoluteUrl(runtimeBaseUrl, "/api/github/summary");
+};
+
+export const buildUiStateUrl = (runtimeBaseUrl = readRuntimeBaseUrl()) => {
+  if (!runtimeBaseUrl) {
+    return "/api/ui-state";
+  }
+
+  return buildAbsoluteUrl(runtimeBaseUrl, "/api/ui-state");
+};
+
+export const buildWorkspaceSetupUrl = (runtimeBaseUrl = readRuntimeBaseUrl()) => {
+  if (!runtimeBaseUrl) {
+    return "/api/setup";
+  }
+
+  return buildAbsoluteUrl(runtimeBaseUrl, "/api/setup");
+};
+
+export const buildWorkspaceSetupStepUrl = (
+  stepId: string,
+  runtimeBaseUrl = readRuntimeBaseUrl(),
+) => {
+  const path = `/api/setup/steps/${encodeURIComponent(stepId)}`;
+  if (!runtimeBaseUrl) {
+    return path;
+  }
+
+  return buildAbsoluteUrl(runtimeBaseUrl, path);
+};
+
+export const buildMonitorConfigUrl = (runtimeBaseUrl = readRuntimeBaseUrl()) => {
+  if (!runtimeBaseUrl) {
+    return "/api/monitor/config";
+  }
+
+  return buildAbsoluteUrl(runtimeBaseUrl, "/api/monitor/config");
+};
+
+export const buildMonitorFeedUrl = (runtimeBaseUrl = readRuntimeBaseUrl()) => {
+  if (!runtimeBaseUrl) {
+    return "/api/monitor/feed";
+  }
+
+  return buildAbsoluteUrl(runtimeBaseUrl, "/api/monitor/feed");
+};
+
+export const buildMonitorRefreshUrl = (runtimeBaseUrl = readRuntimeBaseUrl()) => {
+  if (!runtimeBaseUrl) {
+    return "/api/monitor/refresh";
+  }
+
+  return buildAbsoluteUrl(runtimeBaseUrl, "/api/monitor/refresh");
+};
+
+export const buildUsageHeatmapUrl = (
+  scope: "all" | "project" = "all",
+  runtimeBaseUrl = readRuntimeBaseUrl(),
+) => {
+  const path = `/api/analytics/usage-heatmap?scope=${scope}`;
+  if (!runtimeBaseUrl) {
+    return path;
+  }
+
+  return buildAbsoluteUrl(runtimeBaseUrl, path);
+};
+
+export const buildConversationsUrl = (runtimeBaseUrl = readRuntimeBaseUrl()) => {
+  if (!runtimeBaseUrl) {
+    return "/api/conversations";
+  }
+
+  return buildAbsoluteUrl(runtimeBaseUrl, "/api/conversations");
+};
+
+export const buildConversationSearchUrl = (
+  query: string,
+  runtimeBaseUrl = readRuntimeBaseUrl(),
+) => {
+  const path = `/api/conversations/search?q=${encodeURIComponent(query)}`;
+  if (!runtimeBaseUrl) {
+    return path;
+  }
+
+  return buildAbsoluteUrl(runtimeBaseUrl, path);
+};
+
+export const buildConversationSessionUrl = (
+  sessionId: string,
+  runtimeBaseUrl = readRuntimeBaseUrl(),
+) => {
+  const encodedSessionId = encodeURIComponent(sessionId);
+  const path = `/api/conversations/${encodedSessionId}`;
+  if (!runtimeBaseUrl) {
+    return path;
+  }
+
+  return buildAbsoluteUrl(runtimeBaseUrl, path);
+};
+
+export const buildConversationExportUrl = (
+  sessionId: string,
+  format: "json" | "md",
+  runtimeBaseUrl = readRuntimeBaseUrl(),
+) => {
+  const encodedSessionId = encodeURIComponent(sessionId);
+  const path = `/api/conversations/${encodedSessionId}/export?format=${format}`;
+  if (!runtimeBaseUrl) {
+    return path;
+  }
+
+  return buildAbsoluteUrl(runtimeBaseUrl, path);
+};
+
+export const buildTentacleRenameUrl = (
+  tentacleId: string,
+  runtimeBaseUrl = readRuntimeBaseUrl(),
+) => {
+  const encodedTentacleId = encodeURIComponent(tentacleId);
+  if (!runtimeBaseUrl) {
+    return `/api/tentacles/${encodedTentacleId}`;
+  }
+
+  return buildAbsoluteUrl(runtimeBaseUrl, `/api/tentacles/${encodedTentacleId}`);
+};
+
+const buildTentacleGitActionUrl = (
+  tentacleId: string,
+  action: "status" | "commit" | "push" | "sync",
+  runtimeBaseUrl = readRuntimeBaseUrl(),
+) => {
+  const encodedTentacleId = encodeURIComponent(tentacleId);
+  const path = `/api/tentacles/${encodedTentacleId}/git/${action}`;
+  if (!runtimeBaseUrl) {
+    return path;
+  }
+
+  return buildAbsoluteUrl(runtimeBaseUrl, path);
+};
+
+export const buildTentacleGitStatusUrl = (
+  tentacleId: string,
+  runtimeBaseUrl = readRuntimeBaseUrl(),
+) => buildTentacleGitActionUrl(tentacleId, "status", runtimeBaseUrl);
+
+export const buildTentacleGitCommitUrl = (
+  tentacleId: string,
+  runtimeBaseUrl = readRuntimeBaseUrl(),
+) => buildTentacleGitActionUrl(tentacleId, "commit", runtimeBaseUrl);
+
+export const buildTentacleGitPushUrl = (
+  tentacleId: string,
+  runtimeBaseUrl = readRuntimeBaseUrl(),
+) => buildTentacleGitActionUrl(tentacleId, "push", runtimeBaseUrl);
+
+export const buildTentacleGitSyncUrl = (
+  tentacleId: string,
+  runtimeBaseUrl = readRuntimeBaseUrl(),
+) => buildTentacleGitActionUrl(tentacleId, "sync", runtimeBaseUrl);
+
+export const buildTentacleGitPullRequestUrl = (
+  tentacleId: string,
+  runtimeBaseUrl = readRuntimeBaseUrl(),
+) => {
+  const encodedTentacleId = encodeURIComponent(tentacleId);
+  const path = `/api/tentacles/${encodedTentacleId}/git/pr`;
+  if (!runtimeBaseUrl) {
+    return path;
+  }
+
+  return buildAbsoluteUrl(runtimeBaseUrl, path);
+};
+
+export const buildTentacleGitPullRequestMergeUrl = (
+  tentacleId: string,
+  runtimeBaseUrl = readRuntimeBaseUrl(),
+) => {
+  const encodedTentacleId = encodeURIComponent(tentacleId);
+  const path = `/api/tentacles/${encodedTentacleId}/git/pr/merge`;
+  if (!runtimeBaseUrl) {
+    return path;
+  }
+
+  return buildAbsoluteUrl(runtimeBaseUrl, path);
+};
+
+export const buildDeckTentaclesUrl = (runtimeBaseUrl = readRuntimeBaseUrl()) => {
+  if (!runtimeBaseUrl) {
+    return "/api/deck/tentacles";
+  }
+
+  return buildAbsoluteUrl(runtimeBaseUrl, "/api/deck/tentacles");
+};
+
+export const buildDeckSkillsUrl = (runtimeBaseUrl = readRuntimeBaseUrl()) => {
+  if (!runtimeBaseUrl) {
+    return "/api/deck/skills";
+  }
+
+  return buildAbsoluteUrl(runtimeBaseUrl, "/api/deck/skills");
+};
+
+export const buildDeckTentacleUrl = (tentacleId: string, runtimeBaseUrl = readRuntimeBaseUrl()) => {
+  const encodedTentacleId = encodeURIComponent(tentacleId);
+  const path = `/api/deck/tentacles/${encodedTentacleId}`;
+  if (!runtimeBaseUrl) {
+    return path;
+  }
+
+  return buildAbsoluteUrl(runtimeBaseUrl, path);
+};
+
+export const buildDeckTentacleSkillsUrl = (
+  tentacleId: string,
+  runtimeBaseUrl = readRuntimeBaseUrl(),
+) => {
+  const path = `/api/deck/tentacles/${encodeURIComponent(tentacleId)}/skills`;
+  if (!runtimeBaseUrl) {
+    return path;
+  }
+
+  return buildAbsoluteUrl(runtimeBaseUrl, path);
+};
+
+export const buildDeckVaultFileUrl = (
+  tentacleId: string,
+  fileName: string,
+  runtimeBaseUrl = readRuntimeBaseUrl(),
+) => {
+  const encodedTentacleId = encodeURIComponent(tentacleId);
+  const encodedFileName = encodeURIComponent(fileName);
+  const path = `/api/deck/tentacles/${encodedTentacleId}/files/${encodedFileName}`;
+  if (!runtimeBaseUrl) {
+    return path;
+  }
+
+  return buildAbsoluteUrl(runtimeBaseUrl, path);
+};
+
+export const buildDeckTodoToggleUrl = (
+  tentacleId: string,
+  runtimeBaseUrl = readRuntimeBaseUrl(),
+) => {
+  const path = `/api/deck/tentacles/${encodeURIComponent(tentacleId)}/todo/toggle`;
+  if (!runtimeBaseUrl) return path;
+  return buildAbsoluteUrl(runtimeBaseUrl, path);
+};
+
+export const buildDeckTodoEditUrl = (tentacleId: string, runtimeBaseUrl = readRuntimeBaseUrl()) => {
+  const path = `/api/deck/tentacles/${encodeURIComponent(tentacleId)}/todo/edit`;
+  if (!runtimeBaseUrl) return path;
+  return buildAbsoluteUrl(runtimeBaseUrl, path);
+};
+
+export const buildDeckTodoAddUrl = (tentacleId: string, runtimeBaseUrl = readRuntimeBaseUrl()) => {
+  const path = `/api/deck/tentacles/${encodeURIComponent(tentacleId)}/todo`;
+  if (!runtimeBaseUrl) return path;
+  return buildAbsoluteUrl(runtimeBaseUrl, path);
+};
+
+export const buildDeckTodoDeleteUrl = (
+  tentacleId: string,
+  runtimeBaseUrl = readRuntimeBaseUrl(),
+) => {
+  const path = `/api/deck/tentacles/${encodeURIComponent(tentacleId)}/todo/delete`;
+  if (!runtimeBaseUrl) return path;
+  return buildAbsoluteUrl(runtimeBaseUrl, path);
+};
+
+export const buildDeckTodoSolveUrl = (
+  tentacleId: string,
+  runtimeBaseUrl = readRuntimeBaseUrl(),
+) => {
+  const path = `/api/deck/tentacles/${encodeURIComponent(tentacleId)}/todo/solve`;
+  if (!runtimeBaseUrl) return path;
+  return buildAbsoluteUrl(runtimeBaseUrl, path);
+};
+
+export const buildPromptsUrl = (runtimeBaseUrl = readRuntimeBaseUrl()) => {
+  if (!runtimeBaseUrl) {
+    return "/api/prompts";
+  }
+
+  return buildAbsoluteUrl(runtimeBaseUrl, "/api/prompts");
+};
+
+export const buildPromptItemUrl = (name: string, runtimeBaseUrl = readRuntimeBaseUrl()) => {
+  const encodedName = encodeURIComponent(name);
+  const path = `/api/prompts/${encodedName}`;
+  if (!runtimeBaseUrl) {
+    return path;
+  }
+
+  return buildAbsoluteUrl(runtimeBaseUrl, path);
+};
+
+export const buildTerminalSocketUrl = (
+  tentacleId: string,
+  runtimeBaseUrl = readRuntimeBaseUrl(),
+  location: LocationLike = window.location,
+) => {
+  const encodedTentacleId = encodeURIComponent(tentacleId);
+  if (!runtimeBaseUrl) {
+    return localWebSocketUrl(location, encodedTentacleId);
+  }
+
+  const webSocketBase = toWebSocketBase(runtimeBaseUrl);
+  if (!webSocketBase) {
+    return localWebSocketUrl(location, encodedTentacleId);
+  }
+
+  return buildAbsoluteUrl(webSocketBase, `/api/terminals/${encodedTentacleId}/ws`);
+};