@stigmer/react 3.6.0 → 3.7.0

package/src/schedule/ScheduleDetailView.tsx

@@ -1,11 +1,18 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { cn } from "@stigmer/theme";
+import { create } from "@bufbuild/protobuf";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import type { Schedule } from "@stigmer/protos/ai/stigmer/agentic/schedule/v1/api_pb";
+import type { Environment } from "@stigmer/protos/ai/stigmer/agentic/environment/v1/api_pb";
+import { ApiResourceKind } from "@stigmer/protos/ai/stigmer/commons/apiresource/apiresourcekind/api_resource_kind_pb";
+import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
+import { ApiResourceReferenceSchema } from "@stigmer/protos/ai/stigmer/commons/apiresource/io_pb";
+import type { ResourceRef } from "@stigmer/sdk";
 import { formatRelativeTime } from "../activity/format-relative-time.js";
 import { ErrorMessage } from "../error/ErrorMessage.js";
+import { InlineEditTextarea } from "../inline-edit/InlineEditTextarea.js";
 import { EditResourceYamlDialog } from "../manifest/EditResourceYamlDialog.js";
 import { ConfirmDialog } from "../resource-detail/ConfirmDialog.js";
 import { ResourceDetailShell } from "../resource-detail/ResourceDetailShell.js";
@@ -13,13 +20,57 @@ import { Section } from "../resource-detail/Section.js";
 import { useConfirmAction } from "../resource-detail/useConfirmAction.js";
 import { useCopyResource } from "../resource-detail/useCopyResource.js";
 import { useDeleteResource } from "../resource-detail/useDeleteResource.js";
-import type { DetailAction, ResourceHeaderMeta } from "../resource-detail/types.js";
+import { useDetailTabs } from "../resource-detail/useDetailTabs.js";
+import type {
+  AdditionalTab,
+  DetailAction,
+  ResourceHeaderMeta,
+} from "../resource-detail/types.js";
+import type { TabItem } from "../tabs/Tabs.js";
 import { useExportResource } from "../library/useExportResource.js";
+import { ScheduleRunOutcome } from "@stigmer/protos/ai/stigmer/agentic/schedule/v1/io_pb";
+import type { ScheduleSpec } from "@stigmer/protos/ai/stigmer/agentic/schedule/v1/spec_pb";
+import {
+  RunConfigSchema,
+  type AgentInvocation,
+  type RunConfig,
+} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/invocation_pb";
+import { Harness } from "@stigmer/protos/ai/stigmer/agentic/session/v1/enum_pb";
+import { ServiceTier } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import type { WorkspaceEntry } from "@stigmer/protos/ai/stigmer/agentic/session/v1/workspace_pb";
+import {
+  cadenceToCron,
+  cronToCadence,
+  describeCadence,
+  validateCron,
+  type CadencePreset,
+} from "./cadence.js";
+import { CadenceField } from "./CadenceField.js";
+import { EnvironmentPicker } from "../environment/EnvironmentPicker.js";
+import { ModelSelector } from "../models/ModelSelector.js";
+import {
+  HARNESS_META,
+  fromProtoHarness,
+  toProtoHarness,
+  type HarnessOption,
+} from "../models/harness.js";
+import {
+  fromProtoServiceTier,
+  toProtoServiceTier,
+  type ServiceTierOption,
+} from "../models/service-tier.js";
 import { deriveScheduleState, formatNextFire } from "./scheduleState.js";
+import {
+  ScheduleRunsCompactList,
+  ScheduleRunsTable,
+} from "./ScheduleRunsTable.js";
+import { TimeZoneField, browserTimeZone } from "./TimeZoneField.js";
 import { useSchedule } from "./useSchedule.js";
+import { useScheduleRuns } from "./useScheduleRuns.js";
 import { useResumeSchedule } from "./useResumeSchedule.js";
 import { useSetScheduleEnabled } from "./useSetScheduleEnabled.js";
 import { useTriggerSchedule } from "./useTriggerSchedule.js";
