refactor(chat): trim the welcome card to what it actually needs

Ponytail pass over the diff. No behaviour change; the composer gating and
the toast routing are untouched.

- three copy-pasted <li> blocks collapse into a map over the feature keys
- the bullets were `list-style: none` plus a hand-rolled dot span per row;
  native markers do it, so the spans and their 9-line rule are gone (the
  ul/li must stay non-flex or they stop being list-items, and the global
  reset means `list-style: disc` has to be set back explicitly)
- the Sparkles glyph loses its 40x40 tinted tile, keeps its colour
- role="region" + useId + aria-labelledby wrapped a transient empty state
  in a named landmark the <h2> already announces
- the es and ja-JP test cases repeated the fr one against 2 arbitrary
  locales of 13; localeParity.test.ts already enforces key presence, and
  fr keeps the English-fallback assertion parity cannot see
- comment blocks that restated the code, or restated each other, cut back
  to the parts that are not obvious from the lines below them
- dead `background` in the CTA transition (its background never changes)

net: -93 lines.

Author: EtienneLescot

src/components/ai-edition/ChatWelcome.test.tsx

@@ -1,10 +1,7 @@
-// ChatWelcome guards the "no provider connected" empty state.
-//
-// Two things matter here:
-//   1. the welcome card is fully localized — every locale must render the
-//      CTA and the disclaimer, not fall back to a key like "chat.welcome.cta"
-//   2. the CTA opens the provider settings dialog (whatever the parent
-//      decided to do, it just has to fire the callback)
+// ChatWelcome guards the "no provider connected" empty state: the copy reaches
+// the DOM, the CTA fires, and a non-English locale is really translated rather
+// than falling back to English. localeParity.test.ts covers key presence for
+// the other locales; only the fallback check needs a rendered card.
 
 import "@testing-library/jest-dom";
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
@@ -61,29 +58,4 @@ describe("ChatWelcome", () => {
 		expect(screen.queryByText(/transcript will be sent/i)).not.toBeInTheDocument();
 		expect(screen.getByText(/transcription de votre vidéo/i)).toBeInTheDocument();
 	});
-
-	it("renders the Spanish welcome card with translated copy", () => {
-		renderIn("es", <ChatWelcome onOpenProviderSettings={vi.fn()} />);
-
-		expect(screen.getByText(/configurar un proveedor/i)).toBeInTheDocument();
-		expect(screen.getByText(/transcripción de tu vídeo/i)).toBeInTheDocument();
-	});
-
-	it("renders the Japanese welcome card with translated copy", () => {
-		renderIn("ja-JP", <ChatWelcome onOpenProviderSettings={vi.fn()} />);
-
-		expect(screen.getByText(/プロバイダーを設定/)).toBeInTheDocument();
-		// The Japanese disclaimer uses 「動画」 — guard against the English
-		// fallback by asserting the locale-specific substring is present.
-		expect(screen.getByText(/動画の文字起こし/)).toBeInTheDocument();
-	});
-
-	it("exposes the welcome region to assistive tech", () => {
-		renderIn("en", <ChatWelcome onOpenProviderSettings={vi.fn()} />);
-
-		// The region is labelled by the <h2> itself (aria-labelledby), so the
-		// title is announced once, not duplicated by a redundant aria-label.
-		const region = screen.getByRole("region", { name: /bring your own ai/i });
-		expect(region).toBeInTheDocument();
-	});
 });

src/components/ai-edition/ChatWelcome.tsx

@@ -1,54 +1,36 @@
 // Welcome view for the LM chat panel.
 //
 // Shown in the chat body when the chat has nothing it can talk to — see
-// canSendChat() in chatAvailability.ts for the exact condition. It explains
-// what the chat can do, then routes the user to the provider settings dialog
-// with a single CTA. A small disclaimer under the button makes it clear that,
-// once a provider IS connected, the video's transcript will be sent to it.
-//
-// It replaces the `chat.emptyState` hint (which would be a dead end with no
-// provider), but only while the conversation is empty: a user who disconnects
-// mid-project keeps their history on screen, with the composer disabled.
+// canSendChat() in chatAvailability.ts. It replaces the `chat.emptyState` hint
+// (a dead end with no provider) only while the conversation is empty, so a user
+// who disconnects mid-project keeps their history with the composer disabled.
 
 import { ArrowRight, Info, Sparkles } from "lucide-react";
-import { useId } from "react";
 import { useScopedT } from "@/contexts/I18nContext";
 import styles from "./NewEditorShell.module.css";
 
