Messengers redesign: Telegram + Discord connect flows, card grid, family status by jess-cat · Pull Request #146 · deathbyknowledge/gsv

jess-cat · 2026-06-25T20:49:48Z

Summary

End-to-end redesign of the Messengers surface (branched off web-redesign). GSV supports exactly two messengers — Telegram and Discord — and users connect one or more bots per platform to talk to GSV remotely.

Card-grid page (Crew-style), one card per platform. WhatsApp removed from the surface.
Family status everywhere — Not enabled / Connected / Disconnected / Attention (+ "N connected / M disconnected" tooltip). No "NO MESSENGERS"/"NO OBJECTS" empty state on the page, the settings overview, or the desktop object map (always renders Telegram + Discord).
Simplified connect flow: a single bot-token input → existing adapter.connect. Progressive-disclosure wizard (one step at a time), standard object-detail header, platform-specific titles ("Connect Telegram bot" / "Connect Discord bot"), an attention Alert on the steps performed off-GSV, and "Open BotFather" / "Open Discord Developer Portal" + documentation links. Adapter/account/webhook fields are hidden.
Cards cap at 2 bots with a "N more messengers" affordance → a dedicated per-platform page (built on ConsoleDetailPage) listing every bot, with a connect-another action.
Deep-link: a not-enabled platform entry (desktop/overview) opens "Connect " directly; a platform with bots opens the full-list page.
New DS primitives/tokens: Link (a real <a href> — Button variant="link" is button-only), ConsoleDetailHeader (extracted from ConsoleDetailPage, now shared), and tokens --link/--link-hover/--frame-inset/--meta/--prose-dim.
Responsiveness via CSS container queries + min-width:0 — the Messengers surface lives in a console column whose width is decoupled from the viewport (ChatDock + nav rail), so viewport media queries weren't firing.

Backend / dev