+import { useUpdateScheduleSpec } from "./useUpdateScheduleSpec.js";
 
 /** Props for {@link ScheduleDetailView}. */
 export interface ScheduleDetailViewProps {
@@ -34,8 +85,9 @@ export interface ScheduleDetailViewProps {
    */
   readonly onNavigateToAgent?: (org: string, slug: string) => void;
   /**
-   * Called when the user activates the last-execution reference
-   * (`aex_…`). When omitted, the id renders as plain text.
+   * Called when the user activates an execution reference (`aex_…`),
+   * from the status row or a run-history row. When omitted, ids render
+   * as plain text.
    */
   readonly onNavigateToExecution?: (executionId: string) => void;
   /** Called after a successful delete (navigate back to the list). */
@@ -43,8 +95,26 @@ export interface ScheduleDetailViewProps {
   /** Called when the schedule loads or reloads (e.g. breadcrumb label sync). */
   readonly onResourceLoad?: (schedule: Schedule) => void;
   /**
-   * The instant "next fire" countdowns are computed against.
-   * Injectable for deterministic tests and Scenar fixtures.
+   * Enable inline editing of the schedule's mutable spec fields
+   * (cadence, message, environments, engine & model, budget). Each
+   * field saves independently via a lossless full-resource re-apply
+   * ({@link useUpdateScheduleSpec}). The server-immutable fields —
+   * slug, target agent, target type — never gain an edit affordance;
+   * workspace edits go through Edit YAML for now.
+   * @default false
+   */
+  readonly editable?: boolean;
+  /** Consumer-provided extension tabs, appended after the built-ins. */
+  readonly additionalTabs?: readonly AdditionalTab[];
+  /** Controlled active tab (pair with `onTabChange`). */
+  readonly activeTab?: string;
+  /** Controlled tab change handler (pair with `activeTab`). */
+  readonly onTabChange?: (tabId: string) => void;
+  /** Initial tab in uncontrolled mode. @default "overview" */
+  readonly defaultTab?: string;
+  /**
+   * The instant "next fire" countdowns and run timestamps are computed
+   * against. Injectable for deterministic tests and Scenar fixtures.
    * @default new Date() at render
    */
   readonly now?: Date;
@@ -52,8 +122,20 @@ export interface ScheduleDetailViewProps {
   readonly className?: string;
 }
 
+const OVERVIEW_TAB_ID = "overview";
+const RUNS_TAB_ID = "runs";
+
+// The Overview strip shows the newest handful of fires; the Runs tab
+// owns the full paginated history.
+const RECENT_RUNS_OPTIONS = { pageSize: 5 } as const;
+
+/** invocation.proto pins AgentInvocation.message to 8192 characters. */
+const MESSAGE_MAX_LEN = 8192;
+
 /**
- * Self-contained detail view for a Schedule (stigmer/stigmer#352).
+ * Self-contained detail view for a Schedule (stigmer/stigmer#352),
+ * split into an Overview tab (definition + status + recent runs) and a
+ * Runs tab (the full paginated fire ledger).
  *
  * The view's one non-negotiable is rendering the two stop-levers
  * distinctly, each with its inline remedy:
@@ -66,8 +148,9 @@ export interface ScheduleDetailViewProps {
  *
  * Trigger ("Run now") starts a real, billable execution and is gated
  * behind a confirmation; it is disabled while the schedule cannot fire
- * (the banner names the remedy). Edit YAML, Export, and Delete round
- * out the action set.
+ * (the banner names the remedy). With `editable`, the mutable spec
+ * fields edit inline; Edit YAML, Export, and Delete round out the
+ * action set.
  *
  * Handles loading, error, and not-found states automatically.
  * Zero Console dependencies — safe for platform builder embedding.
@@ -80,14 +163,31 @@ export function ScheduleDetailView({
   onNavigateToExecution,
   onDeleted,
   onResourceLoad,
+  editable = false,
+  additionalTabs,
+  activeTab,
+  onTabChange,
+  defaultTab,
   now,
   className,
 }: ScheduleDetailViewProps) {
   const { schedule, isLoading, error, refetch } = useSchedule(org, slug);
 
+  // The recent-runs fetch stays mounted regardless of the active tab:
+  // it feeds the Runs tab badge (total count), the Overview strip, and
+  // post-trigger freshness. The Runs tab's full table owns its own
+  // paginated fetch inside ScheduleRunsTable.
+  const {
+    runs: recentRuns,
+    totalCount: totalRunCount,
+    isLoading: recentRunsLoading,
+    refetch: refetchRecentRuns,
+  } = useScheduleRuns(schedule?.metadata?.id ?? null, RECENT_RUNS_OPTIONS);
+
   const { resumeSchedule, isResuming } = useResumeSchedule();
   const { triggerSchedule, isTriggering } = useTriggerSchedule();
   const { setEnabled, isPending: isToggling } = useSetScheduleEnabled();
+  const { updateSpec, isUpdating } = useUpdateScheduleSpec();
   const { deleteResource, isDeleting } = useDeleteResource(
     "schedule",
     schedule?.metadata?.id ?? null,
@@ -98,6 +198,66 @@ export function ScheduleDetailView({
   const { copyId, copyQualifiedSlug } = useCopyResource();
   const [editOpen, setEditOpen] = useState(false);
 
+  // Remount key for the Runs tab's table: a manual trigger bumps it so
+  // the table refetches and returns to page 1, where the new fire
+  // appears (the key-remount reset idiom, DD-014).
+  const [runsVersion, setRunsVersion] = useState(0);
+
+  // Last failed inline save, attributed to the field that was edited so
+  // only that editor shows the message. The backend's message is the
+  // UX (DD-006) — e.g. the cron validator's copy surfaces verbatim.
+  const [saveError, setSaveError] = useState<{
+    field: string;
+    message: string;
+  } | null>(null);
+
+  const saveSpecField = useCallback(
+    async (
+      field: string,
+      mutate: (spec: ScheduleSpec) => void,
+    ): Promise<boolean> => {
+      if (!schedule) return false;
+      setSaveError(null);
+      try {
+        await updateSpec(schedule, mutate);
+        refetch();
+        return true;
+      } catch (err) {
+        setSaveError({
+          field,
+          message: err instanceof Error ? err.message : String(err),
+        });
+        return false;
+      }
+    },
+    [schedule, updateSpec, refetch],
+  );
+
+  const builtInTabs = useMemo<readonly TabItem[]>(
+    () => [
+      { id: OVERVIEW_TAB_ID, label: "Overview" },
+      {
+        id: RUNS_TAB_ID,
+        label: "Runs",
+        ...(totalRunCount > 0 ? { badge: totalRunCount } : {}),
+      },
+    ],
+    [totalRunCount],
+  );
+
+  const {
+    effectiveTabs,
+    effectiveActiveTab,
+    effectiveOnTabChange,
+    activeAdditionalTab,
+  } = useDetailTabs({
+    builtInTabs,
+    additionalTabs,
+    activeTab,
+    onTabChange,
+    defaultTab,
+  });
+
   const { copyYaml, downloadYaml } = useExportResource({
     kind: "Schedule",
     resource: schedule,
@@ -120,6 +280,7 @@ export function ScheduleDetailView({
   const renderNow = now ?? new Date();
 
   const scheduleId = meta?.id ?? "";
+  const scheduleOrg = meta?.org || org;
   const target = spec?.target?.case === "agent" ? spec.target.value : undefined;
 
   const handleResume = async () => {
@@ -132,18 +293,56 @@ export function ScheduleDetailView({
     refetch();
   };
 
+  // One fire: trigger, refresh the schedule and its run history, and — on
+  // a started run — hand the execution to the host so it can navigate
+  // straight to it (the whole point of the synchronous trigger, DD-017
+  // D-6). A refused run resolves too; its reason is toasted by the hook
+  // and lands in the run history below.
+  const fireNow = async () => {
+    const result = await triggerSchedule(scheduleId);
+    refetch();
+    refetchRecentRuns();
+    setRunsVersion((v) => v + 1);
+    if (
+      result.outcome === ScheduleRunOutcome.STARTED &&
+      result.executionId &&
+      onNavigateToExecution
+    ) {
+      onNavigateToExecution(result.executionId);
+    }
+  };
+
   const handleTrigger = async () => {
     const confirmed = await confirm({
       title: "Run this schedule now?",
       description:
         "This starts a real agent execution immediately, outside the cron " +
-        "cadence. The run appears as the schedule's last execution.",
+        "cadence. The run is recorded in this schedule's run history.",
       confirmLabel: "Start run",
       variant: "default",
     });
     if (!confirmed) return;
-    await triggerSchedule(scheduleId);
-    refetch();
+    await fireNow();
+  };
+
+  // A disabled schedule refuses to fire at the server — ScheduleBlueprintAccess
+  // requires spec.enabled at the create gate AND the mid-run read (DD-017
+  // D-5), so a disabled run would die mid-execution after billing. The
+  // staged-disabled test flow the creation form promises is therefore
+  // "enable, then fire", and this makes it one click.
+  const handleEnableAndRun = async () => {
+    const confirmed = await confirm({
+      title: "Enable and run this schedule now?",
+      description:
+        "This schedule is staged disabled. Enabling it lets it fire on its " +
+        "cron cadence going forward, and starts one real run immediately so " +
+        "you can see the result. You can disable it again afterwards.",
+      confirmLabel: "Enable & run",
+      variant: "default",
+    });
+    if (!confirmed) return;
+    await setEnabled(schedule, true);
+    await fireNow();
   };
 
   const handleDelete = async () => {
@@ -160,15 +359,23 @@ export function ScheduleDetailView({
     onDeleted?.();
   };
 
-  const primaryAction: DetailAction = {
-    id: "trigger",
-    label: "Run now",
-    onAction: () => void handleTrigger(),
-    // A disabled or paused schedule refuses to trigger server-side; the
-    // banner above names the remedy, so the button reflects it too
-    // (error prevention over error recovery).
-    disabled: stateInfo.state !== "active" || isTriggering,
-  };
+  // Disabled → "Enable & run now" (the one-click staged-test flow);
+  // active and paused → "Run now" (a paused schedule's owner needs a
+  // test fire to verify a fix before resuming — DD-017 D-5).
+  const primaryAction: DetailAction =
+    stateInfo.state === "disabled"
+      ? {
+          id: "enable-and-run",
+          label: "Enable & run now",
+          onAction: () => void handleEnableAndRun(),
+          disabled: isTriggering || isToggling,
+        }
+      : {
+          id: "trigger",
+          label: "Run now",
+          onAction: () => void handleTrigger(),
+          disabled: isTriggering,
+        };
 
   const actions: DetailAction[] = [
     ...(stateInfo.isPaused
@@ -249,8 +456,12 @@ export function ScheduleDetailView({
         actionLabel="Enable schedule"
         actionBusy={isToggling}
       >
-        The owner switch (<code className="font-mono">spec.enabled</code>) is
-        off — this schedule will not fire.
+        This schedule is staged disabled (
+        <code className="font-mono">spec.enabled</code> is off) — it will not
+        fire on its cron cadence. Use{" "}
+        <span className="font-medium text-foreground">Enable &amp; run now</span>{" "}
+        to enable it and start one test run, or Enable it here to hand it to
+        the cadence.
         {stateInfo.isPaused && (
           <>
             {" "}
@@ -271,6 +482,245 @@ export function ScheduleDetailView({
       </StateBanner>
     ) : undefined;
 
+  const overviewContent = (
+    <div className="flex flex-col gap-6">
+      <Section title="Definition">
+        <dl className="divide-y divide-border">
+          <DetailRow label="Cadence">
+            {editable ? (
+              <CadenceInlineEditor
+                cron={spec?.cron ?? ""}
+                timeZone={spec?.timeZone ?? ""}
+                onSave={(cron, timeZone) =>
+                  saveSpecField("cadence", (s) => {
+                    s.cron = cron;
+                    s.timeZone = timeZone;
+                  })
+                }
+                isSaving={isUpdating}
+                error={
+                  saveError?.field === "cadence" ? saveError.message : undefined
+                }
+              />
+            ) : (
+              <CadenceSummary
+                cron={spec?.cron ?? ""}
+                timeZone={spec?.timeZone ?? ""}
+              />
+            )}
+          </DetailRow>
+          {/* Target agent and target type are server-immutable on update,
+              so this row never gains an edit affordance — error
+              prevention over error handling. */}
+          <DetailRow label="Target agent">
+            {target?.agentRef ? (
+              <ReferenceLink
+                label={`${target.agentRef.org}/${target.agentRef.slug}`}
+                onNavigate={
+                  onNavigateToAgent
+                    ? () =>
+                        onNavigateToAgent(
+                          target.agentRef!.org,
+                          target.agentRef!.slug,
+                        )
+                    : undefined
+                }
+              />
+            ) : (
+              <span className="text-sm text-muted-foreground">—</span>
+            )}
+          </DetailRow>
+          <DetailRow label="Message">
+            {editable && target ? (
+              <InlineEditTextarea
+                value={target.message ?? ""}
+                placeholder="The instruction the agent receives on every fire — write it for a run with no human present."
+                onSave={(v) =>
+                  saveSpecField("message", (s) => {
+                    if (s.target.case === "agent") {
+                      s.target.value.message = v.trim();
+                    }
+                  })
+                }
+                isSaving={isUpdating}
+                error={
+                  saveError?.field === "message" ? saveError.message : undefined
+                }
+                validate={validateMessage}
+              />
+            ) : (
+              <p className="whitespace-pre-wrap break-words text-sm text-foreground">
+                {target?.message || "—"}
+              </p>
+            )}
+          </DetailRow>
+          <DetailRow label="Environments">
+            {editable && target ? (
+              <EnvironmentsInlineEditor
+                org={scheduleOrg}
+                refs={target.environmentRefs ?? []}
+                onSave={(refs) =>
+                  saveSpecField("environments", (s) => {
+                    if (s.target.case === "agent") {
+                      s.target.value.environmentRefs = refs.map((r) =>
+                        create(ApiResourceReferenceSchema, {
+                          org: r.org,
+                          slug: r.slug,
+                          kind: ApiResourceKind.environment,
+                        }),
+                      );
+                    }
+                  })
+                }
+                isSaving={isUpdating}
+                error={
+                  saveError?.field === "environments"
+                    ? saveError.message
+                    : undefined
+                }
+              />
+            ) : (
+              <EnvironmentRefList
+                refs={target?.environmentRefs ?? []}
+              />
+            )}
+          </DetailRow>
+          {/* Workspace is authored in the creation form (or YAML); an
+              inline workspace editor is deliberately deferred — the
+              read view keeps every stored entry visible. */}
+          <DetailRow label="Workspace">
+            <WorkspaceSummary
+              entries={target?.workspaceEntries ?? []}
+            />
+          </DetailRow>
+          <DetailRow label="Engine & model">
+            {editable && target ? (
+              <EngineModelInlineEditor
+                invocation={target}
+                onSave={(harness, modelName, serviceTier) =>
+                  saveSpecField("engine-model", (s) => {
+                    if (s.target.case === "agent") {
+                      applyEngineModel(s.target.value, harness, modelName, serviceTier);
+                    }
+                  })
+                }
+                isSaving={isUpdating}
+                error={
+                  saveError?.field === "engine-model"
+                    ? saveError.message
+                    : undefined
+                }
+              />
+            ) : (
+              <EngineModelSummary invocation={target} />
+            )}
+          </DetailRow>
+          <DetailRow label="Budget per run">
+            {editable && target ? (
+              <BudgetInlineEditor
+                config={target.runConfig}
+                onSave={(maxCostUsd) =>
+                  saveSpecField("budget", (s) => {
+                    if (s.target.case === "agent") {
+                      applyBudget(s.target.value, maxCostUsd);
+                    }
+                  })
+                }
+                isSaving={isUpdating}
+                error={
+                  saveError?.field === "budget" ? saveError.message : undefined
+                }
+              />
+            ) : (
+              <BudgetSummary config={target?.runConfig} />
+            )}
+          </DetailRow>
+        </dl>
+      </Section>
+
+      <Section title="Status">
+        <dl className="divide-y divide-border">
+          <DetailRow label="Next fire">
+            <span className="text-sm text-foreground">
+              {stateInfo.state === "active" && status?.nextFireAt
+                ? formatNextFire(timestampDate(status.nextFireAt), renderNow)
+                : "—"}
+            </span>
+          </DetailRow>
+          <DetailRow label="Last fired">
+            <span className="text-sm text-foreground">
+              {status?.lastFireAt
+                ? formatRelativeTime(
+                    timestampDate(status.lastFireAt),
+                    renderNow,
+                  )
+                : "Never"}
+            </span>
+          </DetailRow>
+          <DetailRow label="Last execution">
+            {status?.lastExecutionId ? (
+              <ReferenceLink
+                label={status.lastExecutionId}
+                mono
+                onNavigate={
+                  onNavigateToExecution
+                    ? () => onNavigateToExecution(status.lastExecutionId)
+                    : undefined
+                }
+              />
+            ) : (
+              <span className="text-sm text-muted-foreground">—</span>
+            )}
+          </DetailRow>
+          <DetailRow label="Failure streak">
+            <FailureStreak count={status?.consecutiveFailures ?? 0} />
+          </DetailRow>
+        </dl>
+      </Section>
+
+      <Section
+        title="Recent runs"
+        headerActions={
+          totalRunCount > recentRuns.length ? (
+            <button
+              type="button"
+              onClick={() => effectiveOnTabChange(RUNS_TAB_ID)}
+              className={cn(
+                "text-xs font-medium text-primary underline-offset-2 hover:underline",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm",
+              )}
+            >
+              View all {totalRunCount} runs
+            </button>
+          ) : undefined
+        }
+      >
+        <ScheduleRunsCompactList
+          runs={recentRuns}
+          isLoading={recentRunsLoading}
+          now={renderNow}
+          onNavigateToExecution={onNavigateToExecution}
+        />
+      </Section>
+    </div>
+  );
+
+  let tabContent: React.ReactNode;
+  if (activeAdditionalTab) {
+    tabContent = activeAdditionalTab.content;
+  } else if (effectiveActiveTab === RUNS_TAB_ID) {
+    tabContent = (
+      <ScheduleRunsTable
+        key={runsVersion}
+        scheduleId={scheduleId}
+        now={now}
+        onNavigateToExecution={onNavigateToExecution}
+      />
+    );
+  } else {
+    tabContent = overviewContent;
+  }
+
   return (
     <>
       <ResourceDetailShell
@@ -278,96 +728,13 @@ export function ScheduleDetailView({
         headerBanner={headerBanner}
         primaryAction={primaryAction}
         actions={actions}
+        tabs={effectiveTabs}
+        activeTab={effectiveTabs ? effectiveActiveTab : undefined}
+        onTabChange={effectiveTabs ? effectiveOnTabChange : undefined}
+        tabsAriaLabel="Schedule detail sections"
         className={className}
       >
-        <div className="flex flex-col gap-6">
-          <Section title="Definition">
-            <dl className="divide-y divide-border">
-              <DetailRow label="Cron">
-                <code className="font-mono text-sm text-foreground">
-                  {spec?.cron || "—"}
-                </code>
-              </DetailRow>
-              <DetailRow label="Time zone">
-                <span className="text-sm text-foreground">
-                  {spec?.timeZone || "—"}
-                </span>
-              </DetailRow>
-              <DetailRow label="Target agent">
-                {target?.agentRef ? (
-                  <ReferenceLink
-                    label={`${target.agentRef.org}/${target.agentRef.slug}`}
-                    onNavigate={
-                      onNavigateToAgent
-                        ? () =>
-                            onNavigateToAgent(
-                              target.agentRef!.org,
-                              target.agentRef!.slug,
-                            )
-                        : undefined
-                    }
-                  />
-                ) : (
-                  <span className="text-sm text-muted-foreground">—</span>
-                )}
-              </DetailRow>
-              <DetailRow label="Message">
-                <p className="whitespace-pre-wrap break-words text-sm text-foreground">
-                  {target?.message || "—"}
-                </p>
-              </DetailRow>
-            </dl>
-          </Section>
-
-          <Section title="Status">
-            <dl className="divide-y divide-border">
-              <DetailRow label="Next fire">
-                <span className="text-sm text-foreground">
-                  {stateInfo.state === "active" && status?.nextFireAt
-                    ? formatNextFire(timestampDate(status.nextFireAt), renderNow)
-                    : "—"}
-                </span>
-              </DetailRow>
-              <DetailRow label="Last fired">
-                <span className="text-sm text-foreground">
-                  {status?.lastFireAt
-                    ? formatRelativeTime(
-                        timestampDate(status.lastFireAt),
-                        renderNow,
-                      )
-                    : "Never"}
-                </span>
-              </DetailRow>
-              <DetailRow label="Last execution">
-                {status?.lastExecutionId ? (
-                  <ReferenceLink
-                    label={status.lastExecutionId}
-                    mono
-                    onNavigate={
-                      onNavigateToExecution
-                        ? () => onNavigateToExecution(status.lastExecutionId)
-                        : undefined
-                    }
-                  />
-                ) : (
-                  <span className="text-sm text-muted-foreground">—</span>
-                )}
-              </DetailRow>
-              <DetailRow label="Consecutive failures">
-                <span
-                  className={cn(
-                    "text-sm",
-                    (status?.consecutiveFailures ?? 0) > 0
-                      ? "font-medium text-warning"
-                      : "text-foreground",
-                  )}
-                >
-                  {status?.consecutiveFailures ?? 0}
-                </span>
-              </DetailRow>
-            </dl>
-          </Section>
-        </div>
+        {tabContent}
       </ResourceDetailShell>
 
       <ConfirmDialog
@@ -437,6 +804,526 @@ function StateBanner({
   );
 }
 
+// ---------------------------------------------------------------------------
+// Cadence summary — plain English first, raw cron as the precise record
+// ---------------------------------------------------------------------------
+
+/**
+ * Render a schedule's cadence for reading: the plain-English sentence
+ * first ("Every day at 09:00 (Asia/Kolkata)"), the raw cron beneath it
+ * in muted mono as the precise record.
+ *
+ * `cronToCadence` RECOGNIZES rather than parses (the platform owns no
+ * cron parser in either edition — see cadence.ts): expressions outside
+ * the builder's shapes come back as `custom`, for which the raw cron IS
+ * the primary display, with the time zone alongside so nothing the
+ * spec stores is hidden.
+ */
+function CadenceSummary({
+  cron,
+  timeZone,
+}: {
+  readonly cron: string;
+  readonly timeZone: string;
+}) {
+  if (!cron) return <span className="text-sm text-muted-foreground">—</span>;
+
+  const preset = cronToCadence(cron);
+  if (preset.kind === "custom") {
+    return (
+      <div className="flex flex-col gap-0.5">
+        <code className="font-mono text-sm text-foreground">{cron}</code>
+        {timeZone && (
+          <span className="text-xs text-muted-foreground">{timeZone}</span>
+        )}
+      </div>
+    );
+  }
+  return (
+    <div className="flex flex-col gap-0.5">
+      <span className="text-sm text-foreground">
+        {describeCadence(preset, timeZone || undefined)}
+      </span>
+      <code className="font-mono text-xs text-muted-foreground">{cron}</code>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Inline editors — per-field click-to-edit over the lossless write path
+// ---------------------------------------------------------------------------
+//
+// Each editor follows the InlineEdit* family's contract: read mode is a
+// click target with a hover pencil; edit mode holds a local draft with
+// explicit Save/Cancel; a failed save keeps the editor open with the
+// server's message rendered verbatim beneath it (DD-006). The editors
+// stay in this file (the AgentDetailView single-organism precedent) and
+// reuse the creation form's field components — CadenceField,
+// TimeZoneField, EnvironmentPicker — so creating and editing a schedule
+// are the same experience.
+
+/** Cadence + time zone edit in one panel — they form one sentence. */
+function CadenceInlineEditor({
+  cron,
+  timeZone,
+  onSave,
+  isSaving,
+  error,
+}: {
+  readonly cron: string;
+  readonly timeZone: string;
+  readonly onSave: (cron: string, timeZone: string) => Promise<boolean>;
+  readonly isSaving: boolean;
+  readonly error?: string;
+}) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [draftCadence, setDraftCadence] = useState<CadencePreset>(() =>
+    cronToCadence(cron),
+  );
+  const [draftZone, setDraftZone] = useState(timeZone);
+
+  const startEdit = () => {
+    // cronToCadence round-trips the stored cron into the preset picker;
+    // unrecognized shapes land on the Custom escape hatch with the raw
+    // string intact.
+    setDraftCadence(cronToCadence(cron));
+    setDraftZone(timeZone || browserTimeZone());
+    setIsEditing(true);
+  };
+
+  if (!isEditing) {
+    return (
+      <InlineReadButton onEdit={startEdit} ariaLabel="Edit cadence">
+        <CadenceSummary cron={cron} timeZone={timeZone} />
+      </InlineReadButton>
+    );
+  }
+
+  const draftCron = cadenceToCron(draftCadence).trim();
+  const canSave = draftCron !== "" && validateCron(draftCron) === null;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <CadenceField
+        value={draftCadence}
+        onChange={setDraftCadence}
+        timeZone={draftZone}
+        disabled={isSaving}
+      />
+      <div className="space-y-1">
+        <span className={editorLabelClasses}>Time zone</span>
+        <TimeZoneField
+          value={draftZone}
+          onChange={setDraftZone}
+          disabled={isSaving}
+        />
+      </div>
+      <InlineEditActions
+        onCancel={() => setIsEditing(false)}
+        onSave={async () => {
+          const ok = await onSave(draftCron, draftZone);
+          if (ok) setIsEditing(false);
+        }}
+        isSaving={isSaving}
+        canSave={canSave}
+        error={error}
+      />
+    </div>
+  );
+}
+
+/** Environment bindings edit — org-shared credentials only (DD-017 D-2). */
+function EnvironmentsInlineEditor({
+  org,
+  refs,
+  onSave,
+  isSaving,
+  error,
+}: {
+  readonly org: string;
+  readonly refs: readonly { org: string; slug: string }[];
+  readonly onSave: (refs: readonly ResourceRef[]) => Promise<boolean>;
+  readonly isSaving: boolean;
+  readonly error?: string;
+}) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [draft, setDraft] = useState<ResourceRef[]>([]);
+
+  const startEdit = () => {
+    setDraft(refs.map((r) => ({ org: r.org, slug: r.slug })));
+    setIsEditing(true);
+  };
+
+  if (!isEditing) {
+    return (
+      <InlineReadButton onEdit={startEdit} ariaLabel="Edit environments">
+        <EnvironmentRefList refs={refs} />
+      </InlineReadButton>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      <EnvironmentPicker
+        org={org}
+        value={draft}
+        onChange={setDraft}
+        disabled={isSaving}
+        // Only org-shared environments resolve for a schedule fire (the
+        // same credential surface a channel binding uses), so offering
+        // anything else could only produce refused runs.
+        filterEnvironment={isOrgSharedEnvironment}
+      />
+      <p className="text-[0.65rem] text-muted-foreground">
+        Bind org-shared credentials so the agent&rsquo;s tools work on an
+        unattended fire. Without this, an agent whose tools need credentials
+        will be refused every run.
+      </p>
+      <InlineEditActions
+        onCancel={() => setIsEditing(false)}
+        onSave={async () => {
+          const ok = await onSave(draft);
+          if (ok) setIsEditing(false);
+        }}
+        isSaving={isSaving}
+        canSave
+        error={error}
+      />
+    </div>
+  );
+}
+
+function isOrgSharedEnvironment(env: Environment): boolean {
+  return env.metadata?.visibility === ApiResourceVisibility.visibility_org;
+}
+
+/**
+ * Engine & model edit — the composer's own picker, with the creation
+ * form's atomic semantics (DD-018 D-5): picking a model pins BOTH the
+ * harness and the model (the registry scopes models per harness);
+ * clearing the model unpins both, and the platform defaults apply.
+ */
+function EngineModelInlineEditor({
+  invocation,
+  onSave,
+  isSaving,
+  error,
+}: {
+  readonly invocation: AgentInvocation;
+  readonly onSave: (
+    harness: Harness,
+    modelName: string,
+    serviceTier: ServiceTierOption,
+  ) => Promise<boolean>;
+  readonly isSaving: boolean;
+  readonly error?: string;
+}) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [modelName, setModelName] = useState("");
+  const [harness, setHarness] = useState<HarnessOption>("cursor");
+  const [serviceTier, setServiceTier] = useState<ServiceTierOption>("standard");
+
+  const startEdit = () => {
+    setModelName(invocation.runConfig?.modelName ?? "");
+    setHarness(
+      invocation.harness !== Harness.UNSPECIFIED
+        ? fromProtoHarness(invocation.harness)
+        : "cursor",
+    );
+    setServiceTier(
+      fromProtoServiceTier(invocation.runConfig?.serviceTier) ?? "standard",
+    );
+    setIsEditing(true);
+  };
+
+  if (!isEditing) {
+    return (
+      <InlineReadButton onEdit={startEdit} ariaLabel="Edit engine and model">
+        <EngineModelSummary invocation={invocation} />
+      </InlineReadButton>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center gap-2">
+        <ModelSelector
+          value={modelName}
+          onValueChange={setModelName}
+          initialHarness={harness}
+          onHarnessChange={setHarness}
+          serviceTier={serviceTier}
+          onServiceTierChange={setServiceTier}
+          placeholderLabel="Platform default"
+          disabled={isSaving}
+        />
+        {modelName !== "" && (
+          <button
+            type="button"
+            onClick={() => {
+              setModelName("");
+              setServiceTier("standard");
+            }}
+            disabled={isSaving}
+            className="rounded-md px-2 py-1 text-[0.65rem] text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+          >
+            Reset to platform default
+          </button>
+        )}
+      </div>
+      <p className="text-[0.65rem] text-muted-foreground">
+        Runs use the platform&rsquo;s default engine and model unless you pick
+        one here. Picking a model pins the engine it belongs to.
+      </p>
+      <InlineEditActions
+        onCancel={() => setIsEditing(false)}
+        onSave={async () => {
+          const ok = await onSave(
+            modelName !== "" ? toProtoHarness(harness) : Harness.UNSPECIFIED,
+            modelName,
+            serviceTier,
+          );
+          if (ok) setIsEditing(false);
+        }}
+        isSaving={isSaving}
+        canSave
+        error={error}
+      />
+    </div>
+  );
+}
+
+/** Budget edit — blank inherits the platform default (DD-018 D-2). */
+function BudgetInlineEditor({
+  config,
+  onSave,
+  isSaving,
+  error,
+}: {
+  readonly config: RunConfig | undefined;
+  readonly onSave: (maxCostUsd: number | undefined) => Promise<boolean>;
+  readonly isSaving: boolean;
+  readonly error?: string;
+}) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [budgetUsd, setBudgetUsd] = useState("");
+
+  const startEdit = () => {
+    setBudgetUsd(config && config.maxCostUsd > 0 ? String(config.maxCostUsd) : "");
+    setIsEditing(true);
+  };
+
+  if (!isEditing) {
+    return (
+      <InlineReadButton onEdit={startEdit} ariaLabel="Edit budget">
+        <BudgetSummary config={config} />
+      </InlineReadButton>
+    );
+  }
+
+  const cost = Number.parseFloat(budgetUsd);
+  const parsedBudget = Number.isFinite(cost) && cost > 0 ? cost : undefined;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <input
+        type="number"
+        min="0"
+        step="any"
+        aria-label="Budget per run (USD)"
+        value={budgetUsd}
+        onChange={(e) => setBudgetUsd(e.target.value)}
+        placeholder="platform default"
+        disabled={isSaving}
+        className={cn(editorInputClasses, "sm:max-w-48")}
+      />
+      <p className="text-[0.65rem] text-muted-foreground">
+        Each run stops when it reaches this spend. You can lower the
+        platform&rsquo;s per-run cap, never raise it past the
+        platform&rsquo;s ceiling. Blank inherits the platform default.
+      </p>
+      <InlineEditActions
+        onCancel={() => setIsEditing(false)}
+        onSave={async () => {
+          const ok = await onSave(parsedBudget);
+          if (ok) setIsEditing(false);
+        }}
+        isSaving={isSaving}
+        canSave
+        error={error}
+      />
+    </div>
+  );
+}
+
+/**
+ * Write the engine+model choice onto the invocation, preserving the
+ * run-config fields the editor does not own (budget; the API-only tool
+ * rounds), and dropping an all-empty run_config — the proto's "empty =
+ * inherit" contract (DD-017 D-3 as carried into DD-018 D-2).
+ */
+function applyEngineModel(
+  invocation: AgentInvocation,
+  harness: Harness,
+  modelName: string,
+  serviceTier: ServiceTierOption,
+): void {
+  invocation.harness = harness;
+  invocation.runConfig = normalizeRunConfig(
+    modelName,
+    invocation.runConfig?.maxCostUsd ?? 0,
+    invocation.runConfig?.maxToolRounds ?? 0,
+    // The tier rides the model choice: no model, no tier (#357).
+    modelName.trim() !== "" ? serviceTier : "standard",
+  );
+}
+
+/** Budget twin of {@link applyEngineModel} — writes only the cost cap. */
+function applyBudget(
+  invocation: AgentInvocation,
+  maxCostUsd: number | undefined,
+): void {
+  invocation.runConfig = normalizeRunConfig(
+    invocation.runConfig?.modelName ?? "",
+    maxCostUsd ?? 0,
+    invocation.runConfig?.maxToolRounds ?? 0,
+    fromProtoServiceTier(invocation.runConfig?.serviceTier) ?? "standard",
+  );
+}
+
+function normalizeRunConfig(
+  modelName: string,
+  maxCostUsd: number,
+  maxToolRounds: number,
+  serviceTier: ServiceTierOption,
+): RunConfig | undefined {
+  const fields: {
+    modelName?: string;
+    maxCostUsd?: number;
+    maxToolRounds?: number;
+    serviceTier?: ServiceTier;
+  } = {};
+  if (modelName.trim() !== "") fields.modelName = modelName.trim();
+  if (maxCostUsd > 0) fields.maxCostUsd = maxCostUsd;
+  if (maxToolRounds > 0) fields.maxToolRounds = maxToolRounds;
+  // Only an active fast choice is carried — an untouched toggle stays
+  // absent, preserving the unspecified-vs-explicit ledger distinction (#357).
+  if (serviceTier === "fast") fields.serviceTier = toProtoServiceTier(serviceTier);
+
+  return Object.keys(fields).length > 0
+    ? create(RunConfigSchema, fields)
+    : undefined;
+}
+
+/** Mirrors the server's constraint so the editor rejects bad input instantly. */
+function validateMessage(value: string): string | null {
+  if (!value.trim()) {
+    return "Message is required — the agent receives it on every fire.";
+  }
+  if (value.length > MESSAGE_MAX_LEN) {
+    return `Message must be at most ${MESSAGE_MAX_LEN} characters.`;
+  }
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// Inline-edit chrome shared by the bespoke editors above
+// ---------------------------------------------------------------------------
+
+const editorLabelClasses = "block text-xs font-medium text-foreground";
+
+const editorInputClasses = cn(
+  "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground",
+  "placeholder:text-muted-foreground",
+  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+  "disabled:pointer-events-none disabled:opacity-50",
+);
+
+/** Read-mode click target with the family's hover pencil. */
+function InlineReadButton({
+  onEdit,
+  ariaLabel,
+  children,
+}: {
+  readonly onEdit: () => void;
+  readonly ariaLabel: string;
+  readonly children: React.ReactNode;
+}) {
+  return (
+    <div className="group/inline-edit">
+      <button
+        type="button"
+        onClick={onEdit}
+        aria-label={ariaLabel}
+        className={cn(
+          "-mx-2 w-full rounded-md px-2 py-1.5 text-left transition-colors",
+          "hover:bg-accent-hover cursor-pointer",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+        )}
+      >
+        <div className="flex items-start justify-between gap-2">
+          <div className="min-w-0 flex-1">{children}</div>
+          <PencilIcon className="mt-0.5 size-3 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/inline-edit:opacity-100" />
+        </div>
+      </button>
+    </div>
+  );
+}
+
+/** Save/Cancel footer with the field-attributed error line. */
+function InlineEditActions({
+  onCancel,
+  onSave,
+  isSaving,
+  canSave,
+  error,
+}: {
+  readonly onCancel: () => void;
+  readonly onSave: () => void;
+  readonly isSaving: boolean;
+  readonly canSave: boolean;
+  readonly error?: string;
+}) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div className="flex items-center justify-end gap-1.5">
+        <button
+          type="button"
+          onClick={onCancel}
+          disabled={isSaving}
+          className={cn(
+            "rounded-md px-2.5 py-1 text-xs font-medium",
+            "border border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground",
+            "disabled:opacity-50",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          )}
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          onClick={onSave}
+          disabled={!canSave || isSaving}
+          className={cn(
+            "inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium",
+            "bg-primary text-primary-foreground hover:bg-primary-hover",
+            "disabled:pointer-events-none disabled:opacity-50",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          )}
+        >
+          {isSaving && <SpinnerIcon />}
+          Save
+        </button>
+      </div>
+      {error && (
+        <p className="text-xs text-destructive" role="alert">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Detail rows and references
 // ---------------------------------------------------------------------------
@@ -458,6 +1345,152 @@ function DetailRow({
   );
 }
 
+/** The bound environment references, or the em-dash when there are none. */
+function EnvironmentRefList({
+  refs,
+}: {
+  readonly refs: readonly { org: string; slug: string }[];
+}) {
+  if (refs.length === 0) {
+    return <span className="text-sm text-muted-foreground">—</span>;
+  }
+  return (
+    <ul className="flex flex-col gap-0.5">
+      {refs.map((ref, i) => (
+        <li
+          key={`${ref.org}/${ref.slug}-${i}`}
+          className="font-mono text-xs text-foreground"
+        >
+          {ref.org ? `${ref.org}/${ref.slug}` : ref.slug}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Failure streak — status.consecutive_failures, explained
+// ---------------------------------------------------------------------------
+
+/**
+ * The platform's failure streak: how many SCHEDULED runs in a row ended
+ * badly. The server increments it per failed cron fire, resets it on a
+ * successful run (or Resume), and auto-pauses the schedule when the
+ * streak crosses its threshold. Manual "Run now" fires never count.
+ *
+ * The threshold itself is server configuration not exposed through the
+ * API, so the copy stays qualitative — a hardcoded "of 5" here could
+ * silently drift from what the platform actually enforces.
+ */
+function FailureStreak({ count }: { readonly count: number }) {
+  if (count === 0) {
+    return <span className="text-sm text-foreground">0</span>;
+  }
+  return (
+    <div className="flex flex-col gap-0.5">
+      <span className="text-sm font-medium text-warning">
+        {count} consecutive failed {count === 1 ? "run" : "runs"}
+      </span>
+      <p className="text-xs text-muted-foreground">
+        Failed scheduled runs raise this streak; too many in a row and the
+        platform pauses the schedule automatically. One successful run
+        resets it to 0. Manual runs never count.
+      </p>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// The invocation's run shape — engine+model, budget, workspace summaries
+// ---------------------------------------------------------------------------
+
+/** "Cursor · composer-2.5", either half falling back to the platform default. */
+function EngineModelSummary({
+  invocation,
+}: {
+  readonly invocation: AgentInvocation | undefined;
+}) {
+  const harness = invocation?.harness ?? Harness.UNSPECIFIED;
+  const modelName = invocation?.runConfig?.modelName ?? "";
+
+  if (harness === Harness.UNSPECIFIED && modelName === "") {
+    return (
+      <span className="text-sm text-muted-foreground">Platform default</span>
+    );
+  }
+
+  const parts: string[] = [];
+  if (harness !== Harness.UNSPECIFIED) {
+    parts.push(HARNESS_META[fromProtoHarness(harness)].label);
+  }
+  parts.push(modelName !== "" ? modelName : "platform-default model");
+  if (invocation?.runConfig?.serviceTier === ServiceTier.FAST) {
+    parts.push("Fast tier");
+  }
+  return <span className="text-sm text-foreground">{parts.join(" · ")}</span>;
+}
+
+/** The per-run cost cap, plus the API-only tool-round bound when set. */
+function BudgetSummary({
+  config,
+}: {
+  readonly config: RunConfig | undefined;
+}) {
+  const maxCostUsd = config?.maxCostUsd ?? 0;
+  const maxToolRounds = config?.maxToolRounds ?? 0;
+
+  return (
+    <div className="flex flex-col gap-0.5">
+      {maxCostUsd > 0 ? (
+        <span className="text-sm text-foreground">
+          ≤ ${maxCostUsd.toFixed(2)} per run
+        </span>
+      ) : (
+        <span className="text-sm text-muted-foreground">Platform default</span>
+      )}
+      {/* Reachable through the API only (DD-018 D-5) — rendered when
+          set so nothing the spec stores is hidden. */}
+      {maxToolRounds > 0 && (
+        <span className="text-xs text-muted-foreground">
+          ≤ {maxToolRounds} tool rounds
+        </span>
+      )}
+    </div>
+  );
+}
+
+/** The git workspace each fire clones, or the em-dash when none. */
+function WorkspaceSummary({
+  entries,
+}: {
+  readonly entries: readonly WorkspaceEntry[];
+}) {
+  if (entries.length === 0) {
+    return <span className="text-sm text-muted-foreground">—</span>;
+  }
+  return (
+    <ul className="flex flex-col gap-0.5">
+      {entries.map((entry, i) => {
+        const git =
+          entry.source?.source?.case === "gitRepo"
+            ? entry.source.source.value
+            : undefined;
+        return (
+          <li key={`${entry.name}-${i}`} className="text-xs text-foreground">
+            <span className="font-medium">{entry.name}</span>
+            {git?.url && (
+              <span className="ml-1.5 font-mono text-muted-foreground">
+                {git.url}
+                {git.branch ? `@${git.branch}` : ""}
+              </span>
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
 function ReferenceLink({
   label,
   onNavigate,
@@ -581,3 +1614,38 @@ function WarningIcon({ className }: { readonly className?: string }) {
     </svg>
   );
 }
+
+function PencilIcon({ className }: { readonly className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M11.5 1.5a2.121 2.121 0 0 1 3 3L5 14l-4 1 1-4Z" />
+    </svg>
+  );
+}
+
+function SpinnerIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      className="animate-spin"
+      aria-hidden="true"
+    >
+      <path d="M8 2a6 6 0 1 0 6 6" />
+    </svg>
+  );
+}