deathbyknowledge · jess-cat · Jun 25, 2026 · Jun 25, 2026 · Jun 25, 2026
diff --git a/gateway/wrangler.jsonc b/gateway/wrangler.jsonc
@@ -57,9 +57,9 @@
 	// Channel service bindings (Gateway → Channel RPC)
 	"services": [
 		{
-			"binding": "CHANNEL_WHATSAPP",
-			"service": "gsv-channel-whatsapp",
-			"entrypoint": "WhatsAppChannelEntrypoint"
+			"binding": "CHANNEL_TELEGRAM",
+			"service": "gsv-channel-telegram",
+			"entrypoint": "TelegramChannel"
 		},
 		{
 			"binding": "CHANNEL_DISCORD",

diff --git a/scripts/dev-stack.sh b/scripts/dev-stack.sh
@@ -7,13 +7,13 @@ STATE_ROOT="$ROOT_DIR/.wrangler/dev-state/v3"
 mkdir -p "$STATE_ROOT/do/ripgit-Repository"
 mkdir -p "$STATE_ROOT/do/gsv-Kernel"
 mkdir -p "$STATE_ROOT/do/gsv-Process"
-mkdir -p "$STATE_ROOT/do/gsv-channel-whatsapp-WhatsAppAccount"
+mkdir -p "$STATE_ROOT/do/gsv-channel-telegram-TelegramAccount"
 
 cd "$ROOT_DIR/ripgit"
 exec npm exec -- wrangler dev \
   -c ../gateway/wrangler.jsonc \
   -c ../assembler/wrangler.toml \
-  -c ../adapters/whatsapp/wrangler.jsonc \
+  -c ../adapters/telegram/wrangler.jsonc \
   -c wrangler.toml \
   --ip 0.0.0.0 \
   --persist-to ../.wrangler/dev-state
diff --git a/web/src/app/components/ui/Link.css b/web/src/app/components/ui/Link.css
@@ -0,0 +1,39 @@
+.gsv-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--link, #8fb6ff);
+  font-family: var(--gsv-font-mono);
+  font-size: 13px;
+  letter-spacing: 0.04em;
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 120ms ease;
+}
+
+.gsv-link-label {
+  border-bottom: 1px solid var(--link, #8fb6ff);
+  padding-bottom: 2px;
+  transition: border-color 120ms ease;
+}
+
+.gsv-link:hover,
+.gsv-link:focus-visible {
+  color: var(--link-hover, #b8d2ff);
+}
+
+.gsv-link:hover .gsv-link-label,
+.gsv-link:focus-visible .gsv-link-label {
+  border-color: var(--link-hover, #b8d2ff);
+}
+
+.gsv-link:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+  border-radius: 1px;
+}
+
+.gsv-link-arrow {
+  font-size: 12px;
+  line-height: 1;
+}
diff --git a/web/src/app/components/ui/Link.tsx b/web/src/app/components/ui/Link.tsx
@@ -0,0 +1,34 @@
+import type { ComponentChildren } from "preact";
+import "./Link.css";
+
+export interface LinkProps {
+  href: string;
+  children: ComponentChildren;
+  /** Open in a new tab with a safe `rel`. Defaults to true for http(s) URLs. */
+  external?: boolean;
+  /** Render a trailing arrow glyph (for "read more"-style links). */
+  arrow?: boolean;
+  className?: string;
+  onClick?: () => void;
+}
+
+/** Link — the design system's text link / anchor primitive. Token-styled
+ *  (accent colour + underline rule, focus-visible ring) and, unlike
+ *  `Button variant="link"`, it is a real `<a href>` so external destinations,
+ *  middle-click, and right-click "open in new tab" all behave natively. */
+export function Link({ href, children, external, arrow = false, className = "", onClick }: LinkProps) {
+  const isExternal = external ?? /^https?:\/\//i.test(href);
+  const cls = ["gsv-link", className].filter(Boolean).join(" ");
+
+  return (
+    <a
+      class={cls}
+      href={href}
+      onClick={onClick}
+      {...(isExternal ? { target: "_blank", rel: "noreferrer noopener" } : {})}
+    >
+      <span class="gsv-link-label">{children}</span>
+      {arrow ? <span class="gsv-link-arrow" aria-hidden="true">→</span> : null}
+    </a>
+  );
+}
diff --git a/web/src/app/components/ui/SectionHeader.tsx b/web/src/app/components/ui/SectionHeader.tsx
@@ -69,7 +69,7 @@ export function SectionHeader({
         {title}
       </span>
       {hasMeta ? (
-        <span class="gsv-section-header-meta" style={{ marginLeft: "auto", fontSize: "10px", letterSpacing: ".16em", color: "#7d78b8" }}>{meta}</span>
+        <span class="gsv-section-header-meta" style={{ marginLeft: "auto", fontSize: "10px", letterSpacing: ".16em", color: "var(--meta)" }}>{meta}</span>
       ) : null}
       {chevron ? <span class="gsv-section-header-chevron" aria-hidden="true" /> : null}
     </>

diff --git a/web/src/app/features/gsv-console/components/ConsoleDetailHeader.tsx b/web/src/app/features/gsv-console/components/ConsoleDetailHeader.tsx
@@ -0,0 +1,32 @@
+import { Icon } from "../../../components/ui/Icon";
+import { StatusDot, type StatusTone } from "../../../components/ui/StatusDot";
+import "./ConsoleDetailPage.css";
+
+export type ConsoleDetailHeaderProps = {
+  icon: string;
+  title: string;
+  typeLabel: string;
+  statusLabel: string;
+  tone: StatusTone;
+};
+
+/** The standard console object-detail header: framed icon + title + a
+ *  type-label / status row. Shared by ConsoleDetailPage and the messenger
+ *  connect flow so they read as the same family. */
+export function ConsoleDetailHeader({ icon, title, typeLabel, statusLabel, tone }: ConsoleDetailHeaderProps) {
+  return (
+    <header class="gsv-console-detail-head">
+      <span class="gsv-console-detail-icon">
+        <Icon name={icon} size={30} />
+      </span>
+      <div class="gsv-console-detail-title">
+        <h2>{title}</h2>
+        <div>
+          <span>{typeLabel}</span>
+          <StatusDot tone={tone} size={7} />
+          <span>{statusLabel}</span>
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/web/src/app/features/gsv-console/components/ConsoleDetailPage.css b/web/src/app/features/gsv-console/components/ConsoleDetailPage.css
@@ -54,8 +54,10 @@
 .gsv-console-detail-title div {
   min-width: 0;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 12px;
+  row-gap: 6px;
   color: #a8a2dc;
   font-size: 10px;
   letter-spacing: 0.16em;
@@ -70,7 +72,7 @@
 .gsv-console-detail-blurb {
   max-width: 640px;
   margin: 0;
-  color: #9089d4;
+  color: var(--prose-dim);
   font-family: var(--gsv-font-prose);
   font-size: 14px;
   line-height: 1.65;

diff --git a/web/src/app/features/gsv-console/components/ConsoleDetailPage.tsx b/web/src/app/features/gsv-console/components/ConsoleDetailPage.tsx
@@ -1,9 +1,9 @@
 import type { ComponentChildren } from "preact";
 import { Button } from "../../../components/ui/Button";
-import { Icon } from "../../../components/ui/Icon";
 import { ListRow, type ListRowStatus } from "../../../components/ui/ListRow";
 import { SectionHeader } from "../../../components/ui/SectionHeader";
-import { StatusDot, type StatusTone } from "../../../components/ui/StatusDot";
+import type { StatusTone } from "../../../components/ui/StatusDot";
+import { ConsoleDetailHeader } from "./ConsoleDetailHeader";
 import "./ConsoleDetailPage.css";
 
 export type ConsoleDetailRow = {
@@ -59,19 +59,13 @@ export function ConsoleDetailPage({
   return (
     <section class="gsv-console-detail-page">
       <div class="gsv-console-detail-shell">
-        <header class="gsv-console-detail-head">
-          <span class="gsv-console-detail-icon">
-            <Icon name={icon} size={30} />
-          </span>
-          <div class="gsv-console-detail-title">
-            <h2>{title}</h2>
-            <div>
-              <span>{typeLabel}</span>
-              <StatusDot tone={tone} size={7} />
-              <span>{statusLabel}</span>
-            </div>
-          </div>
-        </header>
+        <ConsoleDetailHeader
+          icon={icon}
+          title={title}
+          typeLabel={typeLabel}
+          statusLabel={statusLabel}
+          tone={tone}
+        />
 
         <p class="gsv-console-detail-blurb">{blurb}</p>