thursday-agent 0.2.0 → 0.3.0

package/features/config/components/config-setting.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { formatDistanceToNowStrict } from "date-fns";
 import {
   AudioLines,
   Captions,
@@ -7,7 +8,9 @@ import {
   ChevronRight,
   Clapperboard,
   Image as ImageIcon,
+  KeyRound,
   type LucideIcon,
+  Search,
   TriangleAlert,
 } from "lucide-react";
 import { useState } from "react";
@@ -15,12 +18,17 @@ import { queryKey } from "@/app/api/query-key";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { notify } from "@/components/ui/notify";
+import { Skeleton } from "@/components/ui/skeleton";
+import { ChatGptSignIn } from "@/features/ai/components/chatgpt-sign-in";
 import { ModelPicker } from "@/features/ai/components/model-picker";
 import { ProviderIcon } from "@/features/ai/components/provider-icon";
 import {
+  type AiProvider,
+  type GatewayCredits,
   type MediaKind,
   parseMediaModel,
   parseTextModel,
+  type SubscriptionUsage,
   type TextModelProviderId,
 } from "@/features/ai/model.schema";
 import { BotsMark } from "@/features/bot/components/bot-mark";
@@ -34,6 +42,7 @@ import {
   type ConfigEntry,
   type ConfigGroup,
   type ConfigStatus,
+  EXA_API_KEY,
   groupSatisfied,
   isConfigSet,
 } from "@/features/config/config.const";
@@ -43,6 +52,7 @@ import {
   SettingError,
   SettingGroup,
   SettingItems,
+  SettingNote,
   SettingRailNote,
   SettingScreen,
   SettingSkeleton,
@@ -56,6 +66,9 @@ export function ConfigSetting() {
   return <ConfigGroups section="keys" />;
 }
 
+/** A key that is not a provider's still wears a mark, or its row is a hole in the column. */
+const KEY_MARKS: Record<string, LucideIcon> = { [EXA_API_KEY]: Search };
+
 /** One mark per studio kind, drawn as the output (transcription is captions, not a mic). */
 const KIND_MARKS: Record<MediaKind, LucideIcon> = {
   image: ImageIcon,
@@ -175,46 +188,164 @@ function KeyRow({
   /** Its group must have a key and has none, so this row is waiting on the user. */
   needed: boolean;
 }) {
+  const credits = useGatewayCredits(entry, set);
+  const usage = useSubscriptionUsage(entry, set);
+  const plan = useSignInPlan(entry, set);
+  const state = usage.data
+    ? usageState(usage.data)
+    : keyState(set, needed, credits.data, entry.signIn);
+
   return (
     <button
       type="button"
-      onClick={() => openConfigDialog(entry, set)}
+      onClick={() =>
+        entry.signIn ? openSignInDialog(entry) : openConfigDialog(entry, set)
+      }
       className="group flex w-full items-center gap-3 p-4 text-left outline-none transition-colors hover:bg-muted/50 focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset"
     >
-      {entry.provider && (
-        <span className="grid size-8 shrink-0 place-items-center rounded-lg bg-muted/60">
-          <ProviderIcon provider={entry.provider} className="size-4" />
-        </span>
-      )}
+      <span className="grid size-8 shrink-0 place-items-center rounded-lg bg-muted/60">
+        <KeyMark entry={entry} />
+      </span>
       <span className="min-w-0 flex-1 space-y-0.5">
         <span className="block truncate text-sm font-medium">
           {entry.label}
         </span>
         <span className="block truncate font-mono text-xs text-muted-foreground">
-          {entry.key}
+          {/* A sign-in's config key is nothing to read; the plan it is on is */}
+          {entry.signIn
+            ? set
+              ? usageLine(usage.data, plan)
+              : "sign in with your account"
+            : entry.key}
         </span>
       </span>
 
-      <span
-        className={cn(
-          "flex shrink-0 items-center gap-1.5 font-mono text-xs",
-          set
-            ? "text-muted-foreground"
-            : needed
-              ? WAITING_INK
-              : "text-muted-foreground/60",
-        )}
-      >
-        {set && <Check className="size-3" />}
-        {!set && needed && <TriangleAlert className="size-3" />}
-        {set ? "Set" : needed ? "Needed" : "Not set"}
-      </span>
+      {credits.isLoading || usage.isLoading ? (
+        // Only this end waits, so the row keeps its shape while the gateway or the plan answers
+        <Skeleton className="h-3 w-20 shrink-0" />
+      ) : (
+        <span
+          className={cn(
+            "flex shrink-0 items-center gap-1.5 font-mono text-xs",
+            state.ink,
+          )}
+        >
+          {state.warn ? (
+            <TriangleAlert className="size-3" />
+          ) : (
+            set && <Check className="size-3" />
+          )}
+          {state.text}
+        </span>
+      )}
 
       <ChevronRight className="size-4 shrink-0 text-muted-foreground/60 transition-colors group-hover:text-foreground" />
     </button>
   );
 }
 
+/** US dollars, as the gateway bills. */
+const USD = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+});
+
+/**
+ * What a key says at the end of its row. A key only knows whether it is set, except the
+ * gateway's, which also says what is left on it: amber waits on a top-up, red is a refusal.
+ */
+function keyState(
+  set: boolean,
+  needed: boolean,
+  credits: GatewayCredits | null | undefined,
+  signIn?: true,
+): { text: string; ink: string; warn: boolean } {
+  if (!set)
+    return needed
+      ? { text: "Needed", ink: WAITING_INK, warn: true }
+      : {
+          text: signIn ? "Signed out" : "Not set",
+          ink: "text-muted-foreground/60",
+          warn: false,
+        };
+  if (!credits)
+    return {
+      text: signIn ? "Signed in" : "Set",
+      ink: "text-muted-foreground",
+      warn: false,
+    };
+  if ("refused" in credits)
+    return { text: "Key refused", ink: "text-destructive", warn: true };
+  return {
+    text: `${USD.format(credits.balance)} left`,
+    ink: credits.low ? WAITING_INK : "text-muted-foreground",
+    warn: credits.low,
+  };
+}
+
+/** What is left on the gateway key (ai/model readGatewayCredits); any other key reads nothing. */
+function useGatewayCredits(entry: ConfigEntry, set: boolean) {
+  return useServerRoute<GatewayCredits | null>(
+    set && entry.provider === "vercel-ai-gateway"
+      ? queryKey.gatewayCredits
+      : null,
+  );
+}
+
+/** The plan a signed-in account is on (llm-model route); a key row reads nothing. */
+function useSignInPlan(entry: ConfigEntry, set: boolean) {
+  const { data } = useServerRoute<AiProvider[]>(
+    set && entry.signIn ? queryKey.llmModel : null,
+  );
+  return data?.find((provider) => provider.id === entry.provider)?.plan ?? null;
+}
+
+/** How much of the subscription's plan is used (ai/chatgpt readChatGptUsage); a key row reads nothing. */
+function useSubscriptionUsage(entry: ConfigEntry, set: boolean) {
+  return useServerRoute<SubscriptionUsage | null>(
+    set && entry.signIn ? queryKey.subscriptionUsage : null,
+  );
+}
+
+/**
+ * What a subscription says at the end of its row: the share of its tightest window used. Amber
+ * once it is nearly or wholly spent, because the jobs on it are about to wait for the reset; red
+ * is a sign-in the plan refused.
+ */
+function usageState(usage: SubscriptionUsage): {
+  text: string;
+  ink: string;
+  warn: boolean;
+} {
+  if ("refused" in usage)
+    return { text: "Sign-in refused", ink: "text-destructive", warn: true };
+  return {
+    text: usage.spent ? "Limit reached" : `${usage.usedPercent}% used`,
+    ink: usage.high ? WAITING_INK : "text-muted-foreground",
+    warn: usage.high,
+  };
+}
+
+/** A signed-in row's second line: the plan as the backend names it now, and when its window frees up. */
+function usageLine(
+  usage: SubscriptionUsage | null | undefined,
+  plan: string | null,
+): string {
+  const live = usage && !("refused" in usage) ? usage : null;
+  const name = `${live?.plan ?? plan ?? "unknown"} plan`;
+  return live?.resetsAt
+    ? `${name} · resets in ${formatDistanceToNowStrict(new Date(live.resetsAt))}`
+    : name;
+}
+
+/** Whose key it is, or what it buys when it belongs to no provider. */
+function KeyMark({ entry }: { entry: ConfigEntry }) {
+  if (entry.provider)
+    return <ProviderIcon provider={entry.provider} className="size-4" />;
+  const Mark = KEY_MARKS[entry.key] ?? KeyRound;
+  return <Mark className="size-4 text-muted-foreground" />;
+}
+
 /**
  * A choice, not a secret. Unset is normal, so the row says what runs
  * automatically. The value sits under the label rather than across the row:
@@ -438,6 +569,91 @@ function ChoiceDialog({
   );
 }
 
+function openSignInDialog(entry: ConfigEntry) {
+  return notify.component({
+    className: "sm:max-w-md",
+    renderer: ({ close }) => <SignInDialog entry={entry} onDone={close} />,
+  });
+}
+
+/**
+ * An account instead of a key. Read live: the sign-in finishes in a window of its own, and the
+ * `config` signal it raises (use-thursday) is what turns this dialog to signed in.
+ */
+function SignInDialog({
+  entry,
+  onDone,
+}: {
+  entry: ConfigEntry;
+  onDone: () => void;
+}) {
+  const { data } = useServerRoute<ConfigStatus[]>(queryKey.config);
+  const signedIn = isConfigSet(data, entry.key);
+  const plan = useSignInPlan(entry, signedIn);
+  const usage = useSubscriptionUsage(entry, signedIn);
+  const state = usage.data ? usageState(usage.data) : null;
+  const [signOut, signingOut] = useServerAction(removeConfigAction, {
+    okMessage: `Signed out of ${entry.label}`,
+    onOk: () => {
+      revalidate(queryKey.config);
+      revalidate(queryKey.llmModel);
+      onDone();
+    },
+  });
+
+  return (
+    <SettingDialogContent
+      title={entry.label}
+      description={
+        signedIn ? (
+          <>
+            Signed in ·{" "}
+            <span className="font-mono">{usageLine(usage.data, plan)}</span>
+            {state && (
+              <>
+                {" · "}
+                <span className={cn("font-mono", state.ink)}>{state.text}</span>
+              </>
+            )}
+          </>
+        ) : (
+          "Sign in with your ChatGPT account instead of a key"
+        )
+      }
+      footer={
+        <>
+          {signedIn && (
+            <Button
+              variant="ghost"
+              loading={signingOut}
+              onClick={() => signOut(entry.key)}
+            >
+              Sign out
+            </Button>
+          )}
+          <Button variant="ghost" onClick={onDone}>
+            {signedIn ? "Close" : "Cancel"}
+          </Button>
+          {!signedIn && <ChatGptSignIn />}
+        </>
+      }
+    >
+      <div className="space-y-2">
+        <SettingNote>
+          {signedIn
+            ? "Bots on this subscription spend your plan's usage, not a key. When it runs out, the job stops and says when it resets."
+            : "The sign-in opens in its own window. Approve it there, and this turns to signed in by itself."}
+        </SettingNote>
+        {usage.data && "refused" in usage.data && (
+          <SettingNote className="wrap-break-word text-destructive">
+            {usage.data.refused}
+          </SettingNote>
+        )}
+      </div>
+    </SettingDialogContent>
+  );
+}
+
 function openConfigDialog(entry: ConfigEntry, set: boolean) {
   return notify.component({
     className: "sm:max-w-md",
@@ -458,8 +674,10 @@ function ConfigDialog({
   onDone: () => void;
 }) {
   const [value, setValue] = useState("");
+  const { data: credits } = useGatewayCredits(entry, set);
+  const state = credits ? keyState(set, false, credits) : null;
 
-  // The model picker reads hasKey too
+  // The model picker reads hasKey too, and the gateway's credits sit under the same url
   const refresh = () => {
     revalidate(queryKey.config);
     revalidate(queryKey.llmModel);
@@ -487,6 +705,12 @@ function ConfigDialog({
         <>
           <span className="font-mono">{entry.key}</span>
           {entry.hint && <> · {entry.hint}</>}
+          {state && (
+            <>
+              {" · "}
+              <span className={cn("font-mono", state.ink)}>{state.text}</span>
+            </>
+          )}
         </>
       }
       footer={
@@ -513,18 +737,25 @@ function ConfigDialog({
         </>
       }
     >
-      <Input
-        value={value}
-        onChange={(event) => setValue(event.target.value)}
-        onKeyDown={(event) => {
-          if (event.key === "Enter" && value.trim().length >= 8)
-            save(entry.key, value);
-        }}
-        placeholder={set ? "New value — replaces the current key" : entry.key}
-        spellCheck={false}
-        type="password"
-        autoFocus
-      />
+      <div className="space-y-2">
+        <Input
+          value={value}
+          onChange={(event) => setValue(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter" && value.trim().length >= 8)
+              save(entry.key, value);
+          }}
+          placeholder={set ? "New value — replaces the current key" : entry.key}
+          spellCheck={false}
+          type="password"
+          autoFocus
+        />
+        {credits && "refused" in credits && (
+          <SettingNote className="wrap-break-word text-destructive">
+            {credits.refused}
+          </SettingNote>
+        )}
+      </div>
     </SettingDialogContent>
   );
 }

package/features/config/components/models-badge.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { queryKey } from "@/app/api/query-key";
+import {
+  CONFIG_GROUPS,
+  type ConfigStatus,
+  isConfigSet,
+} from "@/features/config/config.const";
+import { NavBadge } from "@/features/settings/components/setting-ui";
+import type { SectionAlert } from "@/features/settings/settings.alert";
+import { useServerRoute } from "@/lib/protocol/use-server-route";
+
+/**
+ * Every studio model key, read off the catalogue so a new kind counts without a
+ * second list. `kind` is the test rather than the section: the bots' default model
+ * sits in the same section but resolves when unset (ai/model resolveDefaultModel),
+ * and a key with a fallback is not something waiting on anyone.
+ */
+const MODEL_KEYS = CONFIG_GROUPS.filter(
+  (group) => group.section === "models",
+).flatMap((group) =>
+  group.entries.filter((entry) => entry.kind).map((entry) => entry.key),
+);
+
+/**
+ * Nobody has picked a studio model at all. Not one unpicked — all of them: each
+ * costs money per call, so leaving video or speech off is a choice, and a badge
+ * that only clears when every kind is set is a standing demand to spend. What is
+ * worth saying once is that the whole drawer exists, because until one is picked
+ * a bot that would have drawn just finds out mid-job. Picking any answers it.
+ * A loading read reports nothing rather than flashing a dot on every open.
+ */
+export function useModelsAlert(): SectionAlert {
+  const { data, isLoading } = useServerRoute<ConfigStatus[]>(queryKey.config);
+  if (isLoading || !data) return null;
+  return MODEL_KEYS.every((key) => !isConfigSet(data, key)) ? "amber" : null;
+}
+
+/** A dot, not a count: the number would only ever be "all of them". */
+export function ModelsBadge() {
+  return useModelsAlert() ? <NavBadge tone="amber" /> : null;
+}

package/features/config/config.action.ts

@@ -1,6 +1,7 @@
 "use server";
 
 import { z } from "zod";
+import { startChatGptSignIn } from "@/features/ai/chatgpt";
 import { serverAction } from "@/lib/protocol/server-action";
 import { publicError } from "@/lib/public-error";
 import { acceptsChoice, CONFIG_ENTRIES, CONFIG_KEYS } from "./config.const";
@@ -17,6 +18,9 @@ export const setConfigAction = serverAction(
       .parse({ key, value });
 
     const entry = CONFIG_ENTRIES[parsed.key];
+    if (entry?.signIn) {
+      publicError(`${entry.label} takes a sign-in, not a key.`);
+    }
     if (entry?.choices) {
       if (!acceptsChoice(entry, parsed.value)) {
         publicError("That is not one of the options.");
@@ -31,3 +35,11 @@ export const setConfigAction = serverAction(
 export const removeConfigAction = serverAction(async (key: unknown) => {
   await removeConfig(KeySchema.parse(key));
 });
+
+/**
+ * Starts signing in to ChatGPT and returns the page to open (ai/chatgpt). The answer lands on
+ * the server, which keeps the sign-in and signals the screen (`config`).
+ */
+export const startChatGptSignInAction = serverAction(async () =>
+  startChatGptSignIn(),
+);

package/features/config/config.const.ts

@@ -29,6 +29,8 @@ export type ConfigEntry = {
   text?: true;
   /** Whose key this is; draws the mark in front of the row. */
   provider?: TextModelProviderId;
+  /** Signed in to rather than typed: the row signs in, and the write action takes no value for it. */
+  signIn?: true;
   /** Present means a choice, not a secret: the value may be shown and served. */
   choices?: ConfigChoice[];
   /** A studio kind. The value is `provider/model`, picked with the model picker, so ids outside `choices` are accepted. */
@@ -39,7 +41,13 @@ export type ConfigEntry = {
  * Every group id. A union, not a string, because `isCallable` looks the voice
  * group up by id and a typo there silently makes the app always callable.
  */
-export const CONFIG_GROUP_IDS = ["voice", "text", "bots", "studio"] as const;
+export const CONFIG_GROUP_IDS = [
+  "voice",
+  "text",
+  "search",
+  "bots",
+  "studio",
+] as const;
 export type ConfigGroupId = (typeof CONFIG_GROUP_IDS)[number];
 
 /** The group a call runs on: one of its keys must be set (config.query isCallable). */
@@ -84,6 +92,10 @@ const MEDIA_ENTRY: Record<MediaKind, { label: string; hint: string }> = {
   },
 };
 
+/** "an image model" — how a screen names one that is missing. The article differs by kind. */
+export const mediaModelWords = (kind: MediaKind) =>
+  `${kind === "image" ? "an" : "a"} ${kind} model`;
+
 /** Each of these costs real money per call, so none is offered until it is picked (ai/model resolveMediaRef). */
 
 const mediaEntry = (kind: MediaKind): ConfigEntry => ({
@@ -100,6 +112,13 @@ const mediaEntry = (kind: MediaKind): ConfigEntry => ({
   ),
 });
 
+/**
+ * What a bot searches the web with. Set, every bot searches through Exa in one HTTP call;
+ * unset, only a bot whose own model carries a native search has the tool at all — there is
+ * no borrowed model to search on (ai/tools/search.tool).
+ */
+export const EXA_API_KEY = "EXA_API_KEY";
+
 /** What a bot runs on when it has not picked its own model (bot.schema `provider`/`model`). */
 export const DEFAULT_MODEL_KEY = "DEFAULT_MODEL";
 
@@ -140,10 +159,13 @@ export function acceptsChoice(entry: ConfigEntry, value: string): boolean {
 const isVoiceKey = (provider: { apiKeyName: string }) =>
   voiceKeys.includes(provider.apiKeyName);
 
-const keyEntry = (provider: (typeof TEXT_MODEL_PROVIDER_LIST)[number]) => ({
+const keyEntry = (
+  provider: (typeof TEXT_MODEL_PROVIDER_LIST)[number],
+): ConfigEntry => ({
   key: provider.apiKeyName,
   label: provider.label,
   provider: provider.id,
+  signIn: provider.signIn,
 });
 
 export const CONFIG_GROUPS: ConfigGroup[] = [
@@ -166,6 +188,20 @@ export const CONFIG_GROUPS: ConfigGroup[] = [
       (provider) => !isVoiceKey(provider),
     ).map(keyEntry),
   },
+  {
+    id: "search",
+    title: "search",
+    hint: "how bots look things up — one key, or their own model's",
+    section: "keys",
+    require: "none",
+    entries: [
+      {
+        key: EXA_API_KEY,
+        label: "Exa",
+        hint: "web search in one call — dashboard.exa.ai",
+      },
+    ],
+  },
   {
     id: "bots",
     title: "Bots",

package/features/connectors/mcp.manager.ts

@@ -221,15 +221,23 @@ export class McpManager {
     return attempt;
   }
 
-  /** Run a tool, opening or reviving the session if needed. Every call pushes the idle timer back. */
+  /**
+   * Run a tool, opening or reviving the session if needed. Every call pushes the idle timer back.
+   * `signal` is the only bound: the client waits forever when given none.
+   */
   async callTool(
     name: string,
     tool: string,
     args?: Record<string, unknown>,
+    signal?: AbortSignal,
   ): Promise<CallToolResult> {
     const client = await this.ensureClient(name);
     try {
-      const result = await client.callTool({ name: tool, arguments: args });
+      const result = await client.callTool({
+        name: tool,
+        arguments: args,
+        options: signal ? { signal } : undefined,
+      });
       this.touch(name);
       return result;
     } catch (error) {