Gateway binds CHANNEL_TELEGRAM (gsv-channel-telegram / TelegramChannel) and drops CHANNEL_WHATSAPP; scripts/dev-stack.sh runs the Telegram adapter instead of WhatsApp.
web/vite.config.ts adds a dev proxy forwarding gateway paths (/ws WS + /oauth//health//runtime//public//.well-known) to :8787, so you can log in on the :5173 dev server with HMR.

⚠️ Testing — needs real bots

Both connect flows (Telegram and Discord) have only been verified end-to-end with mock data in the design catalog. They still need testing with real bots: local dev can't complete an actual connect — Telegram's setWebhook requires a publicly reachable TELEGRAM_WEBHOOK_BASE_URL, and Discord needs a live gateway connection. Please create + connect a real bot on each platform before merging to confirm the token → adapter.connect path and the resulting status states.

Deferred (flagged for the product-wide DS audit)

Tokenize the decorative alpha washes (glows / grid texture / translucent fills) — no alpha-token system exists yet.
The same minmax(312px,1fr) → minmax(min(312px,100%),1fr) overflow fix applies to ConsoleCrewPage.css.

🤖 Generated with Claude Code

UI - Crew-style card grid on the Messengers page: one card per platform (header icon + name + family-status badge, blurb, bot list, connect CTA). - Simplified Telegram onboarding: a single bot-token input wired to adapter.connect, numbered guidance + doc links; adapter/account/webhook fields hidden. Discord shares the flow. - Family status everywhere (not-enabled / connected / disconnected / attention + "N connected / M disconnected" tooltip). Always render Telegram + Discord — no "NO MESSENGERS" / "NO OBJECTS" empty state, in the page, the settings overview, and the desktop object map. - Deep-link: a not-enabled platform entry opens "Connect <platform>" directly instead of the roster. Backend / dev - Gateway binds CHANNEL_TELEGRAM (TelegramChannel) and drops CHANNEL_WHATSAPP; dev-stack runs the telegram adapter worker. - Vite dev proxy forwards gateway HTTP + WebSocket to :8787 so the app can log in from the :5173 dev server (with HMR). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…nsive Connect flow (MessengerOnboardingFlow) - Standard object-detail header via new shared ConsoleDetailHeader (extracted from ConsoleDetailPage; both consume it). - Progressive-disclosure wizard: one step at a time, NEXT advances, Stepper jumps back to completed steps; each step titled with SectionHeader (meta "IN TELEGRAM" / "IN GSV"). - Off-GSV steps show an attention Alert ("Do this step in Telegram…"). - Success-step capabilities use ListRow; help copy "Need help? Documentation". - Footer buttons moved INSIDE the step card so they never sit under the floating ChatDock launcher (always clickable). Design system - New Link primitive (app/components/ui/Link): a real <a href> with external/internal + arrow variants (Button variant="link" is button-only). Catalogued in the Chrome group. - New tokens: --link/--link-hover (bluer, distinguishable), --frame-inset, --meta, --prose-dim. Replaced hardcoded literals across the messengers feature, SectionHeader, and ConsoleDetailPage. Responsiveness - The Messengers surface lives in a console column decoupled from the viewport (ChatDock + nav rail), so viewport media queries didn't fire for a narrow column. Converted the connect flow and the card-grid panel to CSS container queries + min-width:0 (hide stepper labels <520, stack footer <680). Card grid uses minmax(min(312px,100%),1fr) to avoid overflow. Deferred to the product-wide DS audit: tokenize the decorative alpha washes (grid texture, glows, translucent fills) and fix the same minmax overflow in ConsoleCrewPage.css. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

- Connect-flow title is now platform-specific ("Connect Telegram bot" / "Connect Discord bot"). - Discord parity: "Open Discord Developer Portal" link + Discord-specific step copy, matching the Telegram BotFather affordance. - Cards cap the bot list at 2 and show "N more messengers", which opens a dedicated per-platform page (built on ConsoleDetailPage) listing every bot with a connect-another action. - Bare-platform routing: 0 bots → connect flow; 1-2 bots → roster card; >2 bots → "N more" opens the full-list page. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 93a157d670

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

chatgpt-codex-connector · 2026-06-25T20:53:50Z

    setFormError("");
-    setResult(null);
    try {
+      const accountId = isTelegram ? deriveTelegramAccountId(token) : "main";


Generate distinct Discord account IDs

Please don't use a constant account id for every non-Telegram bot. In the Discord flow, clicking “CONNECT ANOTHER DISCORD” still calls adapter.connect with accountId: "main"; the gateway status store is keyed by (adapter, accountId) and the Discord worker uses that account id as the Durable Object name, so a second Discord bot overwrites or reuses the first instead of creating the additional bot that the new card/list UI advertises.

Useful? React with 👍 / 👎.

chatgpt-codex-connector · 2026-06-25T20:53:50Z

+      if (next.ok) {
+        setResult(next);
+        setStep(STEP_ONLINE);


Require authenticated status before showing online

Please gate the ONLINE step on next.connected && next.authenticated or show an attention/detail state when those fields are false. The Discord adapter can return from adapterConnect after opening the gateway WebSocket before READY/authentication has completed, and the gateway result can therefore be { ok: true, connected: false, authenticated: false }; this flow still renders CONNECTED and “Messenger-bot online!”, which gives users a false success for a not-yet-ready or invalid bot token.

Useful? React with 👍 / 👎.

chatgpt-codex-connector · 2026-06-25T20:53:50Z

+export function familyStatus(adapter: ConsoleAdapter): AdapterFamilyStatusInfo {
+  return familyStatusFromAccounts(adapter.accounts);


Account for unavailable adapter workers

Please include adapter.available in the family status calculation. adapter.list can return cached accounts with available: false when the service binding/worker is absent, but this function only counts the last persisted account statuses; a previously connected Telegram or Discord worker that is no longer deployed will still show CONNECTED across the card grid, overview, and desktop objects even though adapter operations cannot work.

Useful? React with 👍 / 👎.

jess-cat and others added 3 commits June 25, 2026 20:17

chatgpt-codex-connector Bot reviewed Jun 25, 2026

View reviewed changes

Base automatically changed from web-redesign to main June 25, 2026 21:08

include api key field

719bfb5

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Messengers redesign: Telegram + Discord connect flows, card grid, family status#146

Messengers redesign: Telegram + Discord connect flows, card grid, family status#146
jess-cat wants to merge 4 commits into
mainfrom
messengers-flow

jess-cat commented Jun 25, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

chatgpt-codex-connector Bot Jun 25, 2026

Uh oh!

chatgpt-codex-connector Bot Jun 25, 2026

Uh oh!

chatgpt-codex-connector Bot Jun 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		export function familyStatus(adapter: ConsoleAdapter): AdapterFamilyStatusInfo {
		return familyStatusFromAccounts(adapter.accounts);

Conversation

jess-cat commented Jun 25, 2026

Summary

Backend / dev

⚠️ Testing — needs real bots

Deferred (flagged for the product-wide DS audit)

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector Bot Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector Bot Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants