@saadnvd1/agent-os 0.3.532 → 0.3.534

package/components/Recipes/RecipeForm.tsx

@@ -0,0 +1,251 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+import { useProjectsQuery } from "@/data/projects";
+import { useWorkspacesQuery } from "@/data/workspaces";
+import {
+  useCreateRecipe,
+  useUpdateRecipe,
+  type RecipeFormInput,
+} from "@/data/recipes";
+import type { RecipeDraft } from "@/lib/recipes/draft";
+import {
+  MAX_BRIEF,
+  MAX_NAME,
+  type RecipeKind,
+  type RecipeView,
+} from "@/lib/recipes/types";
+import {
+  TimerFields,
+  timerCron,
+  timerProblem,
+  timerValue,
+  type TimerValue,
+} from "./TimerFields";
+
+const KINDS: { value: RecipeKind; label: string; hint: string }[] = [
+  {
+    value: "task",
+    label: "Task",
+    hint: "Ends in a PR and goes through the gates",
+  },
+  { value: "session", label: "Session", hint: "Changes no code and has no PR" },
+];
+
+// A new recipe, an edit, or "Save as recipe" from a finished session
+// (`draft`): the brief can be swapped for a cleaned-up one first.
+export function RecipeForm({
+  workspaceId,
+  existing,
+  draft,
+  sourceSessionId,
+  onDone,
+  onCancel,
+}: {
+  workspaceId: string | null;
+  existing?: RecipeView;
+  draft?: RecipeDraft | null;
+  sourceSessionId?: string | null;
+  onDone: (id: string) => void;
+  onCancel: () => void;
+}) {
+  const { data: workspaces = [] } = useWorkspacesQuery();
+  const { data: projects = [] } = useProjectsQuery();
+  const create = useCreateRecipe();
+  const update = useUpdateRecipe();
+  const mutation = existing ? update : create;
+
+  const [name, setName] = useState(existing?.name ?? draft?.name ?? "");
+  const [kind, setKind] = useState<RecipeKind>(
+    existing?.kind ?? draft?.kind ?? "task"
+  );
+  const [brief, setBrief] = useState(existing?.brief ?? draft?.prompt ?? "");
+  const [suggested, setSuggested] = useState(draft?.draft ?? null);
+  const [projectId, setProjectId] = useState(
+    existing?.project_id ?? draft?.projectId ?? ""
+  );
+  const [timer, setTimer] = useState<TimerValue>(() =>
+    timerValue(existing?.timer ?? null)
+  );
+
+  const workspace =
+    existing?.workspace_id ??
+    draft?.workspaceId ??
+    workspaceId ??
+    workspaces[0]?.id ??
+    "";
+  const eligible = projects.filter(
+    (p) =>
+      !p.is_uncategorized &&
+      p.workspace_id === workspace &&
+      (!p.host_id || p.host_id === "local")
+  );
+  const project =
+    eligible.find((p) => p.id === projectId)?.id ?? eligible[0]?.id ?? "";
+  const problem = timerProblem(timer);
+  const ready = !!name.trim() && !!brief.trim() && !!project && !problem;
+
+  const save = () => {
+    const cron = timerCron(timer);
+    const timerInput: RecipeFormInput["timer"] = cron
+      ? { cron, timezone: timer.timezone }
+      : null;
+    if (existing)
+      update.mutate(
+        {
+          id: existing.id,
+          name: name.trim(),
+          kind,
+          brief: brief.trim(),
+          projectId: project,
+          timer: timerInput,
+        },
+        { onSuccess: () => onDone(existing.id) }
+      );
+    else
+      create.mutate(
+        {
+          workspaceId: workspace,
+          projectId: project,
+          name: name.trim(),
+          kind,
+          brief: brief.trim(),
+          sourceSessionId: sourceSessionId ?? null,
+          timer: timerInput,
+        },
+        { onSuccess: ({ recipe }) => onDone(recipe.id) }
+      );
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <label className="text-sm font-medium" htmlFor="recipe-name">
+          Name
+        </label>
+        <Input
+          id="recipe-name"
+          value={name}
+          maxLength={MAX_NAME}
+          placeholder="TestFlight build"
+          onChange={(e) => setName(e.target.value)}
+        />
+      </div>
+      <div className="space-y-2">
+        <label className="text-sm font-medium" htmlFor="recipe-project">
+          Project
+        </label>
+        <select
+          id="recipe-project"
+          className="border-input bg-background min-h-11 w-full rounded-md border px-2 text-sm md:min-h-9"
+          value={project}
+          onChange={(e) => setProjectId(e.target.value)}
+        >
+          {eligible.map((p) => (
+            <option key={p.id} value={p.id}>
+              {p.name}
+            </option>
+          ))}
+        </select>
+      </div>
+      <div className="space-y-2">
+        <p className="text-sm font-medium">Each run is a</p>
+        <div
+          role="radiogroup"
+          aria-label="Kind"
+          className="bg-foreground/[0.04] grid grid-cols-2 gap-1 rounded-lg p-1"
+        >
+          {KINDS.map((k) => (
+            <button
+              key={k.value}
+              type="button"
+              role="radio"
+              aria-checked={kind === k.value}
+              onClick={() => setKind(k.value)}
+              className={cn(
+                "min-h-11 rounded-md px-2 text-sm font-medium md:min-h-8",
+                kind === k.value
+                  ? "bg-background shadow-sm"
+                  : "text-muted-foreground"
+              )}
+            >
+              {k.label}
+            </button>
+          ))}
+        </div>
+        <p className="text-muted-foreground text-xs">
+          {KINDS.find((k) => k.value === kind)?.hint}
+        </p>
+      </div>
+      <div className="space-y-2">
+        <label className="text-sm font-medium" htmlFor="recipe-brief">
+          Brief
+        </label>
+        {suggested && (
+          <div className="border-primary/30 bg-primary/5 space-y-2 rounded-lg border p-3">
+            <p className="text-xs font-medium">Suggested brief</p>
+            <p className="text-sm whitespace-pre-wrap">{suggested.brief}</p>
+            <div className="flex gap-2">
+              <Button
+                size="sm"
+                className="h-11 md:h-8"
+                onClick={() => {
+                  setBrief(suggested.brief);
+                  setSuggested(null);
+                }}
+              >
+                Use this
+              </Button>
+              <Button
+                size="sm"
+                variant="ghost"
+                className="h-11 md:h-8"
+                onClick={() => setSuggested(null)}
+              >
+                Keep original
+              </Button>
+            </div>
+          </div>
+        )}
+        <Textarea
+          id="recipe-brief"
+          rows={8}
+          maxLength={MAX_BRIEF}
+          value={brief}
+          onChange={(e) => setBrief(e.target.value)}
+        />
+        <p className="text-muted-foreground text-xs">
+          Keep it short: what to run and how to judge it. The steps belong in a
+          script in the repo.
+        </p>
+      </div>
+      <div className="space-y-2">
+        <p className="text-sm font-medium">Timer</p>
+        <TimerFields value={timer} onChange={setTimer} />
+      </div>
+      {mutation.error && (
+        <p className="text-destructive text-sm">{mutation.error.message}</p>
+      )}
+      <div className="flex gap-2">
+        <Button
+          className="h-11 md:h-9"
+          disabled={!ready || mutation.isPending}
+          onClick={save}
+        >
+          {mutation.isPending
+            ? "Saving..."
+            : existing
+              ? "Save"
+              : "Create recipe"}
+        </Button>
+        <Button variant="ghost" className="h-11 md:h-9" onClick={onCancel}>
+          Cancel
+        </Button>
+      </div>
+    </div>
+  );
+}

