thursday-agent 0.10.0 → 0.12.0

package/features/config/components/voice-key.tsx

@@ -1,12 +1,13 @@
 "use client";
 
-import { Check, X } from "lucide-react";
+import { ArrowUpRight, Check, X } from "lucide-react";
 import { type Ref, useImperativeHandle, useState } from "react";
 import { queryKey } from "@/app/api/query-key";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { ProviderIcon } from "@/features/ai/components/provider-icon";
 import { LIVE_PROVIDER } from "@/features/ai/live.schema";
+import { TEXT_MODEL_PROVIDERS } from "@/features/ai/model.schema";
 import { useServerAction } from "@/lib/protocol/use-server-action";
 import { revalidate, useServerRoute } from "@/lib/protocol/use-server-route";
 import { cn, WAITING_INK } from "@/lib/utils";
@@ -27,6 +28,28 @@ export type VoiceKeysHandle = {
 /** Shorter than this is not a key: no save button, no prompt on leaving. */
 export const KEY_MIN = 8;
 
+/** Where the voice key is made, beside its field: a pill that opens the page, and the page's address. */
+export function GetKeyLink() {
+  const at = TEXT_MODEL_PROVIDERS[LIVE_PROVIDER.id].keysAt;
+  if (!at) return null;
+  return (
+    <a
+      href={at}
+      target="_blank"
+      rel="noreferrer"
+      className="flex items-center gap-2.5 text-[13px] font-medium text-foreground no-underline"
+    >
+      <span className="flex h-7.5 shrink-0 items-center gap-1.5 rounded-full bg-muted px-3.5 whitespace-nowrap transition-colors hover:bg-accent">
+        Get a key
+        <ArrowUpRight className="size-3.5" />
+      </span>
+      <span className="truncate font-mono text-[11px] font-normal text-muted-foreground/70">
+        {at.replace(/^https:\/\//, "")}
+      </span>
+    </a>
+  );
+}
+
 /** The OpenAI key for Live voice and Responses delegation. Used by the intro and by the call screen while no key is set. */
 export function VoiceKeys({
   ref,

package/features/config/config.const.ts

@@ -45,6 +45,10 @@ export type ConfigEntry = {
   recommended?: true;
   /** The service's own site, for a key that is no model provider's: its icon is the row's mark. */
   site?: string;
+  /** Where the key is made: the link its dialog offers. */
+  keysAt?: string;
+  /** How the key begins, shown in its empty field in place of the setting's name. */
+  keyLooks?: string;
 };
 
 /**
@@ -179,6 +183,8 @@ const keyEntry = (
   label: provider.label,
   provider: provider.id,
   signIn: provider.signIn,
+  keysAt: provider.keysAt,
+  keyLooks: provider.keyLooks,
 });
 
 export const CONFIG_GROUPS: ConfigGroup[] = [
@@ -227,6 +233,7 @@ export const CONFIG_GROUPS: ConfigGroup[] = [
         label: "Exa",
         hint: "web search in one call — dashboard.exa.ai",
         site: "exa.ai",
+        keysAt: "https://dashboard.exa.ai/api-keys",
       },
     ],
   },

package/features/intro/components/intro.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import {
-  ArrowUpRight,
   Check,
   ChevronLeft,
   ChevronRight,
@@ -31,7 +30,7 @@ import { BOT_SEEDS, type BotSeed } from "@/features/bot/bot.seed";
 import { BotMark } from "@/features/bot/components/bot-mark";
 import { installSeedBots } from "@/features/bot/seed-bots";
 import { AccountsSetup } from "@/features/config/components/config-setting";
-import { VoiceKeys } from "@/features/config/components/voice-key";
+import { GetKeyLink, VoiceKeys } from "@/features/config/components/voice-key";
 import {
   removeConfigAction,
   setConfigAction,
@@ -464,20 +463,7 @@ function KeyTurn({ keyed, onSaved }: { keyed: boolean; onSaved: () => void }) {
     <>
       <Mine>Paste your OpenAI API key</Mine>
       <VoiceKeys dense plain autoFocus onSaved={onSaved} />
-      <a
-        href="https://platform.openai.com/api-keys"
-        target="_blank"
-        rel="noreferrer"
-        className="flex items-center gap-2.5 text-[13px] font-medium text-foreground no-underline"
-      >
-        <span className="flex h-7.5 shrink-0 items-center gap-1.5 rounded-full bg-muted px-3.5 whitespace-nowrap transition-colors hover:bg-accent">
-          Get a key
-          <ArrowUpRight className="size-3.5" />
-        </span>
-        <span className="truncate font-mono text-[11px] font-normal text-muted-foreground/70">
-          platform.openai.com/api-keys
-        </span>
-      </a>
+      <GetKeyLink />
       <ol className="flex flex-col gap-1.75 text-[13px] text-muted-foreground">
         {[
           "Sign in, or make an account",
@@ -823,7 +809,6 @@ function useDemo(playing: boolean) {
 
 /** The pill and the corner where finished work lands, as they stand during the loop. */
 function DemoCorners({ stage, icons }: { stage: DemoStage; icons: BotIcon[] }) {
-  const crew = BOT_SEEDS.filter((seed) => seed.recommended);
   return (
     <>
       {/* The card finished work really lands as, drawn here with nothing behind it */}
@@ -843,12 +828,12 @@ function DemoCorners({ stage, icons }: { stage: DemoStage; icons: BotIcon[] }) {
       )}
       <div className="absolute right-5 bottom-5 flex h-10 items-center gap-2.5 rounded-full bg-background pr-3.5 pl-2.5 ring-1 ring-border">
         <span className="flex">
-          {crew.map((seed, index) => (
+          {BOT_SEEDS.map((seed, index) => (
             <BotMark
               key={seed.name}
               size={22}
               seed={seed.name}
-              {...icons[BOT_SEEDS.indexOf(seed)]}
+              {...icons[index]}
               state={
                 stage === "working" && seed.name === "Analyst"
                   ? "thinking"

package/features/reach/reach.ts

@@ -2,6 +2,7 @@ import { readFile, stat } from "node:fs/promises";
 import type { ModelMessage } from "ai";
 import { appEvents } from "@/app/api/events/app-event.server";
 import { REACH } from "@/config";
+import { LiveSettingsSchema } from "@/features/ai/live.schema";
 import { modelErrorToString } from "@/features/ai/model";
 import { answerThread } from "@/features/bot/bot.runner";
 import type { Thread } from "@/features/bot/bot.schema";
@@ -14,7 +15,6 @@ import {
 } from "@/features/config/config.query";
 import { openWork } from "@/features/thursday/open-work";
 import { endCall, isCallOpen } from "@/features/thursday/thursday.query";
-import { ThursdaySettingsSchema } from "@/features/thursday/thursday.schema";
 import {
   answerInWriting,
   openTextCall,
@@ -353,7 +353,7 @@ async function answer(
     4_000,
   );
   try {
-    const settings = ThursdaySettingsSchema.parse({});
+    const settings = LiveSettingsSchema.parse({});
     // Quiet for long enough, or closed under it (the tab went, the server restarted): the
     // next words open a new call, which reads the last one back under Earlier calls
     const kept = live.line;

package/features/settings/components/setting-ui.tsx

@@ -187,14 +187,15 @@ export function SettingFilter({
 
 /**
  * What a nav row reports about its section. Amber counts what waits on you, red
- * marks what failed — the app's two colours, and the nav carries no others.
- * A count of 0 draws nothing, so a section at rest stays quiet.
+ * marks what failed — the app's two status colours — and a blue dot says a
+ * section is worth setting up though nothing waits on it. The nav carries no
+ * others. A count of 0 draws nothing, so a section at rest stays quiet.
  */
 export function NavBadge({
   tone,
   count,
 }: {
-  tone: "amber" | "red";
+  tone: "amber" | "red" | "brand";
   /** Omitted draws a dot: the section has something wrong, not a number of things. */
   count?: number;
 }) {
@@ -204,7 +205,11 @@ export function NavBadge({
       <span
         className={cn(
           "size-1.5 shrink-0 rounded-full",
-          tone === "red" ? "bg-destructive" : "bg-amber-600 dark:bg-amber-400",
+          tone === "red"
+            ? "bg-destructive"
+            : tone === "brand"
+              ? "bg-brand"
+              : "bg-amber-600 dark:bg-amber-400",
         )}
       />
     );
@@ -212,7 +217,11 @@ export function NavBadge({
     <span
       className={cn(
         "shrink-0 font-mono text-[11px]",
-        tone === "red" ? "text-destructive" : WAITING_INK,
+        tone === "red"
+          ? "text-destructive"
+          : tone === "brand"
+            ? "text-brand"
+            : WAITING_INK,
       )}
     >
       {count}

package/features/settings/components/settings.tsx

@@ -31,6 +31,7 @@ import { Segmented } from "@/components/ui/segmented";
 import { BotBadge } from "@/features/bot/components/bot-badge";
 import { BotsMark } from "@/features/bot/components/bot-mark";
 import { ThreadBadge } from "@/features/bot/components/thread-badge";
+import { ConfigBadge } from "@/features/config/components/config-badge";
 import { ModelsBadge } from "@/features/config/components/models-badge";
 import { McpBadge } from "@/features/connectors/components/mcp-badge";
 import { McpMark } from "@/features/connectors/components/mcp-mark";
@@ -269,6 +270,7 @@ export const SECTIONS: readonly {
     hint: "What bots think with, and what they draw, film and speak with",
     icon: Aperture,
     Component: ModelsSetting,
+    Badge: ModelsBadge,
   },
   {
     id: "keys",
@@ -277,7 +279,7 @@ export const SECTIONS: readonly {
     hint: "The accounts the app runs on",
     icon: KeyRound,
     Component: KeysSetting,
-    Badge: ModelsBadge,
+    Badge: ConfigBadge,
   },
   {
     id: "phone",

package/features/settings/settings.alert.ts

@@ -8,17 +8,19 @@ import { useMcpAlert } from "@/features/connectors/components/mcp-badge";
 import type { SettingSectionId } from "./settings.store";
 
 /**
- * What a section is reporting, in the app's two colours: amber waits on the
- * user, red is broken. A section at rest reports nothing. The fact lives here
- * so both places that draw it stay in step — the nav row (which can afford a
- * count) and the call screen's corner (which cannot).
+ * What a section is reporting: amber waits on the user and red is broken — the
+ * app's two status colours — and brand blue is worth setting up though nothing
+ * waits on it (the user's pick). A section at rest reports nothing. The fact
+ * lives here so both places that draw it stay in step — the nav row (which can
+ * afford a count) and the call screen's corner (which cannot).
  */
-export type SectionAlert = "amber" | "red" | null;
+export type SectionAlert = "amber" | "red" | "brand" | null;
 
-/** Broken outranks waiting; one of them is the whole ladder. */
+/** Broken outranks waiting, and waiting outranks a suggestion; one of them is the whole ladder. */
 export function worstAlert(alerts: SectionAlert[]): SectionAlert {
   if (alerts.includes("red")) return "red";
-  return alerts.includes("amber") ? "amber" : null;
+  if (alerts.includes("amber")) return "amber";
+  return alerts.includes("brand") ? "brand" : null;
 }
 
 /**
@@ -32,8 +34,7 @@ export function useSectionAlerts(): Partial<
   const bot = useBotAlert();
   const threads = useThreadAlert();
   const mcp = useMcpAlert();
-  const config = useConfigAlert();
-  const studio = useModelsAlert();
-  // keys and models are one section: a missing voice key and an empty studio both report there
-  return { bot, threads, mcp, models: worstAlert([config, studio]) };
+  const keys = useConfigAlert();
+  const models = useModelsAlert();
+  return { bot, threads, mcp, keys, models };
 }

package/features/signins/signins.query.ts

@@ -2,7 +2,11 @@ import { mkdir, readdir, readFile, rm, writeFile } from "node:fs/promises";
 import { join } from "node:path";
 import { appEvents } from "@/app/api/events/app-event.server";
 import { DATA_DIR, PATHS } from "@/config";
-import { WORKSPACE } from "@/features/workspace/workspace";
+import {
+  jobShellEnv,
+  openWorkspace,
+  WORKSPACE,
+} from "@/features/workspace/workspace";
 import { logger } from "@/lib/logger";
 import { type SignIn, siteOf } from "./signins.schema";
 
@@ -100,6 +104,67 @@ export async function borrowSignIn(
   return { kind: "state", signIn: record(used), state: kept.state };
 }
 
+type Cookie = { name: string; domain: string; path: string; value: string };
+type State = { cookies?: Cookie[] };
+
+const cookieKey = (cookie: Cookie) =>
+  `${cookie.name}\n${cookie.domain}\n${cookie.path}`;
+
+/**
+ * A site renews its session cookies while the session is used, and the copy kept here goes
+ * stale: lent again, it can be refused, or end the session it was copied from. So after a
+ * bot's turn its browser's cookies go back into every kept sign-in — only the ones a sign-in
+ * already holds (same name, domain and path), so a browser that signed out, or never signed
+ * in, changes nothing. `session` is the participant's (workspace botBrowserSession); one
+ * attached to the user's own Chrome is theirs and is not read.
+ */
+export async function renewSignIns(session: string): Promise<void> {
+  const names = await readdir(VAULT).catch(() => [] as string[]);
+  if (!names.some((name) => name.endsWith(".json"))) return;
+
+  const sandbox = await openWorkspace();
+  const env = jobShellEnv(session);
+  const listed = await sandbox.exec("playwright-cli list --json", {
+    env,
+    timeoutMs: 15_000,
+  });
+  const { browsers } = JSON.parse(listed.stdout || "{}") as {
+    browsers?: { name: string; attached?: boolean }[];
+  };
+  const open = browsers?.find((b) => b.name === env.PLAYWRIGHT_CLI_SESSION);
+  if (!open || open.attached) return;
+
+  const path = `.playwright-cli/state-${crypto.randomUUID()}.json`;
+  let now: Map<string, Cookie>;
+  try {
+    const saved = await sandbox.exec(
+      `mkdir -p .playwright-cli && playwright-cli state-save ${path}`,
+      { env, timeoutMs: 30_000 },
+    );
+    if (saved.exitCode !== 0) return;
+    const state = JSON.parse(await sandbox.readFile(path, "utf-8")) as State;
+    now = new Map((state.cookies ?? []).map((c) => [cookieKey(c), c]));
+  } finally {
+    await sandbox.exec(`rm -f ${path}`);
+  }
+
+  for (const name of names) {
+    if (!name.endsWith(".json")) continue;
+    const kept = await read(decodeURIComponent(name.slice(0, -5)));
+    const state = kept?.state as State | undefined;
+    if (!kept || !state?.cookies) continue;
+    let renewed = false;
+    const cookies = state.cookies.map((cookie) => {
+      const fresh = now.get(cookieKey(cookie));
+      if (!fresh || JSON.stringify(fresh) === JSON.stringify(cookie))
+        return cookie;
+      renewed = true;
+      return fresh;
+    });
+    if (renewed) await write({ ...kept, state: { ...state, cookies } });
+  }
+}
+
 /** The user's say on one bot: let in, or not any more. Only the screen calls this. */
 export async function setSignInBot(site: string, bot: string, on: boolean) {
   const kept = await read(site);

package/features/thursday/components/side-captions.tsx

@@ -123,6 +123,7 @@ export function SideCaptions({
   under = null,
   ahead = false,
   workOf,
+  typed = false,
 }: {
   turns: Turn[];
   pinned: Pinned;
@@ -139,6 +140,8 @@ export function SideCaptions({
   ahead?: boolean;
   /** The work behind one of her turns, drawn under it while it is level; null for none. */
   workOf?: (turn: string) => ReactNode;
+  /** A call in writing: their words were typed whole, so they arrive whole. */
+  typed?: boolean;
 }) {
   const last = turns.at(-1);
   return (
@@ -154,6 +157,7 @@ export function SideCaptions({
           under={role === "assistant" ? under : null}
           ahead={role === "assistant" && ahead}
           workOf={role === "assistant" ? workOf : undefined}
+          whole={typed && role === "user"}
         />
       ))}
     </>
@@ -169,6 +173,7 @@ function SideColumn({
   under,
   ahead,
   workOf,
+  whole,
 }: {
   role: Role;
   /** This side's turns only. */
@@ -180,28 +185,38 @@ function SideColumn({
   under: ReactNode;
   ahead: boolean;
   workOf: ((turn: string) => ReactNode) | undefined;
+  /** The latest turn is drawn at once rather than letter by letter. */
+  whole: boolean;
 }) {
   const mine = role === "user";
   // Heights as laid out, before any transform: text grows while it is said, and
   // receding clamps a turn to four lines
   const [heights, setHeights] = useState<Record<string, number>>({});
+  // Widths too: what stands under her level words is as wide as they are
+  const [widths, setWidths] = useState<Record<string, number>>({});
   const watch = useRef<ResizeObserver | null>(null);
   useEffect(() => () => watch.current?.disconnect(), []);
   const measure = useCallback((node: HTMLDivElement | null) => {
     if (!node) return;
-    watch.current ??= new ResizeObserver((entries) =>
-      setHeights((was) => {
+    const sizes =
+      (read: (box: HTMLElement) => number) =>
+      (was: Record<string, number>, entries: ResizeObserverEntry[]) => {
         let next = was;
         for (const entry of entries) {
           const box = entry.target as HTMLElement;
           const id = box.dataset.turn;
-          if (!id || was[id] === box.offsetHeight) continue;
+          if (!id || was[id] === read(box)) continue;
           if (next === was) next = { ...was };
-          next[id] = box.offsetHeight;
+          next[id] = read(box);
         }
         return next;
-      }),
-    );
+      };
+    const tall = sizes((box) => box.offsetHeight);
+    const wide = sizes((box) => box.offsetWidth);
+    watch.current ??= new ResizeObserver((entries) => {
+      setHeights((was) => tall(was, entries));
+      setWidths((was) => wide(was, entries));
+    });
     watch.current.observe(node);
     return () => watch.current?.unobserve(node);
   }, []);
@@ -273,6 +288,9 @@ function SideColumn({
             }
             className={cn(
               "group/turn absolute top-0 w-max max-w-full text-[17px] leading-[1.675] tracking-[0.3px] text-foreground transition-transform duration-[520ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none",
+              whole &&
+                k === turns.length - 1 &&
+                "animate-in fade-in duration-200 motion-reduce:animate-none",
               mine ? "left-0 origin-top-left" : "right-0 origin-top-right",
               !shown && "invisible",
               pickable && "pointer-events-auto cursor-pointer",
@@ -299,7 +317,7 @@ function SideColumn({
                 />
               )}
               {/* Each side's latest turn keeps its letters wherever it sits, so going back and returning never draws it again */}
-              {k === turns.length - 1 ? (
+              {k === turns.length - 1 && !whole ? (
                 <Letters text={turn.text} />
               ) : (
                 turn.text
@@ -312,7 +330,12 @@ function SideColumn({
         <div
           ref={measure}
           data-turn={UNDER}
-          style={{ transform: `translateY(${(underTop ?? 0).toFixed(1)}px)` }}
+          style={{
+            transform: `translateY(${(underTop ?? 0).toFixed(1)}px)`,
+            // under her words it takes their width, so its lines start where they do;
+            // before she has said any, the side's
+            width: at < turns.length ? widths[turns[at].id] : undefined,
+          }}
           className={cn(
             "absolute top-0 flex w-full transition-transform duration-[520ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none",
             mine ? "left-0 justify-start" : "right-0 justify-end",

package/features/thursday/components/tab-state.tsx

@@ -50,7 +50,8 @@ function tabIconSvg(alert: SectionAlert): string {
  * The tab, for when the app is not the window in front. The title leads with
  * what is owed — the Threads badge's count — and a live call keeps its waveform at
  * the end, so neither takes the other's place. The icon wears the settings
- * corner's dot: amber waits on the user, red is broken, and a section with
+ * corner's dot when something is owed: amber waits on the user, red is broken
+ * (a blue suggestion stays in the corner), and a section with
  * nothing to count still gets the dot.
  *
  * Draws nothing. A component rather than a hook in the call screen, so a report
@@ -66,7 +67,9 @@ export function TabState({
 }) {
   const { owed } = useThreadReport();
   const alerts = useSectionAlerts();
-  const alert = worstAlert(Object.values(alerts).map((each) => each ?? null));
+  const worst = worstAlert(Object.values(alerts).map((each) => each ?? null));
+  // A suggestion is for the settings corner, not the tab: from another window nothing is owed
+  const alert = worst === "brand" ? null : worst;
 
   useEffect(() => {
     const name = ringing ? `${APP_NAME} is calling` : APP_NAME;