+const FEATURE_KEYS = ["feature1", "feature2", "feature3"] as const;
+
 interface ChatWelcomeProps {
 	/** Open the provider settings modal so the user can pick + connect one. */
 	onOpenProviderSettings: () => void;
 }
 
 export function ChatWelcome({ onOpenProviderSettings }: ChatWelcomeProps) {
 	const t = useScopedT("editor");
-	const titleId = useId();
 
 	return (
-		<div className={styles.chatWelcome} role="region" aria-labelledby={titleId}>
+		<div className={styles.chatWelcome}>
 			<header className={styles.chatWelcomeHero}>
-				<span className={styles.chatWelcomeIcon} aria-hidden="true">
-					<Sparkles size={20} />
-				</span>
-				<h2 className={styles.chatWelcomeTitle} id={titleId}>
-					{t("chat.welcome.title")}
-				</h2>
+				<Sparkles size={20} className={styles.chatWelcomeIcon} aria-hidden="true" />
+				<h2 className={styles.chatWelcomeTitle}>{t("chat.welcome.title")}</h2>
 				<p className={styles.chatWelcomeSubtitle}>{t("chat.welcome.subtitle")}</p>
 			</header>
 
 			<ul className={styles.chatWelcomeFeatures}>
-				<li className={styles.chatWelcomeFeature}>
-					<span className={styles.chatWelcomeFeatureDot} aria-hidden="true" />
-					<span>{t("chat.welcome.feature1")}</span>
-				</li>
-				<li className={styles.chatWelcomeFeature}>
-					<span className={styles.chatWelcomeFeatureDot} aria-hidden="true" />
-					<span>{t("chat.welcome.feature2")}</span>
-				</li>
-				<li className={styles.chatWelcomeFeature}>
-					<span className={styles.chatWelcomeFeatureDot} aria-hidden="true" />
-					<span>{t("chat.welcome.feature3")}</span>
-				</li>
+				{FEATURE_KEYS.map((key) => (
+					<li key={key}>{t(`chat.welcome.${key}`)}</li>
+				))}
 			</ul>
 
 			<button type="button" className={styles.chatWelcomeCta} onClick={onOpenProviderSettings}>

src/components/ai-edition/LeftPanel.tsx

@@ -679,12 +679,7 @@ function ChatStripPanel() {
 	const [reasoningBusy, setReasoningBusy] = useState(false);
 	// null until the first llmGetSnapshot() lands: "unknown", not "none".
 	const [connectedProviders, setConnectedProviders] = useState<string[] | null>(null);
-	// Derive "can the user actually chat right now?" once, then use it
-	// everywhere. A stale active config that points at a provider with no
-	// credentials still counts as not-ready — the welcome view + disabled
-	// composer are the right surface. See chatAvailability.ts for the truth
-	// table; the empty-string provider case is what you get immediately
-	// after `llmDisconnect` writes its reset.
+	// unknown ≠ none; see chatAvailability.ts.
 	const canChat = canSendChat(llmConfig, connectedProviders);
 	const [modelPopoverOpen, setModelPopoverOpen] = useState(false);
 	const modelButtonRef = useRef<HTMLButtonElement | null>(null);
@@ -783,13 +778,9 @@ function ChatStripPanel() {
 	const send = async (overrideText?: string) => {
 		const text = (overrideText ?? input).trim();
 		if (!projectId || !text || busy) return;
-		// ponytail: no connected provider = nothing to talk to. Bounce the user
-		// to the settings modal instead of sending a doomed request and
-		// surfacing a generic LLM error. The composer is also disabled in this
-		// state, but Enter-to-send could still slip through (e.g. focus
-		// restored via shortcut), so the check lives here too. The toast is what
-		// explains the modal to prompts that never touched the composer — the
-		// timeline's Auto-enhance hands its text straight to send().
+		// ponytail: nothing to talk to. Bounce to the settings modal instead of
+		// firing a doomed request. The composer is disabled in this state too,
+		// but Auto-enhance calls send() directly and Enter can slip through.
 		if (!canChat) {
 			toast.error(t("chat.composerDisabledNoProvider"));
 			setSettingsOpen(true);
@@ -868,14 +859,10 @@ function ChatStripPanel() {
 	// timeline's Auto-enhance → "Smart zooms + cuts with AI"). Routes through
 	// the normal send() so sessions/checkpoints/rewind all keep working; the
 	// message shows in the composer's history exactly as if typed.
-	//
-	// The confirmation toast lives here rather than at the submit site because
-	// only this side knows whether the prompt was taken: with no usable
-	// provider send() bounces it to the settings modal, and the producer would
-	// otherwise claim success on a request that never left.
-	// ponytail: one producer today (Auto-enhance), so the queued prompt and the
-	// toast copy are assumed to be that one. A second producer needs the bus to
-	// carry its own confirmation string.
+	// The confirmation toast lives here because only this side knows the prompt
+	// was taken — send() bounces it to the settings modal with no provider.
+	// ponytail: one producer today, so the toast copy is assumed to be its own.
+	// A second producer needs the bus to carry its confirmation string.
 	const pendingPrompt = useChatPromptBus((s) => s.pending);
 	const consumePrompt = useChatPromptBus((s) => s.consume);
 	// biome-ignore lint/correctness/useExhaustiveDependencies: send() is intentionally not a dep (recreated each render); consume() clears `pending` so this fires once per queued prompt.

src/components/ai-edition/NewEditorShell.module.css

@@ -2139,12 +2139,6 @@
 }
 
 .chatWelcomeIcon {
-  display: inline-grid;
-  place-items: center;
-  width: 40px;
-  height: 40px;
-  border-radius: 12px;
-  background: var(--accent-soft);
   color: var(--accent);
   margin-bottom: 4px;
 }
@@ -2163,35 +2157,23 @@
   max-width: 32ch;
 }
 
+/* Native list markers — no flex on the ul/li, or the items stop being
+   list-items and the markers vanish. padding-inline-start keeps them inside
+   the card in both writing directions. */
 .chatWelcomeFeatures {
-  list-style: none;
+  /* explicit: the global reset sets list-style: none on every ul */
+  list-style: disc;
   margin: 0;
   padding: 10px 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
+  padding-inline-start: 26px;
   background: var(--surface);
   border: 1px solid var(--border-soft);
   border-radius: var(--r-md);
-}
-
-.chatWelcomeFeature {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
   font: 400 12px/1.45 var(--font-body);
   color: var(--fg-2);
 }
-
-.chatWelcomeFeatureDot {
-  flex: 0 0 auto;
-  margin-top: 6px;
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
-  background: var(--accent);
-  opacity: 0.85;
-}
+.chatWelcomeFeatures li + li { margin-top: 6px; }
+.chatWelcomeFeatures li::marker { color: var(--accent); }
 
 .chatWelcomeCta {
   display: inline-flex;
@@ -2206,7 +2188,7 @@
   border: 1px solid var(--accent);
   font: 600 12.5px var(--font-body);
   cursor: pointer;
-  transition: filter 120ms ease, background 120ms ease;
+  transition: filter 120ms ease;
 }
 .chatWelcomeCta:hover { filter: brightness(0.95); }
 .chatWelcomeCta:focus-visible {
@@ -2226,7 +2208,5 @@
 .chatWelcomeDisclaimerIcon {
   flex: 0 0 auto;
   margin-top: 2px;
-  color: var(--muted);
   opacity: 0.8;
 }
-

src/components/ai-edition/chatAvailability.ts

@@ -1,33 +1,19 @@
 // "Can the user actually send a chat message right now?"
 //
-// Both inputs come from the `aiEdition.llmGetSnapshot` IPC: the selected
-// LLM config (may be null, or carry an empty-string provider after a
-// disconnect) and the list of providers that currently have valid
-// credentials. The chat composer is usable only when those two agree — a
-// stale config that points at a provider with no credentials should look
-// the same as "nothing set up yet" to the UI.
-//
-// This mirrors `runChat`'s own preflight in electron/ai-edition/chat-service.ts
-// (config present → provider known → credential resolves), so the composer is
-// disabled exactly when a send would have failed.
-//
-// Kept as a tiny pure function so the welcome-vs-composer gating in
-// <LeftPanel /> can be tested in isolation.
+// Mirrors runChat's preflight (electron/ai-edition/chat-service.ts), so the
+// composer is disabled exactly when a send would have failed.
 
 import type { AiEditionLlmConfig } from "@/native/contracts";
 
 export function canSendChat(
 	llmConfig: AiEditionLlmConfig | null,
 	connectedProviders: string[] | null,
 ): boolean {
-	// null = the snapshot has not landed yet, which is "unknown", not "none".
-	// Treating it as none flashed the welcome view at every user on every mount
-	// and, since refreshLlm() swallows its errors, locked the panel behind an
-	// undismissable welcome whenever the IPC call failed. Staying optimistic
-	// degrades to the pre-welcome behaviour instead: type, send, get the real
-	// error from the main process.
+	// Snapshot not landed yet: unknown, not none. refreshLlm() swallows its
+	// errors, so pessimism here would strand the panel behind the welcome view.
 	if (connectedProviders === null) return true;
 	if (llmConfig === null) return false;
+	// llmDisconnect resets the active config to provider: "".
 	if (llmConfig.provider === "") return false;
 	return connectedProviders.includes(llmConfig.provider);
 }