package/components/Recipes/RecipePage.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { useState } from "react";
+import { Pencil, Play, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  useArchiveRecipe,
+  useClearCarry,
+  useRecipeQuery,
+} from "@/data/recipes";
+import { formatRunTime } from "@/lib/schedules/cron";
+import { RunChip } from "./RunChip";
+import { RunHistory, Totals } from "./RunHistory";
+import { RunSheet } from "./RunSheet";
+
+export function RecipePage({
+  id,
+  openRun,
+  onEdit,
+  onGone,
+}: {
+  id: string;
+  openRun: boolean;
+  onEdit: () => void;
+  onGone: () => void;
+}) {
+  const { data, isPending, error } = useRecipeQuery(id);
+  const archive = useArchiveRecipe();
+  const clearCarry = useClearCarry();
+  const [running, setRunning] = useState(openRun);
+  const [confirm, setConfirm] = useState(false);
+  if (isPending)
+    return <div className="bg-muted/40 h-32 animate-pulse rounded-xl" />;
+  if (error || !data)
+    return (
+      <p className="text-destructive text-sm">
+        {error?.message ?? "Not found"}
+      </p>
+    );
+  const r = data.recipe;
+  return (
+    <div className="space-y-4">
+      <div className="space-y-1">
+        <div className="flex items-center gap-2">
+          <h3 className="min-w-0 flex-1 truncate font-semibold">{r.name}</h3>
+          {r.liveRun && <RunChip status={r.liveRun.status} />}
+        </div>
+        <p className="text-muted-foreground text-sm">
+          {r.kind === "task" ? "Task" : "Session"} ·{" "}
+          {r.projectName ?? "project gone"}
+          {r.timer ? ` · ${r.timer.description}` : " · no timer"}
+        </p>
+        {r.timer && (
+          <p className="text-muted-foreground text-xs">
+            {r.timer.enabled && r.timer.nextRunAt
+              ? `Next ${formatRunTime(r.timer.nextRunAt, r.timer.timezone)}`
+              : "Timer off"}{" "}
+            · {r.timer.timezone}
+          </p>
+        )}
+        <Totals totals={r.totals} />
+      </div>
+      <p className="bg-foreground/[0.03] rounded-lg px-3 py-2 text-sm whitespace-pre-wrap">
+        {r.brief}
+      </p>
+      {running ? (
+        <RunSheet recipe={r} onClose={() => setRunning(false)} />
+      ) : (
+        <div className="flex flex-wrap gap-2">
+          <Button
+            size="sm"
+            className="h-11 md:h-8"
+            disabled={!!r.liveRun}
+            onClick={() => setRunning(true)}
+          >
+            <Play className="h-3.5 w-3.5" />
+            {r.liveRun ? "Running" : "Run"}
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            className="h-11 md:h-8"
+            onClick={onEdit}
+          >
+            <Pencil className="h-3.5 w-3.5" />
+            Edit
+          </Button>
+          {confirm ? (
+            <Button
+              size="sm"
+              variant="destructive"
+              className="h-11 md:h-8"
+              disabled={archive.isPending}
+              onClick={() => archive.mutate(r.id, { onSuccess: onGone })}
+            >
+              Remove (keeps history)
+            </Button>
+          ) : (
+            <Button
+              size="sm"
+              variant="ghost"
+              className="text-muted-foreground h-11 md:h-8"
+              onClick={() => setConfirm(true)}
+            >
+              <Trash2 className="h-3.5 w-3.5" />
+              Remove
+            </Button>
+          )}
+        </div>
+      )}
+      {r.lastRun?.summary && !r.carry_cleared_at && (
+        <p className="text-muted-foreground text-xs">
+          The next run is told what the last one reported.{" "}
+          <button
+            type="button"
+            className="text-primary font-medium underline-offset-2 hover:underline"
+            disabled={clearCarry.isPending}
+            onClick={() => clearCarry.mutate(r.id)}
+          >
+            Start the next run fresh
+          </button>
+        </p>
+      )}
+      <RunHistory runs={data.runs} />
+    </div>
+  );
+}

