@saadnvd1/agent-os 0.3.533 → 0.3.535

package/components/Recipes/RunHistory.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { ArrowUpRight } from "lucide-react";
+import type { RecipeRun, RecipeTotals } from "@/lib/recipes/types";
+import { formatRunTime } from "@/lib/schedules/cron";
+import { settingsUiActions } from "@/stores/settingsUi";
+import { sessionOpenActions } from "@/stores/sessionOpen";
+import { RunChip } from "./RunChip";
+import { duration, money, sqlMs, triggerLabel } from "./format";
+
+export function Totals({ totals }: { totals: RecipeTotals }) {
+  if (!totals.runs) return null;
+  const bits = [
+    `${totals.runs} ${totals.runs === 1 ? "run" : "runs"}`,
+    totals.failed ? `${totals.failed} failed` : null,
+    totals.costUsd ? money(totals.costUsd) : null,
+    totals.avgMs ? `avg ${duration(totals.avgMs)}` : null,
+  ].filter(Boolean);
+  return <p className="text-muted-foreground text-xs">{bits.join(" · ")}</p>;
+}
+
+function Facts({ run }: { run: RecipeRun }) {
+  const outputs = run.outputs
+    ? Object.entries(run.outputs)
+        .map(([k, v]) => `${k} ${v}`)
+        .join(" · ")
+    : "";
+  const text = [outputs, run.summary ?? run.error].filter(Boolean).join(". ");
+  return text ? (
+    <p className="text-muted-foreground line-clamp-2 text-xs">{text}</p>
+  ) : null;
+}
+
+export function RunHistory({ runs }: { runs: RecipeRun[] }) {
+  return (
+    <div className="space-y-2">
+      <p className="label-mono text-muted-foreground">History</p>
+      {runs.length === 0 && (
+        <p className="text-muted-foreground text-sm">No runs yet.</p>
+      )}
+      <ul className="divide-border/60 divide-y">
+        {runs.map((r) => {
+          const stats = [duration(r.duration_ms), money(r.cost_usd)]
+            .filter(Boolean)
+            .join(" · ");
+          return (
+            <li key={r.id} className="flex items-start gap-3 py-2.5">
+              <RunChip status={r.status} />
+              <div className="min-w-0 flex-1 space-y-0.5">
+                <p className="text-sm tabular-nums">
+                  #{r.seq} · {formatRunTime(sqlMs(r.created_at))}
+                </p>
+                <p className="text-muted-foreground truncate text-xs">
+                  {[
+                    triggerLabel(r),
+                    r.pr_number ? `PR #${r.pr_number}` : null,
+                    stats,
+                  ]
+                    .filter(Boolean)
+                    .join(" · ")}
+                </p>
+                <Facts run={r} />
+                {r.note && (
+                  <p className="text-muted-foreground truncate text-xs italic">
+                    Note: {r.note}
+                  </p>
+                )}
+              </div>
+              {r.session_id && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    sessionOpenActions.request(r.session_id!);
+                    settingsUiActions.close();
+                  }}
+                  className="text-primary -mr-2 flex min-h-11 shrink-0 items-center gap-1 px-2 text-xs font-medium"
+                >
+                  Open
+                  <ArrowUpRight className="h-3.5 w-3.5" />
+                </button>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}

package/components/Recipes/RunSheet.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { Play } from "lucide-react";
+import { uuid } from "@/lib/uuid";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { useRunRecipe, usePreviewQuery } from "@/data/recipes";
+import { MAX_NOTE, type RecipeView } from "@/lib/recipes/types";
+
+// Run now: an optional one-off note, and what will be sent. The request id
+// is made once per sheet, so a double tap starts one run.
+export function RunSheet({
+  recipe,
+  onClose,
+}: {
+  recipe: RecipeView;
+  onClose: () => void;
+}) {
+  const [note, setNote] = useState("");
+  const [showPrompt, setShowPrompt] = useState(false);
+  const requestId = useRef(uuid());
+  const run = useRunRecipe();
+  const preview = usePreviewQuery(recipe.id, note.trim(), showPrompt);
+  const go = () =>
+    run.mutate(
+      {
+        id: recipe.id,
+        note: note.trim() || undefined,
+        requestId: requestId.current,
+      },
+      { onSuccess: onClose }
+    );
+  return (
+    <div className="border-border/60 bg-foreground/[0.03] space-y-3 rounded-xl border p-3">
+      <label className="text-sm font-medium" htmlFor="run-note">
+        Note for this run (optional)
+      </label>
+      <Textarea
+        id="run-note"
+        value={note}
+        maxLength={MAX_NOTE}
+        rows={2}
+        placeholder="Includes #87"
+        onChange={(e) => setNote(e.target.value)}
+      />
+      <button
+        type="button"
+        aria-expanded={showPrompt}
+        className="text-primary min-h-11 text-xs font-medium md:min-h-8"
+        onClick={() => setShowPrompt((v) => !v)}
+      >
+        {showPrompt ? "Hide what it sends" : "Show what it sends"}
+      </button>
+      {showPrompt && (
+        <pre className="bg-background max-h-64 overflow-auto rounded-lg p-3 text-xs whitespace-pre-wrap">
+          {preview.data?.prompt ?? (preview.error?.message || "Loading...")}
+        </pre>
+      )}
+      {run.error && (
+        <p className="text-destructive text-sm">{run.error.message}</p>
+      )}
+      <div className="flex gap-2">
+        <Button
+          size="sm"
+          className="h-11 md:h-8"
+          disabled={run.isPending || !!recipe.liveRun}
+          onClick={go}
+        >
+          <Play className="h-3.5 w-3.5" />
+          {run.isPending ? "Starting..." : "Run"}
+        </Button>
+        <Button
+          size="sm"
+          variant="ghost"
+          className="h-11 md:h-8"
+          onClick={onClose}
+        >
+          Cancel
+        </Button>
+      </div>
+    </div>
+  );
+}

package/components/Recipes/TimerFields.tsx

@@ -0,0 +1,193 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+import {
+  clock12,
+  cronError,
+  cronPreset,
+  DEFAULT_TIMEZONE,
+  describeCron,
+  formatRunTime,
+  isTimezone,
+  MIN_GAP_MINUTES,
+  minGapMinutes,
+  nextRuns,
+  presetCron,
+  type PresetKind,
+} from "@/lib/schedules/cron";
+import type { RecipeTimer } from "@/lib/recipes/types";
+
+type Mode = "off" | Exclude<PresetKind, "every"> | "custom";
+
+const MODES: { value: Mode; label: string }[] = [
+  { value: "off", label: "No timer" },
+  { value: "hourly", label: "Hourly" },
+  { value: "daily", label: "Daily" },
+  { value: "weekdays", label: "Weekdays" },
+  { value: "weekly", label: "Weekly" },
+  { value: "custom", label: "Custom" },
+];
+const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const select =
+  "border-input bg-background min-h-11 rounded-md border px-2 text-sm md:min-h-9";
+
+export interface TimerValue {
+  mode: Mode;
+  hour: number;
+  minute: number;
+  weekday: number;
+  custom: string;
+  timezone: string;
+}
+
+export function timerValue(timer: RecipeTimer | null): TimerValue {
+  const preset = timer ? cronPreset(timer.cron) : null;
+  const mode: Mode = !timer
+    ? "off"
+    : preset && preset.kind !== "every"
+      ? preset.kind
+      : "custom";
+  return {
+    mode,
+    hour: preset?.hour ?? 9,
+    minute: preset?.minute ?? 0,
+    weekday: preset?.weekday ?? 1,
+    custom: timer?.cron ?? "0 9 * * 1-5",
+    timezone: timer?.timezone ?? DEFAULT_TIMEZONE,
+  };
+}
+
+export function timerCron(v: TimerValue): string | null {
+  if (v.mode === "off") return null;
+  if (v.mode === "custom") return v.custom.trim();
+  return presetCron({
+    kind: v.mode,
+    hour: v.hour,
+    minute: v.minute,
+    weekday: v.weekday,
+  });
+}
+
+// Why the timer can't be saved, or null.
+export function timerProblem(v: TimerValue): string | null {
+  const cron = timerCron(v);
+  if (!cron) return null;
+  if (!isTimezone(v.timezone)) return "Unknown time zone";
+  const bad = cronError(cron);
+  if (bad) return bad;
+  return minGapMinutes(cron, v.timezone) < MIN_GAP_MINUTES
+    ? "A recipe runs at most once an hour"
+    : null;
+}
+
+export function TimerFields({
+  value,
+  onChange,
+}: {
+  value: TimerValue;
+  onChange: (v: TimerValue) => void;
+}) {
+  const set = (patch: Partial<TimerValue>) => onChange({ ...value, ...patch });
+  const cron = timerCron(value);
+  const problem = timerProblem(value);
+  const [openedAt] = useState(() => Date.now());
+  const upcoming = useMemo(
+    () => (cron && !problem ? nextRuns(cron, openedAt, 3, value.timezone) : []),
+    [cron, problem, value.timezone, openedAt]
+  );
+  return (
+    <div className="space-y-3">
+      <div
+        role="radiogroup"
+        aria-label="Timer"
+        className="bg-foreground/[0.04] grid grid-cols-3 gap-1 rounded-lg p-1 md:flex"
+      >
+        {MODES.map((m) => (
+          <button
+            key={m.value}
+            type="button"
+            role="radio"
+            aria-checked={value.mode === m.value}
+            onClick={() => set({ mode: m.value })}
+            className={cn(
+              "min-h-11 min-w-0 flex-1 truncate rounded-md px-1 text-xs font-medium md:min-h-8 md:px-3 md:text-sm",
+              value.mode === m.value
+                ? "bg-background text-foreground shadow-sm"
+                : "text-muted-foreground hover:text-foreground"
+            )}
+          >
+            {m.label}
+          </button>
+        ))}
+      </div>
+      {value.mode === "weekly" && (
+        <select
+          aria-label="Day"
+          className={select}
+          value={value.weekday}
+          onChange={(e) => set({ weekday: Number(e.target.value) })}
+        >
+          {DAYS.map((d, i) => (
+            <option key={d} value={i}>
+              {d}
+            </option>
+          ))}
+        </select>
+      )}
+      {(value.mode === "daily" ||
+        value.mode === "weekdays" ||
+        value.mode === "weekly") && (
+        <span className="ml-0 flex items-center gap-2">
+          <select
+            aria-label="Hour"
+            className={select}
+            value={value.hour}
+            onChange={(e) => set({ hour: Number(e.target.value) })}
+          >
+            {Array.from({ length: 24 }, (_, h) => (
+              <option key={h} value={h}>
+                {clock12(h, 0).replace(":00", "")}
+              </option>
+            ))}
+          </select>
+          :
+          <select
+            aria-label="Minute"
+            className={select}
+            value={value.minute}
+            onChange={(e) => set({ minute: Number(e.target.value) })}
+          >
+            {Array.from({ length: 12 }, (_, i) => i * 5).map((m) => (
+              <option key={m} value={m}>
+                {String(m).padStart(2, "0")}
+              </option>
+            ))}
+          </select>
+        </span>
+      )}
+      {value.mode === "custom" && (
+        <Input
+          aria-label="Cron expression"
+          className="font-mono"
+          value={value.custom}
+          onChange={(e) => set({ custom: e.target.value })}
+        />
+      )}
+      {cron && (
+        <p
+          className={cn(
+            "text-xs",
+            problem ? "text-destructive" : "text-muted-foreground"
+          )}
+        >
+          {problem ??
+            `${describeCron(cron)} · next ${upcoming
+              .map((t) => formatRunTime(t, value.timezone))
+              .join(", ")}`}
+        </p>
+      )}
+    </div>
+  );
+}

package/components/Recipes/format.ts

@@ -0,0 +1,51 @@
+import type { RecipeRun, RunStatus } from "@/lib/recipes/types";
+
+export const STATUS_LABEL: Record<RunStatus, string> = {
+  queued: "Queued",
+  starting: "Starting",
+  running: "Running",
+  succeeded: "Succeeded",
+  failed: "Failed",
+  blocked: "Needs you",
+  timed_out: "Timed out",
+  cancelled: "Cancelled",
+  skipped: "Skipped",
+};
+
+export const STATUS_TONE: Record<RunStatus, string> = {
+  queued: "bg-foreground/10 text-muted-foreground",
+  starting: "bg-primary/15 text-primary",
+  running: "bg-primary/15 text-primary",
+  succeeded: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300",
+  failed: "bg-destructive/15 text-destructive",
+  blocked: "bg-amber-500/15 text-amber-700 dark:text-amber-300",
+  timed_out: "bg-destructive/15 text-destructive",
+  cancelled: "bg-foreground/10 text-muted-foreground",
+  skipped: "bg-amber-500/15 text-amber-700 dark:text-amber-300",
+};
+
+// SQLite's datetime('now') is UTC without a zone marker.
+export const sqlMs = (t: string | null) =>
+  t ? Date.parse(`${t.replace(" ", "T")}Z`) : 0;
+
+export function duration(ms: number | null): string {
+  if (ms == null) return "";
+  const s = Math.round(ms / 1000);
+  if (s < 60) return `${s}s`;
+  const m = Math.round(s / 60);
+  return m < 60 ? `${m}m` : `${Math.floor(m / 60)}h ${m % 60}m`;
+}
+
+export const money = (n: number | null) =>
+  n == null ? "" : `$${n < 10 ? n.toFixed(2) : n.toFixed(0)}`;
+
+const TRIGGER_LABEL = {
+  manual: "by hand",
+  tool: "by the orchestrator",
+  cli: "by an agent",
+  timer: "on its timer",
+  "catch-up": "on its timer, late",
+} as const;
+
+export const triggerLabel = (r: Pick<RecipeRun, "trigger">) =>
+  TRIGGER_LABEL[r.trigger];

package/components/Recipes/index.ts

@@ -0,0 +1 @@
+export { RecipesPanel } from "./RecipesPanel";

package/components/Schedules/ScheduleForm.tsx

@@ -34,6 +34,7 @@ import {
   wall,
   type PresetKind,
 } from "@/lib/schedules/cron";
+import { recipesUiActions } from "@/stores/recipesUi";
 import { parseWhen, relativeTime } from "@/lib/schedules/when";
 
 const KINDS: { value: ScheduleKind; label: string; hint: string }[] = [
@@ -59,6 +60,10 @@ const KINDS: { value: ScheduleKind; label: string; hint: string }[] = [
   },
 ];
 
+// New jobs of these shapes are recipes; the kinds stay only to edit a
+// schedule that still has one (a one-off, say).
+const LEGACY_KINDS: ScheduleKind[] = ["task", "session"];
+
 type Preset = PresetKind | "custom" | "once";
 
 const PRESETS: { value: Preset; label: string }[] = [
@@ -171,7 +176,7 @@ export function ScheduleForm({
   );
   const [name, setName] = useState(existing?.name ?? draft?.name ?? "");
   const [kind, setKind] = useState<ScheduleKind>(
-    existing?.kind ?? draft?.kind ?? "task"
+    existing?.kind ?? draft?.kind ?? "orchestrator"
   );
   const [targetId, setTargetId] = useState(
     existing?.target_session_id ?? draft?.targetSessionId ?? ""
@@ -329,7 +334,9 @@ export function ScheduleForm({
         <Segmented
           label="What it starts"
           value={kind}
-          options={KINDS}
+          options={KINDS.filter(
+            (k) => !LEGACY_KINDS.includes(k.value) || existing?.kind === k.value
+          )}
           onChange={(k) => {
             setKind(k);
             if (preset === "every" && !frequent(k)) setPreset("daily");
@@ -338,6 +345,17 @@ export function ScheduleForm({
         <p className="text-muted-foreground text-xs">
           {KINDS.find((k) => k.value === kind)?.hint}
         </p>
+        <p className="text-muted-foreground text-xs">
+          To start a task or session on a timer, use a{" "}
+          <button
+            type="button"
+            className="text-foreground underline underline-offset-2"
+            onClick={() => recipesUiActions.open(workspaceId ?? null)}
+          >
+            recipe
+          </button>
+          .
+        </p>
       </Field>
 
       {!workspaceId && (

package/components/Schedules/SchedulesPanel.tsx

@@ -40,6 +40,7 @@ const KIND_LABEL = {
   session: "Session",
   orchestrator: "Orchestrator",
   message: "Message",
+  recipe: "Recipe",
 } as const;
 
 // "Task · api", "Message → orchestrator".

package/components/SessionList/RowSubtitle.tsx

@@ -1,6 +1,8 @@
 "use client";
 
+import { Repeat, Layers } from "lucide-react";
 import { HostBadge } from "@/components/Hosts";
+import { rowGroup } from "@/lib/recipes/chip";
 import type { Session } from "@/lib/db";
 import { LiveLine, type LiveInput } from "./LiveLine";
 import { headerParts } from "@/lib/orchestrator/header-line";
@@ -53,9 +55,23 @@ export function RowSubtitle({
     );
   }
   const project = ctx.projectNames.get(session.project_id ?? "");
+  const group = rowGroup(session);
   return (
     <span className="flex min-w-0 items-center gap-1.5">
       <LiveLine {...live} />
+      {group && (
+        <span
+          className="text-muted-foreground/70 flex min-w-0 shrink-0 items-center gap-1 truncate text-xs"
+          title={group.kind === "recipe" ? "A recipe run" : "A piece of a plan"}
+        >
+          {group.kind === "recipe" ? (
+            <Repeat aria-hidden className="h-3 w-3 shrink-0" />
+          ) : (
+            <Layers aria-hidden className="h-3 w-3 shrink-0" />
+          )}
+          <span className="truncate">{group.text}</span>
+        </span>
+      )}
       {(project || detail || usage) && (
         <span className="text-muted-foreground/70 truncate text-xs">
           {[usage && usageLabel(usage), detail?.slice(0, 200), project]

package/components/SessionList/SessionRowMenu.tsx

@@ -14,6 +14,9 @@ import {
   Loader2,
   Pencil,
   Pin,
+  Play,
+  Repeat,
+  ChefHat,
   PinOff,
   RotateCcw,
   Sparkles,
@@ -24,6 +27,8 @@ import * as CM from "@/components/ui/context-menu";
 import type { Session } from "@/lib/db";
 import { selectionActions } from "@/stores/sessionSelection";
 import { schedulesUiActions } from "@/stores/schedulesUi";
+import { recipesUiActions } from "@/stores/recipesUi";
+import { rowGroup } from "@/lib/recipes/chip";
 import { useDoneAction } from "./useDoneAction";
 import { useRowContext } from "./RowContext";
 import { MoveMenuItems } from "@/components/Tasks/MoveMenuItems";
@@ -95,6 +100,8 @@ export function SessionRowMenu({
   const others = ctx.projects.filter(
     (p) => p.id !== session.project_id && !p.is_uncategorized
   );
+  const group = rowGroup(session);
+  const recipeRun = group?.kind === "recipe" ? { id: group.id } : null;
   const workspaceId =
     session.workspace_id ??
     ctx.projects.find((p) => p.id === session.project_id)?.workspace_id ??
@@ -251,6 +258,28 @@ export function SessionRowMenu({
             Schedule check-ins
           </Item>
         )}
+      {recipeRun && (
+        <>
+          <Item onClick={() => recipesUiActions.openRecipe(recipeRun.id)}>
+            <Repeat className={icon} />
+            Open recipe
+          </Item>
+          <Item onClick={() => recipesUiActions.openRecipe(recipeRun.id, true)}>
+            <Play className={icon} />
+            Run again
+          </Item>
+        </>
+      )}
+      {!recipeRun && !session.role && !session.quick_of && (
+        <Item
+          onClick={() =>
+            recipesUiActions.saveSessionAs(session.id, workspaceId)
+          }
+        >
+          <ChefHat className={icon} />
+          Save as recipe
+        </Item>
+      )}
       <Item
         onClick={() =>
           selectionActions.toggle(session.id, false, ctx.orderedIds())

package/components/SessionList/SidebarHeader.tsx

@@ -3,6 +3,7 @@
 import {
   Archive,
   BookOpen,
+  ChefHat,
   Clock,
   FolderGit2,
   FolderPlus,
@@ -31,6 +32,7 @@ import { archivedUiActions } from "@/stores/archivedUi";
 import { tasksUiActions } from "@/stores/tasksUi";
 import { newDraft } from "@/stores/drafts";
 import { schedulesUiActions } from "@/stores/schedulesUi";
+import { recipesUiActions } from "@/stores/recipesUi";
 import { busUiActions } from "@/stores/busUi";
 import { settingsUiActions } from "@/stores/settingsUi";
 import { usageUiActions } from "@/stores/usageUi";
@@ -106,6 +108,9 @@ export function SidebarHeader(props: SidebarHeaderProps) {
                 </span>
               ),
             }),
+            menuItem("Recipes", () => recipesUiActions.open(workspaceId), {
+              icon: ChefHat,
+            }),
             menuItem("Messages", busUiActions.open, { icon: MessagesSquare }),
             ...(props.onOpenDocs
               ? [menuItem("Docs", props.onOpenDocs, { icon: BookOpen })]

package/components/SessionList/WorkspaceSwitcher.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import {
   Archive,
   Check,
+  ChefHat,
   ChevronDown,
   CircleCheck,
   Clock,
@@ -30,6 +31,7 @@ import { archivedUiActions, cleanupUiActions } from "@/stores/archivedUi";
 import { orchestratorOpenActions } from "@/stores/orchestratorOpen";
 import { sidebarUiActions } from "@/stores/sidebarUi";
 import { schedulesUiActions } from "@/stores/schedulesUi";
+import { recipesUiActions } from "@/stores/recipesUi";
 import { useAddExistingProject } from "@/components/Projects/AddProject/useAddExistingProject";
 
 const icon = "mr-2 h-3.5 w-3.5";
@@ -89,10 +91,18 @@ export function WorkspaceSwitcher({
             New workspace
           </DM.DropdownMenuItem>
           {!current && (
-            <DM.DropdownMenuItem onClick={() => schedulesUiActions.open(null)}>
-              <Clock className={icon} />
-              Schedules
-            </DM.DropdownMenuItem>
+            <>
+              <DM.DropdownMenuItem onClick={() => recipesUiActions.open(null)}>
+                <ChefHat className={icon} />
+                Recipes
+              </DM.DropdownMenuItem>
+              <DM.DropdownMenuItem
+                onClick={() => schedulesUiActions.open(null)}
+              >
+                <Clock className={icon} />
+                Schedules
+              </DM.DropdownMenuItem>
+            </>
           )}
           {current && (
             <>
@@ -110,6 +120,12 @@ export function WorkspaceSwitcher({
                 <Workflow className={icon} />
                 Orchestrator
               </DM.DropdownMenuItem>
+              <DM.DropdownMenuItem
+                onClick={() => recipesUiActions.open(current.id)}
+              >
+                <ChefHat className={icon} />
+                Recipes
+              </DM.DropdownMenuItem>
               <DM.DropdownMenuItem
                 onClick={() => schedulesUiActions.open(current.id)}
               >

package/components/Settings/SettingsDialog.tsx

@@ -6,6 +6,7 @@ import {
   ArrowLeft,
   Bell,
   ChevronRight,
+  ChefHat,
   ClipboardList,
   Clock,
   Cpu,
@@ -34,6 +35,7 @@ import { useSettingsUrl } from "@/hooks/useSettingsUrl";
 import { SETTINGS_SECTIONS, type SettingsSection } from "@/lib/settings-url";
 import { cn } from "@/lib/utils";
 import { schedulesUiActions } from "@/stores/schedulesUi";
+import { RecipesPanel } from "@/components/Recipes";
 import { settingsUi, settingsUiActions } from "@/stores/settingsUi";
 import { SetupSection } from "./SetupSection";
 import {
@@ -70,6 +72,11 @@ export const SECTION_INFO: Record<
     hint: "Sound, browser alerts, your phone",
     icon: Bell,
   },
+  recipes: {
+    label: "Recipes",
+    hint: "Saved jobs you run again, by hand or on a timer",
+    icon: ChefHat,
+  },
   schedules: {
     label: "Schedules",
     hint: "Work that starts at set times",
@@ -105,6 +112,8 @@ function SectionBody({
       return <DevicesPanel />;
     case "notifications":
       return <NotificationsSection browser={browser} />;
+    case "recipes":
+      return <RecipesPanel />;
     case "schedules":
       return <SchedulesPanel />;
     case "audits":