thursday-agent 0.2.0 → 0.4.0

package/features/intro/components/intro.tsx

@@ -5,13 +5,17 @@ import { useRouter } from "next/navigation";
 import { type Ref, useEffect, useRef, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { notify } from "@/components/ui/notify";
-import ShinyText from "@/components/ui/shiny-text";
+import { ShinyText } from "@/components/ui/shiny-text";
 import TextType from "@/components/ui/text-type";
 import { APP_NAME } from "@/config";
 import { ModelPicker } from "@/features/ai/components/model-picker";
 import { type TextModelProviderId } from "@/features/ai/model.schema";
 import { DEFAULT_BOT } from "@/features/bot/bot.schema";
-import { BOT_SEEDS, type BotSeed } from "@/features/bot/bot.seed";
+import {
+  BOT_SEEDS,
+  type BotSeed,
+  RECOMMENDED_SEEDS,
+} from "@/features/bot/bot.seed";
 import { BotMark } from "@/features/bot/components/bot-mark";
 import { installSeedBots } from "@/features/bot/seed-bots";
 import {
@@ -60,9 +64,9 @@ export function Intro({
   const [keyed, setKeyed] = useState(ready);
   const [picks, setPicks] = useState<Record<string, Pick>>(() =>
     Object.fromEntries(
-      BOT_SEEDS.map((seed) => [
+      RECOMMENDED_SEEDS.map((seed) => [
         seed.name,
-        { on: Boolean(seed.recommended), provider: null, model: "" },
+        { on: true, provider: null, model: "" },
       ]),
     ),
   );
@@ -108,7 +112,7 @@ export function Intro({
     setGone(true);
     if (!keyed) return;
     installSeedBots(
-      BOT_SEEDS.filter((seed) => picks[seed.name]?.on).map((seed) => ({
+      RECOMMENDED_SEEDS.filter((seed) => picks[seed.name]?.on).map((seed) => ({
         name: seed.name,
         // A half pick is not a model; the action falls back to the default
         provider: picks[seed.name]?.provider ?? null,
@@ -192,7 +196,7 @@ export function Intro({
 
 /** Step one: the three lines the call screen actually draws, no chat bubbles. */
 function FirstLook({ ink }: { ink: Ink }) {
-  const crew = BOT_SEEDS.slice(0, 3);
+  const crew = RECOMMENDED_SEEDS;
 
   return (
     <div className="flex w-full flex-col items-center">
@@ -268,6 +272,9 @@ function KeyStep({
   );
 }
 
+/** The first sentence of the app spells its number; past this the numeral is fine. */
+const COUNT_WORD: Record<number, string> = { 1: "One", 2: "Two", 3: "Three" };
+
 /** This intro's colour for a seed (bot.seed rollSeedColors). */
 type Ink = (seed: BotSeed) => string | undefined;
 
@@ -288,17 +295,18 @@ function BotStep({
   ink: Ink;
   onPatch: (name: string, next: Partial<Pick>) => void;
 }) {
-  const on = BOT_SEEDS.filter((seed) => picks[seed.name]?.on);
+  const on = RECOMMENDED_SEEDS.filter((seed) => picks[seed.name]?.on);
+  const rest = BOT_SEEDS.length - RECOMMENDED_SEEDS.length;
 
   return (
     <div className="flex w-full max-w-2xl flex-col items-center">
       <h1 className="text-center text-[30px] font-medium tracking-tight text-balance break-keep">
-        {BOT_SEEDS.length === 1
+        {RECOMMENDED_SEEDS.length === 1
           ? "One bot comes with her."
-          : `${BOT_SEEDS.length === 2 ? "Two" : BOT_SEEDS.length} bots come with her.`}
+          : `${COUNT_WORD[RECOMMENDED_SEEDS.length] ?? RECOMMENDED_SEEDS.length} bots come with her.`}
       </h1>
       <p className="mt-3 max-w-lg text-center text-[15px] leading-relaxed text-pretty text-muted-foreground break-keep">
-        {BOT_SEEDS.length === 1
+        {RECOMMENDED_SEEDS.length === 1
           ? "It takes the work that would leave the call silent, and reports back."
           : "They take the work that would leave the call silent, and report back."}
       </p>
@@ -325,8 +333,6 @@ function BotStep({
             <ShinyText
               text="handed-over work shows up here"
               speed={2.2}
-              color="var(--muted-foreground)"
-              shineColor="var(--foreground)"
               className="font-mono text-[10.5px] leading-4"
             />
           </>
@@ -337,36 +343,45 @@ function BotStep({
         )}
       </span>
 
-      {/* Two columns, the first seed across both: three seeds are two rows, not
-          three, and the step stops scrolling on a short screen */}
-      <div className="mt-4 grid w-full max-w-3xl grid-cols-2 items-start gap-2">
-        {BOT_SEEDS.map((seed, index) => (
+      {/* One column: the rows are a hint tall now, and two columns made the same
+          three bots read as a grid of choices rather than the crew */}
+      <div className="mt-4 flex w-full max-w-lg flex-col gap-2">
+        {RECOMMENDED_SEEDS.map((seed) => (
           <SeedRow
             key={seed.name}
             seed={seed}
             pick={picks[seed.name]}
             ink={ink(seed)}
-            className={index === 0 ? "col-span-2" : ""}
             onPatch={(next) => onPatch(seed.name, next)}
           />
         ))}
       </div>
+
+      {/* Says the rest exist without asking anything about them: which subject
+          bot someone wants is not answerable before they have used the app */}
+      {rest > 0 && (
+        <p className="mt-3.5 text-[13px] text-muted-foreground">
+          More wait in Settings › Bots.
+        </p>
+      )}
     </div>
   );
 }
 
-/** One seed bot row, on by default. The model is not prefilled; empty means the app default. */
+/**
+ * One seed bot row, on by default, in the same shape the Bots section draws
+ * (bot-setting SeedPackage): face, name, and one line of hint that never wraps.
+ * The model is not prefilled; empty means the app default.
+ */
 function SeedRow({
   seed,
   pick,
   ink,
-  className,
   onPatch,
 }: {
   seed: BotSeed;
   pick?: Pick;
   ink?: string;
-  className?: string;
   onPatch: (next: Partial<Pick>) => void;
 }) {
   const on = Boolean(pick?.on);
@@ -374,21 +389,18 @@ function SeedRow({
   return (
     <div
       className={cn(
-        // min-w-0: a grid track sizes to its content otherwise, and the example
-        // line stops truncating and runs out of the card
-        "min-w-0 rounded-2xl ring-1 transition-colors",
+        "min-w-0 rounded-xl ring-1 transition-colors",
         on ? "ring-foreground" : "ring-border/60",
-        className,
       )}
     >
       <button
         type="button"
         onClick={() => onPatch({ on: !on })}
         aria-pressed={on}
-        className="flex w-full items-center gap-3.5 rounded-2xl px-4 py-3 text-left outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+        className="flex w-full items-center gap-3 rounded-xl px-3.5 py-2.5 text-left outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
       >
         <BotMark
-          size={34}
+          size={28}
           seed={seed.name}
           vary={seed.name}
           color={ink}
@@ -399,40 +411,29 @@ function SeedRow({
           className={cn("shrink-0 transition-opacity", !on && "opacity-35")}
         />
 
-        <span className="min-w-0 flex-1 space-y-0.5">
-          <span className="block text-[15.5px] font-medium">{seed.name}</span>
-          <span className="block text-[13px] leading-normal text-pretty text-muted-foreground break-keep">
-            {seed.description}
+        <span className="min-w-0 flex-1 space-y-px">
+          <span className="block text-[14px] leading-[18px] font-medium">
+            {seed.name}
+          </span>
+          <span className="block truncate text-[12px] leading-[17px] text-muted-foreground">
+            {seed.hint}
           </span>
-          {on ? (
-            <ShinyText
-              text={`“${seed.example}”`}
-              speed={2.2}
-              color="var(--muted-foreground)"
-              shineColor="var(--foreground)"
-              className="truncate font-mono text-[11px] leading-4"
-            />
-          ) : (
-            <span className="block truncate font-mono text-[11px] leading-4 text-muted-foreground/50">
-              off
-            </span>
-          )}
         </span>
 
         <span
           className={cn(
-            "grid size-6 shrink-0 place-items-center rounded-full transition-colors",
+            "grid size-5 shrink-0 place-items-center rounded-full transition-colors",
             on
               ? "bg-foreground text-background"
               : "ring-1 ring-border/60 ring-inset",
           )}
         >
-          {on && <Check className="size-3.5" />}
+          {on && <Check className="size-3" />}
         </span>
       </button>
 
       {on && (
-        <div className="px-4 pb-3.5">
+        <div className="px-3.5 pb-3">
           <ModelPicker
             provider={pick?.provider ?? null}
             model={pick?.model ?? ""}

package/features/memory/components/memory-edit.tsx

@@ -0,0 +1,340 @@
+"use client";
+
+import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport, getToolName, isToolUIPart } from "ai";
+import {
+  ArrowUp,
+  BookOpen,
+  Check,
+  ChevronDown,
+  Loader2,
+  Minus,
+  Pencil,
+  Plus,
+  X,
+} from "lucide-react";
+import { type FormEvent, useEffect, useRef, useState } from "react";
+import { queryKey } from "@/app/api/query-key";
+import { Button } from "@/components/ui/button";
+import { ShinyText } from "@/components/ui/shiny-text";
+import { ModelPicker } from "@/features/ai/components/model-picker";
+import { ProviderIcon } from "@/features/ai/components/provider-icon";
+import type { TextModelProviderId } from "@/features/ai/model.schema";
+import { TOOL_NAMES } from "@/features/ai/tools/tool-name";
+import type { MemoryNote } from "@/features/memory/memory.schema";
+import { cn } from "@/lib/utils";
+
+type KnownFact = { text: string; path: string };
+
+/** How long a finished edit's lines stay up before they clear. */
+const LINGER_MS = 4000;
+
+/** One transport for every edit: the model rides on each request, not on the hook. */
+const transport = new DefaultChatTransport({ api: queryKey.memoryEdit });
+
+/**
+ * Editing memory in a line, floating over the panes above the rail. One send is
+ * one streamed run (memory.edit): the model writes with memory's own tools as it
+ * goes and each call is drawn as it arrives. Nothing about the exchange is kept —
+ * the next send starts clean — and the model is picked here, never saved.
+ */
+export function MemoryEdit({ notes }: { notes: MemoryNote[] }) {
+  const [draft, setDraft] = useState("");
+  const [model, setModel] = useState<{
+    provider: TextModelProviderId | null;
+    model: string;
+  }>({ provider: null, model: "" });
+  const [picking, setPicking] = useState(false);
+  const {
+    messages,
+    sendMessage,
+    setMessages,
+    status,
+    stop,
+    error,
+    clearError,
+  } = useChat({ transport });
+
+  // A run nobody is looking at has nobody to show its lines to
+  const stopRef = useRef(stop);
+  stopRef.current = stop;
+  useEffect(
+    () => () => {
+      void stopRef.current();
+    },
+    [],
+  );
+
+  // Facts seen on screen, kept after they go so a finished change still reads as what it replaced
+  const seen = useRef(new Map<number, KnownFact>());
+  for (const note of notes) {
+    for (const fact of note.facts) {
+      seen.current.set(fact.id, { text: fact.text, path: note.path });
+    }
+  }
+
+  const running = status === "submitted" || status === "streaming";
+  const ready = Boolean(model.provider && model.model.trim());
+  const reply = [...messages]
+    .reverse()
+    .find((message) => message.role === "assistant");
+  const parts = reply?.parts ?? [];
+  const calls = parts.filter(isToolUIPart);
+  const words = parts
+    .flatMap((part) => (part.type === "text" ? [part.text] : []))
+    .join(" ")
+    .trim();
+  const failed =
+    Boolean(error) || calls.some((call) => call.state === "output-error");
+  const written = calls.filter(
+    (call) =>
+      call.state === "output-available" &&
+      getToolName(call) !== TOOL_NAMES.memory_recall,
+  ).length;
+
+  useEffect(() => {
+    if (status !== "ready" || failed || messages.length === 0) return;
+    const clear = setTimeout(() => setMessages([]), LINGER_MS);
+    return () => clearTimeout(clear);
+  }, [status, failed, messages.length, setMessages]);
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    const said = draft.trim();
+    if (!said || !ready || running) return;
+    setDraft("");
+    setPicking(false);
+    clearError();
+    // One send is one run: nothing from the last one rides along
+    setMessages([]);
+    void sendMessage({ text: said }, { body: { model } });
+  };
+
+  const line = running ? (
+    <ShinyText text="Working on memory" className="text-xs" />
+  ) : error ? (
+    <span className="text-xs text-destructive">{error.message}</span>
+  ) : reply ? (
+    <span className="text-xs text-muted-foreground">
+      {words ||
+        (written === 0
+          ? "Nothing to change"
+          : written === 1
+            ? "1 change saved"
+            : `${written} changes saved`)}
+    </span>
+  ) : null;
+
+  return (
+    <div className="pointer-events-none absolute inset-x-0 bottom-18 z-10 flex justify-center px-8">
+      <div className="pointer-events-auto flex w-full max-w-120 flex-col items-center gap-2">
+        {picking && (
+          <div className="w-full rounded-xl bg-popover p-2 shadow-lg ring-1 ring-foreground/10">
+            <ModelPicker
+              provider={model.provider}
+              model={model.model}
+              unset="Provider"
+              onChange={setModel}
+            />
+          </div>
+        )}
+
+        {calls.length > 0 && (
+          <ul className="w-full divide-y divide-border/60 overflow-hidden rounded-xl bg-popover shadow-lg ring-1 ring-foreground/10">
+            {calls.map((call) => (
+              <ChangeRow
+                key={call.toolCallId}
+                name={getToolName(call)}
+                input={call.input}
+                state={call.state}
+                errorText={
+                  call.state === "output-error" ? call.errorText : undefined
+                }
+                known={seen.current}
+              />
+            ))}
+          </ul>
+        )}
+
+        {line && <p className="max-w-full truncate px-1">{line}</p>}
+
+        <form
+          onSubmit={submit}
+          className="flex h-10 w-full items-center gap-1.5 rounded-xl bg-popover pr-1.5 pl-3.5 shadow-lg ring-1 ring-foreground/10"
+        >
+          <input
+            value={draft}
+            onChange={(event) => setDraft(event.target.value)}
+            disabled={running}
+            aria-label="Edit memory"
+            placeholder="Tell memory what changed"
+            className="min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground disabled:opacity-60"
+          />
+          <Button
+            type="button"
+            size="xs"
+            variant="ghost"
+            onClick={() => setPicking(!picking)}
+            className={cn("max-w-44", !ready && "text-muted-foreground")}
+          >
+            {ready && model.provider ? (
+              <>
+                <ProviderIcon provider={model.provider} className="size-3" />
+                <span className="truncate">{model.model}</span>
+              </>
+            ) : (
+              "Model"
+            )}
+            <ChevronDown className="text-muted-foreground" />
+          </Button>
+          <Button
+            type="submit"
+            size="icon-sm"
+            loading={running}
+            disabled={!draft.trim() || !ready || running}
+            aria-label="Send"
+          >
+            {!running && <ArrowUp />}
+          </Button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+type Change = {
+  kind: "Remember" | "Replace" | "Forget" | "Rename" | "Opened";
+  path: string;
+  lines: { before?: string; after?: string }[];
+  carried: boolean;
+};
+
+/** What a call does, read off its arguments — still arriving while it streams — and the facts the screen has shown. */
+function describe(
+  name: string,
+  input: unknown,
+  known: Map<number, KnownFact>,
+): Change {
+  const args = (input ?? {}) as {
+    path?: string;
+    factIds?: (number | null | undefined)[] | null;
+    description?: string | null;
+    aliases?: (string | undefined)[] | null;
+    facts?:
+      | ({
+          text?: string;
+          replaces?: number | null;
+          alwaysLoad?: boolean | null;
+        } | null)[]
+      | null;
+  };
+
+  if (name === TOOL_NAMES.memory_recall) {
+    return { kind: "Opened", path: args.path ?? "", lines: [], carried: false };
+  }
+
+  if (name === TOOL_NAMES.memory_forget) {
+    const ids = (args.factIds ?? []).filter((id) => id != null);
+    const facts = ids.map((id) => known.get(id));
+    return {
+      kind: "Forget",
+      path: facts.find((fact) => fact)?.path ?? "",
+      lines: ids.map((id, index) => ({
+        before: facts[index]?.text ?? `Fact #${id}`,
+      })),
+      carried: false,
+    };
+  }
+
+  const facts = (args.facts ?? []).filter((fact) => fact != null);
+  const lines: Change["lines"] = facts.map((fact) =>
+    fact.replaces != null
+      ? {
+          before: known.get(fact.replaces)?.text ?? `Fact #${fact.replaces}`,
+          after: fact.text,
+        }
+      : { after: fact.text },
+  );
+  if (args.description) lines.push({ after: `“${args.description}”` });
+  const aliases = (args.aliases ?? []).filter(Boolean);
+  if (aliases.length) {
+    lines.push({
+      after: `Called ${aliases.map((alias) => `“${alias}”`).join(", ")}`,
+    });
+  }
+  return {
+    kind: facts.some((fact) => fact.replaces != null)
+      ? "Replace"
+      : facts.length
+        ? "Remember"
+        : "Rename",
+    path: args.path ?? "",
+    lines,
+    carried: facts.some((fact) => fact.alwaysLoad),
+  };
+}
+
+const GLYPHS = {
+  Remember: Plus,
+  Replace: Pencil,
+  Forget: Minus,
+  Rename: Pencil,
+  Opened: BookOpen,
+} as const;
+
+function ChangeRow({
+  name,
+  input,
+  state,
+  errorText,
+  known,
+}: {
+  name: string;
+  input: unknown;
+  state: string;
+  errorText?: string;
+  known: Map<number, KnownFact>;
+}) {
+  const change = describe(name, input, known);
+  const Glyph = GLYPHS[change.kind];
+  const broke = state === "output-error";
+  const done = state === "output-available";
+  return (
+    <li className="flex animate-in items-start gap-2.5 px-3 py-2.5 duration-200 fade-in slide-in-from-bottom-1">
+      <Glyph className="mt-1 size-3.5 shrink-0 text-muted-foreground" />
+      <div className="min-w-0 flex-1 space-y-0.5">
+        {change.lines.map((line, at) => (
+          <div key={`${change.kind}-${at}`}>
+            {line.before && (
+              <p className="text-[13px] leading-5 text-muted-foreground/60 line-through">
+                {line.before}
+              </p>
+            )}
+            {line.after && (
+              <p className="text-sm leading-5 text-foreground/90">
+                {line.after}
+              </p>
+            )}
+          </div>
+        ))}
+        <p className="pt-0.5 font-mono text-[11px] text-muted-foreground">
+          {change.kind}
+          {change.path && ` · ${change.path}`}
+          {change.carried && " · carried into every call"}
+        </p>
+        {broke && errorText && (
+          <p className="text-xs text-destructive">{errorText}</p>
+        )}
+      </div>
+      <span className="mt-0.5 flex size-5 shrink-0 items-center justify-center text-muted-foreground">
+        {broke ? (
+          <X className="size-3.5 text-destructive" />
+        ) : done ? (
+          <Check className="size-3.5" />
+        ) : (
+          <Loader2 className="size-3.5 animate-spin" />
+        )}
+      </span>
+    </li>
+  );
+}