package/components/Recipes/RecipesPanel.tsx

@@ -0,0 +1,225 @@
+"use client";
+
+import { useState } from "react";
+import { useSnapshot } from "valtio";
+import { ArrowLeft, ChefHat, Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  useRecipeDraft,
+  useRecipeQuery,
+  useRecipesQuery,
+} from "@/data/recipes";
+import { useWorkspacesQuery } from "@/data/workspaces";
+import { formatRunTime } from "@/lib/schedules/cron";
+import type { RecipeView } from "@/lib/recipes/types";
+import { recipesUi, recipesUiActions } from "@/stores/recipesUi";
+import { RecipeForm } from "./RecipeForm";
+import { RecipePage } from "./RecipePage";
+import { RunChip } from "./RunChip";
+import { money, sqlMs } from "./format";
+import { useEffect } from "react";
+
+type View =
+  | { mode: "list" }
+  | { mode: "detail"; id: string }
+  | { mode: "form"; id?: string };
+
+function Row({ r, onOpen }: { r: RecipeView; onOpen: () => void }) {
+  const last = r.liveRun ?? r.lastRun;
+  return (
+    <button
+      type="button"
+      onClick={onOpen}
+      className="border-border/60 hover:bg-foreground/[0.03] focus-visible:ring-ring flex min-h-14 w-full items-center gap-3 rounded-xl border px-3 py-2.5 text-left outline-none focus-visible:ring-2"
+    >
+      <div className="min-w-0 flex-1 space-y-0.5">
+        <div className="flex min-w-0 items-center gap-2">
+          <span className="truncate text-sm font-medium">{r.name}</span>
+          <span className="text-muted-foreground shrink-0 text-[11px]">
+            {r.projectName}
+          </span>
+        </div>
+        <p className="text-muted-foreground truncate text-xs">
+          {r.timer
+            ? `${r.timer.description}${r.timer.enabled && r.timer.nextRunAt ? ` · next ${formatRunTime(r.timer.nextRunAt, r.timer.timezone)}` : ""}`
+            : "No timer"}
+          {last && ` · ${formatRunTime(sqlMs(last.created_at))}`}
+          {r.totals.costUsd > 0 && ` · ${money(r.totals.costUsd)} total`}
+        </p>
+      </div>
+      {last && <RunChip status={last.status} />}
+    </button>
+  );
+}
+
+// Loads the finished session's draft, then shows the form filled in.
+function FromSession({
+  sessionId,
+  onCancel,
+  onDone,
+}: {
+  sessionId: string;
+  onCancel: () => void;
+  onDone: (id: string) => void;
+}) {
+  const draft = useRecipeDraft();
+  const { mutate } = draft;
+  useEffect(() => mutate(sessionId), [mutate, sessionId]);
+  if (draft.error)
+    return <p className="text-destructive text-sm">{draft.error.message}</p>;
+  if (!draft.data)
+    return <div className="bg-muted/40 h-32 animate-pulse rounded-xl" />;
+  return (
+    <RecipeForm
+      workspaceId={recipesUi.workspaceId}
+      draft={draft.data}
+      sourceSessionId={sessionId}
+      onDone={onDone}
+      onCancel={onCancel}
+    />
+  );
+}
+
+function Edit({
+  id,
+  onDone,
+  onCancel,
+}: {
+  id: string;
+  onDone: (id: string) => void;
+  onCancel: () => void;
+}) {
+  const { data } = useRecipeQuery(id);
+  return data ? (
+    <RecipeForm
+      workspaceId={null}
+      existing={data.recipe}
+      onDone={onDone}
+      onCancel={onCancel}
+    />
+  ) : null;
+}
+
+// Settings > Recipes: saved jobs, one workspace's or every workspace's.
+export function RecipesPanel() {
+  const snap = useSnapshot(recipesUi);
+  const [chosen, setView] = useState<View>({ mode: "list" });
+  const view: View =
+    chosen.mode !== "list"
+      ? chosen
+      : snap.fromSessionId
+        ? { mode: "form" }
+        : snap.recipeId
+          ? { mode: "detail", id: snap.recipeId }
+          : chosen;
+  const { data: recipes = [], isPending } = useRecipesQuery(
+    snap.workspaceId,
+    true
+  );
+  const { data: workspaces = [] } = useWorkspacesQuery();
+  const wsName = workspaces.find((w) => w.id === snap.workspaceId)?.name;
+
+  const toList = () => {
+    recipesUiActions.clear();
+    setView({ mode: "list" });
+  };
+  const toDetail = (id: string) => {
+    recipesUiActions.clear();
+    setView({ mode: "detail", id });
+  };
+
+  return (
+    <div className="space-y-4 [&>*]:min-w-0">
+      <div className="flex items-center gap-2">
+        {view.mode !== "list" && (
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            aria-label="Back"
+            className="-ml-2 h-11 w-11 md:h-8 md:w-8"
+            onClick={() =>
+              view.mode === "form" && view.id ? toDetail(view.id) : toList()
+            }
+          >
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+        )}
+        <h3 className="min-w-0 flex-1 truncate text-sm font-medium">
+          {view.mode === "form"
+            ? view.id
+              ? "Edit recipe"
+              : snap.fromSessionId
+                ? "Save as recipe"
+                : "New recipe"
+            : wsName
+              ? `In ${wsName}`
+              : "In every workspace"}
+        </h3>
+        {view.mode === "list" && (
+          <Button
+            size="sm"
+            className="h-11 md:h-8"
+            onClick={() => setView({ mode: "form" })}
+          >
+            <Plus className="h-4 w-4" />
+            New
+          </Button>
+        )}
+      </div>
+      {view.mode === "list" && (
+        <div className="space-y-2">
+          {isPending &&
+            [0, 1].map((i) => (
+              <div
+                key={i}
+                className="bg-muted/40 h-14 animate-pulse rounded-xl"
+              />
+            ))}
+          {!isPending && recipes.length === 0 && (
+            <div className="flex flex-col items-center gap-2 py-8 text-center">
+              <ChefHat className="text-primary h-6 w-6" />
+              <p className="text-muted-foreground max-w-xs text-sm">
+                No recipes yet. A recipe saves a job that comes up again, like a
+                build or an audit. Each run is a fresh task or session that
+                knows what the last one reported.
+              </p>
+            </div>
+          )}
+          {recipes.map((r) => (
+            <Row key={r.id} r={r} onOpen={() => toDetail(r.id)} />
+          ))}
+        </div>
+      )}
+      {view.mode === "detail" && (
+        <RecipePage
+          key={view.id}
+          id={view.id}
+          openRun={snap.runRecipeId === view.id}
+          onEdit={() => setView({ mode: "form", id: view.id })}
+          onGone={toList}
+        />
+      )}
+      {view.mode === "form" && view.id && (
+        <Edit
+          id={view.id}
+          onDone={toDetail}
+          onCancel={() => toDetail(view.id!)}
+        />
+      )}
+      {view.mode === "form" && !view.id && snap.fromSessionId && (
+        <FromSession
+          sessionId={snap.fromSessionId}
+          onDone={toDetail}
+          onCancel={toList}
+        />
+      )}
+      {view.mode === "form" && !view.id && !snap.fromSessionId && (
+        <RecipeForm
+          workspaceId={snap.workspaceId}
+          onDone={toDetail}
+          onCancel={toList}
+        />
+      )}
+    </div>
+  );
+}

package/components/Recipes/RunChip.tsx

@@ -0,0 +1,16 @@
+import type { RunStatus } from "@/lib/recipes/types";
+import { cn } from "@/lib/utils";
+import { STATUS_LABEL, STATUS_TONE } from "./format";
+
+export function RunChip({ status }: { status: RunStatus }) {
+  return (
+    <span
+      className={cn(
+        "inline-flex shrink-0 items-center rounded-full px-2 py-0.5 text-[11px] font-medium",
+        STATUS_TONE[status]
+      )}
+    >
+      {STATUS_LABEL[status]}
+    </span>
+  );
+}