@stigmer/react 1.0.3 → 2.0.0

package/src/workflow/WorkflowDetailView.tsx

@@ -4,23 +4,43 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import type { Workflow } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/api_pb";
+import type { WorkflowInstance } from "@stigmer/protos/ai/stigmer/agentic/workflowinstance/v1/api_pb";
+import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
 import { ValidationState } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/serverless/validation_pb";
+import type { WorkflowInput } from "@stigmer/sdk";
 import { useWorkflow } from "./useWorkflow";
-import { useWorkflowInstances } from "./useWorkflowInstances";
+import { useUpdateWorkflow } from "./useUpdateWorkflow";
+import { workflowToInput } from "./internal/workflowToInput";
 import { useWorkflowExecutionList } from "./useWorkflowExecutionList";
-import { WorkflowTaskList } from "./WorkflowTaskList";
-import { WorkflowExecutionPhaseBadge } from "./WorkflowExecutionPhaseBadge";
+import { useWorkflowDashboardSummary } from "./useWorkflowDashboardSummary";
+import { WorkflowOverviewGraph } from "./WorkflowOverviewGraph";
+import { WorkflowGraphFullscreenDialog } from "./WorkflowGraphFullscreenDialog";
+import { WorkflowOverviewSummary } from "./WorkflowOverviewSummary";
+import { WorkflowExplainDialog } from "./WorkflowExplainDialog";
+import { serializeWorkflowYaml } from "./serialize-workflow-yaml";
+import { WorkflowExecutionHistory } from "./execution-history/WorkflowExecutionHistory";
+import { WorkflowInstanceList } from "./instance/WorkflowInstanceList";
+import { WorkflowVersionsTab } from "./WorkflowVersionsTab";
+import { useWorkflowVersions } from "./useWorkflowVersions";
 import { ErrorMessage } from "../error/ErrorMessage";
+import { VisibilityToggle } from "../library/VisibilityToggle";
+import { formatDurationSec } from "./format-utils";
+import { PermissionGate } from "../iam-policy/PermissionGate";
 import { ResourceDetailShell } from "../resource-detail/ResourceDetailShell";
 import { Section } from "../resource-detail/Section";
 import { useDetailTabs } from "../resource-detail/useDetailTabs";
+import { InlineEditTextarea } from "../inline-edit/InlineEditTextarea";
+import { InlineEditKeyValue } from "../inline-edit/InlineEditKeyValue";
+import type { KeyValueRow } from "../inline-edit/types";
 import type { AdditionalTab, DetailAction, ResourceHeaderMeta } from "../resource-detail/types";
 import type { TabItem } from "../tabs/Tabs";
 
 const OVERVIEW_TAB: TabItem = { id: "overview", label: "Overview" };
-const TASKS_TAB: TabItem = { id: "tasks", label: "Tasks" };
 const INSTANCES_TAB: TabItem = { id: "instances", label: "Instances" };
 const EXECUTIONS_TAB: TabItem = { id: "executions", label: "Executions" };
+const VERSIONS_TAB: TabItem = { id: "versions", label: "Versions" };
+
+const DESCRIPTION_COLLAPSED_HEIGHT = "8rem";
 
 /** Props for {@link WorkflowDetailView}. */
 export interface WorkflowDetailViewProps {
@@ -33,6 +53,14 @@ export interface WorkflowDetailViewProps {
    * Provides the resource display name for breadcrumbs, document titles, etc.
    */
   readonly onResourceLoad?: (meta: { name: string; id: string }) => void;
+  /**
+   * Called when the user toggles visibility via the inline control.
+   * When provided, the header renders an interactive
+   * {@link VisibilityToggle} instead of a read-only badge.
+   */
+  readonly onVisibilityChange?: (v: ApiResourceVisibility) => void;
+  /** `true` while a visibility update RPC is in flight. */
+  readonly isVisibilityPending?: boolean;
   /**
    * Primary action rendered as a visible button in the header area.
    */
@@ -56,6 +84,53 @@ export interface WorkflowDetailViewProps {
    * Receives the execution ID — use for navigation to the execution viewer.
    */
   readonly onExecutionClick?: (executionId: string) => void;
+  /**
+   * Called when the user clicks "Create Instance" in the Instances tab.
+   * Opens the create instance dialog.
+   */
+  readonly onCreateInstanceClick?: () => void;
+  /**
+   * Called when the user clicks an instance row in the Instances tab.
+   */
+  readonly onInstanceClick?: (instance: WorkflowInstance) => void;
+  /**
+   * Called when the user clicks "Run" on a specific instance.
+   */
+  readonly onInstanceRunClick?: (instance: WorkflowInstance) => void;
+  /**
+   * Called when the user clicks "Delete" on a specific instance.
+   */
+  readonly onInstanceDeleteClick?: (instance: WorkflowInstance) => void;
+  /**
+   * Increment this value to trigger a refetch of the instance list.
+   * Useful after externally creating or deleting an instance.
+   */
+  readonly instancesRefreshKey?: number;
+  /**
+   * When `true`, description and environment variables become click-to-edit.
+   * Each field saves independently via `stigmer.workflow.update()`.
+   * @default false
+   */
+  readonly editable?: boolean;
+  /**
+   * Called after a successful inline field save with the updated workflow.
+   */
+  readonly onResourceUpdated?: (workflow: Workflow) => void;
+  /**
+   * Called when the user clicks "Open in editor" from the overview graph
+   * node popover. Receives the task name. Wire this to switch to the
+   * editor tab and optionally select the node.
+   *
+   * @since T12 (Overview Page Redesign)
+   */
+  readonly onOpenInEditor?: (taskName: string) => void;
+  /**
+   * Called when the user clicks "View latest run" in the overview quick
+   * actions. Receives the execution ID of the most recent execution.
+   *
+   * @since T12 (Overview Page Redesign)
+   */
+  readonly onViewLatestRun?: (executionId: string) => void;
   /** Additional CSS classes for the root container. */
   readonly className?: string;
 }
@@ -66,8 +141,7 @@ export interface WorkflowDetailViewProps {
  * Fetches the workflow via {@link useWorkflow} internally and renders
  * its full specification inside a {@link ResourceDetailShell}:
  *
- * - **Overview**: Description, document metadata, budget summary, env vars
- * - **Tasks**: Task list with kind icons and sequential flow
+ * - **Overview**: Description, budget, env vars, task flow DAG, document metadata
  * - **Instances**: Environment-bound deployments (embedded, not standalone)
  * - **Executions**: Recent executions with phase badges and timing
  *
@@ -84,6 +158,8 @@ export function WorkflowDetailView({
   org,
   slug,
   onResourceLoad,
+  onVisibilityChange,
+  isVisibilityPending,
   primaryAction,
   actions,
   additionalTabs,
@@ -91,13 +167,56 @@ export function WorkflowDetailView({
   onTabChange,
   defaultTab,
   onExecutionClick,
+  onCreateInstanceClick,
+  onInstanceClick,
+  onInstanceRunClick,
+  onInstanceDeleteClick,
+  instancesRefreshKey,
+  editable = false,
+  onResourceUpdated,
+  onOpenInEditor,
+  onViewLatestRun,
   className,
 }: WorkflowDetailViewProps) {
   const { workflow, isLoading, error, refetch } = useWorkflow(org, slug);
+  const { update, isUpdating } = useUpdateWorkflow();
+  const { versions } = useWorkflowVersions(
+    isLoading ? null : org,
+    isLoading ? null : slug,
+  );
+
+  const saveField = useCallback(
+    async <K extends keyof WorkflowInput>(
+      field: K,
+      value: WorkflowInput[K],
+    ): Promise<boolean> => {
+      if (!workflow) return false;
+      const input = workflowToInput(workflow);
+      (input as unknown as Record<string, unknown>)[field] = value;
+      try {
+        const updated = await update(input);
+        onResourceUpdated?.(updated);
+        refetch();
+        return true;
+      } catch {
+        return false;
+      }
+    },
+    [workflow, update, onResourceUpdated, refetch],
+  );
 
+  const versionCount = versions.length;
   const builtInTabs = useMemo<readonly TabItem[]>(
-    () => [OVERVIEW_TAB, TASKS_TAB, INSTANCES_TAB, EXECUTIONS_TAB],
-    [],
+    () => [
+      OVERVIEW_TAB,
+      INSTANCES_TAB,
+      EXECUTIONS_TAB,
+      {
+        ...VERSIONS_TAB,
+        ...(versionCount > 0 && { badge: versionCount }),
+      },
+    ],
+    [versionCount],
   );
 
   const {
@@ -139,7 +258,8 @@ export function WorkflowDetailView({
     id: meta?.id || "",
     org: meta?.org,
     slug: meta?.slug,
-    description: spec?.description,
+    description: undefined,
+    icon: <WorkflowIcon className="size-6 text-muted-foreground" />,
     createdAt: specAudit?.createdAt ? timestampDate(specAudit.createdAt) : null,
     updatedAt: specAudit?.updatedAt ? timestampDate(specAudit.updatedAt) : null,
   };
@@ -149,22 +269,73 @@ export function WorkflowDetailView({
     <ValidationIndicator state={validationState} />
   ) : undefined;
 
+  const visibilityBadge =
+    meta?.visibility === ApiResourceVisibility.visibility_public ? (
+      <span className="shrink-0 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+        Public
+      </span>
+    ) : undefined;
+
+  const visibilityControl =
+    onVisibilityChange && meta ? (
+      <PermissionGate
+        resource={{ kind: "workflow", id: meta.id }}
+        relation="can_edit"
+        fallback={visibilityBadge}
+      >
+        <VisibilityToggle
+          visibility={meta.visibility}
+          onVisibilityChange={onVisibilityChange}
+          isPending={isVisibilityPending}
+        />
+      </PermissionGate>
+    ) : visibilityBadge;
+
   let tabContent: React.ReactNode;
   if (activeAdditionalTab) {
     tabContent = activeAdditionalTab.content;
-  } else if (effectiveActiveTab === "tasks") {
-    tabContent = <TasksTab tasks={spec?.tasks ?? []} />;
   } else if (effectiveActiveTab === "instances") {
-    tabContent = <InstancesTab workflowId={meta?.id} />;
+    tabContent = (
+      <WorkflowInstanceList
+        workflowId={meta?.id ?? ""}
+        defaultInstanceId={workflow?.status?.defaultInstanceId}
+        org={org}
+        onCreateClick={onCreateInstanceClick}
+        onInstanceClick={onInstanceClick}
+        onRunClick={onInstanceRunClick}
+        onDeleteClick={onInstanceDeleteClick}
+        refreshKey={instancesRefreshKey}
+      />
+    );
   } else if (effectiveActiveTab === "executions") {
-    tabContent = <ExecutionsTab workflowId={meta?.id} onExecutionClick={onExecutionClick} />;
+    tabContent = (
+      <WorkflowExecutionHistory
+        org={org}
+        workflowId={meta?.id}
+        onExecutionClick={onExecutionClick}
+      />
+    );
+  } else if (effectiveActiveTab === "versions") {
+    tabContent = <WorkflowVersionsTab workflow={workflow} />;
   } else {
-    tabContent = <OverviewTab workflow={workflow} />;
+    tabContent = (
+      <OverviewTab
+        workflow={workflow}
+        org={org}
+        editable={editable}
+        isSaving={isUpdating}
+        saveField={saveField}
+        onOpenInEditor={onOpenInEditor}
+        onViewLatestRun={onViewLatestRun}
+        onExecutionClick={onExecutionClick}
+      />
+    );
   }
 
   return (
     <ResourceDetailShell
       header={headerMeta}
+      visibilityControl={visibilityControl}
       headerMetaExtra={headerMetaExtra}
       primaryAction={primaryAction}
       actions={actions}
@@ -183,30 +354,186 @@ export function WorkflowDetailView({
 // Tab content components
 // ---------------------------------------------------------------------------
 
-function OverviewTab({ workflow }: { readonly workflow: Workflow }) {
+function OverviewTab({
+  workflow,
+  org,
+  editable,
+  isSaving,
+  saveField,
+  onOpenInEditor,
+  onViewLatestRun,
+  onExecutionClick,
+}: {
+  readonly workflow: Workflow;
+  readonly org: string;
+  readonly editable?: boolean;
+  readonly isSaving?: boolean;
+  readonly saveField?: <K extends keyof WorkflowInput>(
+    field: K,
+    value: WorkflowInput[K],
+  ) => Promise<boolean>;
+  readonly onOpenInEditor?: (taskName: string) => void;
+  readonly onViewLatestRun?: (executionId: string) => void;
+  readonly onExecutionClick?: (executionId: string) => void;
+}) {
   const spec = workflow.spec;
   const doc = spec?.document;
   const budget = spec?.budget;
   const envEntries = spec?.env ? Object.entries(spec.env) : [];
 
+  const showDescription = editable || !!spec?.description;
+  const showEnv = editable || envEntries.length > 0;
+
+  const [envEditing, setEnvEditing] = useState(false);
+  const [showExplain, setShowExplain] = useState(false);
+  const [graphExpanded, setGraphExpanded] = useState(false);
+
+  const workflowYaml = useMemo(() => {
+    try {
+      return serializeWorkflowYaml(workflow);
+    } catch {
+      return "";
+    }
+  }, [workflow]);
+
+  const workflowId = workflow.metadata?.id;
+  const { summary, isLoading: summaryLoading } = useWorkflowDashboardSummary({
+    org,
+    workflowId: workflowId || undefined,
+  });
+
+  const { executions } = useWorkflowExecutionList({
+    workflowId,
+    pageSize: 1,
+  });
+  const latestExecId = executions[0]?.metadata?.id;
+
+  const handleEnvSave = useCallback(
+    async (rows: KeyValueRow[]) => {
+      const env: Record<string, { isSecret?: boolean; description?: string; optional?: boolean }> = {};
+      for (const row of rows) {
+        if (row.key.trim()) {
+          env[row.key.trim()] = {
+            isSecret: row.isSecret || undefined,
+            description: row.description || undefined,
+            optional: row.optional || undefined,
+          };
+        }
+      }
+      return saveField?.("env", Object.keys(env).length > 0 ? env : undefined) ?? false;
+    },
+    [saveField],
+  );
+
+  const envRows: KeyValueRow[] = useMemo(
+    () =>
+      Object.entries(spec?.env ?? {})
+        .sort(([a], [b]) => a.localeCompare(b))
+        .map(([key, decl]) => ({
+          key,
+          value: "",
+          isSecret: decl.isSecret,
+          description: decl.description,
+          optional: decl.optional,
+        })),
+    [spec?.env],
+  );
+
   return (
     <div className="flex flex-col gap-6">
-      {/* Document metadata */}
-      {doc && (
-        <Section title="Document">
-          <div className="divide-y divide-border">
-            <MetadataRow label="DSL Version" value={doc.dsl} />
-            <MetadataRow label="Namespace" value={doc.namespace} />
-            <MetadataRow label="Name" value={doc.name} />
-            <MetadataRow label="Version" value={doc.version} />
-            {doc.description && (
-              <MetadataRow label="Description" value={doc.description} />
-            )}
-          </div>
+      {/* Summary stat cards */}
+      <WorkflowOverviewSummary
+        summary={summary}
+        isLoading={summaryLoading}
+      />
+
+      {/* Interactive workflow graph */}
+      {(spec?.tasks?.length ?? 0) > 0 && (
+        <>
+          <Section
+            title="Task Flow"
+            count={spec?.tasks?.length}
+            headerActions={
+              <ExpandButton onClick={() => setGraphExpanded(true)} />
+            }
+          >
+            <div className="h-[28rem]">
+              <WorkflowOverviewGraph
+                workflow={workflow}
+                onOpenInEditor={onOpenInEditor}
+                className="h-full w-full rounded-sm bg-[var(--stgm-muted-subtle,#fafafa)]"
+              />
+            </div>
+          </Section>
+          <WorkflowGraphFullscreenDialog
+            workflow={workflow}
+            open={graphExpanded}
+            onClose={() => setGraphExpanded(false)}
+            onOpenInEditor={onOpenInEditor}
+          />
+        </>
+      )}
+
+      {/* Quick action links */}
+      <div className="flex flex-wrap items-center gap-3">
+        {onOpenInEditor && (
+          <QuickActionButton
+            label="Edit workflow"
+            onClick={() => onOpenInEditor("")}
+            icon={<EditIcon />}
+          />
+        )}
+        {latestExecId && onViewLatestRun && (
+          <QuickActionButton
+            label="View latest run"
+            onClick={() => onViewLatestRun(latestExecId)}
+            icon={<PlayIcon />}
+          />
+        )}
+        {latestExecId && !onViewLatestRun && onExecutionClick && (
+          <QuickActionButton
+            label="View latest run"
+            onClick={() => onExecutionClick(latestExecId)}
+            icon={<PlayIcon />}
+          />
+        )}
+        {workflowYaml && (
+          <QuickActionButton
+            label="What does this workflow do?"
+            onClick={() => setShowExplain(true)}
+            icon={<ExplainQuestionIcon />}
+          />
+        )}
+      </div>
+
+      {/* Explain dialog */}
+      {workflowYaml && (
+        <WorkflowExplainDialog
+          open={showExplain}
+          onOpenChange={setShowExplain}
+          org={org}
+          currentYaml={workflowYaml}
+        />
+      )}
+
+      {showDescription && (
+        <Section title="Description">
+          {editable ? (
+            <div className="max-h-20 overflow-y-auto p-3">
+              <InlineEditTextarea
+                value={spec?.description || ""}
+                onSave={(v) => saveField?.("description", v || undefined) ?? Promise.resolve(false)}
+                isSaving={isSaving}
+                placeholder="Add a description"
+                minRows={2}
+              />
+            </div>
+          ) : (
+            <DescriptionContent text={spec?.description ?? ""} />
+          )}
         </Section>
       )}
 
-      {/* Budget summary */}
       {budget && hasBudget(budget) && (
         <Section title="Budget">
           <div className="divide-y divide-border">
@@ -225,197 +552,190 @@ function OverviewTab({ workflow }: { readonly workflow: Workflow }) {
             {budget.maxDurationSeconds > 0 && (
               <MetadataRow
                 label="Max Duration"
-                value={formatDuration(budget.maxDurationSeconds)}
+                value={formatDurationSec(budget.maxDurationSeconds)}
               />
             )}
           </div>
         </Section>
       )}
 
-      {/* Environment variable declarations */}
-      {envEntries.length > 0 && (
-        <Section title="Environment Variables" count={envEntries.length}>
-          <div className="divide-y divide-border">
-            {envEntries.map(([key, decl]) => (
-              <div key={key} className="flex items-center gap-3 px-4 py-2.5">
-                <code className="shrink-0 text-xs font-medium text-foreground">
-                  {key}
-                </code>
-                {!decl.optional && (
-                  <span className="shrink-0 rounded bg-destructive/10 px-1 py-0.5 text-[10px] font-medium text-destructive">
-                    required
-                  </span>
-                )}
-                {decl.description && (
-                  <span className="truncate text-xs text-muted-foreground">
-                    {decl.description}
-                  </span>
-                )}
-              </div>
-            ))}
-          </div>
+      {showEnv && (
+        <Section
+          title="Environment Variables"
+          count={envEntries.length}
+          onEdit={editable ? () => setEnvEditing((v) => !v) : undefined}
+        >
+          {editable ? (
+            <InlineEditKeyValue
+              value={envRows}
+              onSave={handleEnvSave}
+              isSaving={isSaving}
+              editing={envEditing}
+              onEditingChange={setEnvEditing}
+              showSecretToggle
+              showOptionalToggle
+              showDescription
+              keyLabel="Variable name"
+            />
+          ) : (
+            <div className="divide-y divide-border">
+              {envEntries.map(([key, decl]) => (
+                <div key={key} className="flex items-center gap-3 px-4 py-2.5">
+                  <code className="shrink-0 text-xs font-medium text-foreground">
+                    {key}
+                  </code>
+                  {!decl.optional && (
+                    <span className="shrink-0 rounded bg-destructive/10 px-1 py-0.5 text-[10px] font-medium text-destructive">
+                      required
+                    </span>
+                  )}
+                  {decl.description && (
+                    <span className="truncate text-xs text-muted-foreground">
+                      {decl.description}
+                    </span>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
         </Section>
       )}
 
-      {/* Tasks summary */}
-      <Section title="Tasks" count={spec?.tasks?.length}>
-        <div className="p-4">
-          <WorkflowTaskList tasks={spec?.tasks ?? []} />
-        </div>
-      </Section>
+      {doc && (
+        <Section title="Document">
+          <div className="flex flex-wrap gap-x-6 gap-y-1 px-4 py-2.5 text-xs text-muted-foreground">
+            <span>DSL {doc.dsl}</span>
+            <span>{doc.namespace}</span>
+            <span>v{doc.version}</span>
+          </div>
+        </Section>
+      )}
     </div>
   );
 }
 
-function TasksTab({
-  tasks,
+function QuickActionButton({
+  label,
+  onClick,
+  icon,
 }: {
-  readonly tasks: readonly import("@stigmer/protos/ai/stigmer/agentic/workflow/v1/spec_pb").WorkflowTask[];
+  readonly label: string;
+  readonly onClick: () => void;
+  readonly icon: React.ReactNode;
 }) {
   return (
-    <div className="rounded-lg border border-border p-4">
-      <WorkflowTaskList tasks={tasks} />
-    </div>
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
+        "border border-[var(--stgm-border,#d4d4d8)] bg-[var(--stgm-background,#fff)]",
+        "text-[var(--stgm-foreground,#1a1a2e)]",
+        "hover:bg-[var(--stgm-accent,#f5f5f5)]",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stgm-ring,#6366f1)]",
+        "transition-colors",
+      )}
+    >
+      {icon}
+      {label}
+    </button>
   );
 }
 
-function InstancesTab({ workflowId }: { readonly workflowId?: string }) {
-  const { instances, isLoading, error } = useWorkflowInstances(workflowId);
-
-  if (isLoading) {
-    return <TabLoadingSkeleton />;
-  }
-
-  if (error) {
-    return (
-      <div className="py-8 text-center text-sm text-destructive">
-        Failed to load instances
-      </div>
-    );
-  }
-
-  if (instances.length === 0) {
-    return (
-      <div className="py-8 text-center text-sm text-muted-foreground">
-        No instances found. A default instance is created automatically with each workflow.
-      </div>
-    );
-  }
+function EditIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M11.5 1.5l3 3L5 14H2v-3L11.5 1.5z" />
+    </svg>
+  );
+}
 
+function PlayIcon() {
   return (
-    <div className="overflow-hidden rounded-lg border border-border">
-      <table className="w-full text-sm">
-        <thead>
-          <tr className="border-b border-border bg-muted/50">
-            <th className="px-4 py-2 text-left font-medium text-muted-foreground">Name</th>
-            <th className="px-4 py-2 text-left font-medium text-muted-foreground">ID</th>
-          </tr>
-        </thead>
-        <tbody className="divide-y divide-border">
-          {instances.map((inst) => (
-            <tr key={inst.metadata?.id} className="hover:bg-muted/30 transition-colors">
-              <td className="px-4 py-2.5 font-medium text-foreground">
-                {inst.metadata?.name || inst.metadata?.slug || "—"}
-              </td>
-              <td className="px-4 py-2.5">
-                <code className="text-xs text-muted-foreground">
-                  {inst.metadata?.id || "—"}
-                </code>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <polygon points="5,3 13,8 5,13" />
+    </svg>
   );
 }
 
-function ExecutionsTab({
-  workflowId,
-  onExecutionClick,
-}: {
-  readonly workflowId?: string;
-  readonly onExecutionClick?: (executionId: string) => void;
-}) {
-  const { executions, isLoading, error } = useWorkflowExecutionList({
-    workflowId,
-    pageSize: 10,
-  });
+function ExplainQuestionIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <circle cx="8" cy="8" r="6.5" />
+      <path d="M6.5 6a1.5 1.5 0 1 1 1.5 1.5V9" />
+      <circle cx="8" cy="11.5" r="0.5" fill="currentColor" />
+    </svg>
+  );
+}
 
-  if (isLoading) {
-    return <TabLoadingSkeleton />;
-  }
+function ExpandButton({ onClick }: { readonly onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label="Expand task flow"
+      className={cn(
+        "inline-flex size-6 items-center justify-center rounded-md text-muted-foreground",
+        "hover:bg-accent-hover hover:text-foreground",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "transition-colors",
+      )}
+    >
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 16 16"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+      >
+        <polyline points="10,2 14,2 14,6" />
+        <polyline points="6,14 2,14 2,10" />
+        <line x1="14" y1="2" x2="9.5" y2="6.5" />
+        <line x1="2" y1="14" x2="6.5" y2="9.5" />
+      </svg>
+    </button>
+  );
+}
 
-  if (error) {
-    return (
-      <div className="py-8 text-center text-sm text-destructive">
-        Failed to load executions
-      </div>
-    );
-  }
+function DescriptionContent({ text }: { readonly text: string }) {
+  const [expanded, setExpanded] = useState(false);
+  const contentRef = useRef<HTMLPreElement>(null);
+  const [overflows, setOverflows] = useState(false);
 
-  if (executions.length === 0) {
-    return (
-      <div className="py-8 text-center text-sm text-muted-foreground">
-        No executions yet
-      </div>
-    );
-  }
+  useEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    setOverflows(el.scrollHeight > el.clientHeight);
+  }, [text]);
 
   return (
-    <div className="overflow-hidden rounded-lg border border-border">
-      <table className="w-full text-sm">
-        <thead>
-          <tr className="border-b border-border bg-muted/50">
-            <th className="px-4 py-2 text-left font-medium text-muted-foreground">Name</th>
-            <th className="px-4 py-2 text-left font-medium text-muted-foreground">Phase</th>
-            <th className="px-4 py-2 text-left font-medium text-muted-foreground">Started</th>
-          </tr>
-        </thead>
-        <tbody className="divide-y divide-border">
-          {executions.map((exec) => {
-            const execId = exec.metadata?.id;
-            const startedAt = exec.status?.audit?.specAudit?.createdAt;
-            const clickable = !!onExecutionClick && !!execId;
-            return (
-              <tr
-                key={execId}
-                onClick={clickable ? () => onExecutionClick(execId!) : undefined}
-                role={clickable ? "link" : undefined}
-                tabIndex={clickable ? 0 : undefined}
-                onKeyDown={
-                  clickable
-                    ? (e) => {
-                        if (e.key === "Enter" || e.key === " ") {
-                          e.preventDefault();
-                          onExecutionClick(execId!);
-                        }
-                      }
-                    : undefined
-                }
-                className={cn(
-                  "transition-colors hover:bg-muted/30",
-                  clickable && "cursor-pointer",
-                )}
-              >
-                <td className="px-4 py-2.5 font-medium text-foreground">
-                  {exec.metadata?.name || exec.metadata?.slug || "—"}
-                </td>
-                <td className="px-4 py-2.5">
-                  {exec.status?.phase != null ? (
-                    <WorkflowExecutionPhaseBadge phase={exec.status.phase} />
-                  ) : (
-                    <span className="text-xs text-muted-foreground">—</span>
-                  )}
-                </td>
-                <td className="px-4 py-2.5 text-xs text-muted-foreground">
-                  {startedAt ? timestampDate(startedAt).toLocaleString() : "—"}
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
+    <div className="relative p-3">
+      <pre
+        ref={contentRef}
+        className={cn(
+          "whitespace-pre-wrap break-words text-sm text-foreground font-sans overflow-y-auto transition-[max-height] duration-200",
+          !expanded && "overflow-hidden",
+        )}
+        style={{ maxHeight: expanded ? "none" : DESCRIPTION_COLLAPSED_HEIGHT }}
+      >
+        {text}
+      </pre>
+      {!expanded && overflows && (
+        <div className="pointer-events-none absolute inset-x-3 bottom-10 h-8 bg-gradient-to-t from-background to-transparent" />
+      )}
+      {overflows && (
+        <button
+          type="button"
+          onClick={() => setExpanded((v) => !v)}
+          className="mt-2 text-xs font-medium text-primary transition-colors hover:text-primary-muted"
+        >
+          {expanded ? "Show less" : "Show more"}
+        </button>
+      )}
     </div>
   );
 }
@@ -484,13 +804,6 @@ function hasBudget(budget: {
   );
 }
 
-function formatDuration(seconds: number): string {
-  if (seconds < 60) return `${seconds}s`;
-  if (seconds < 3600) return `${Math.floor(seconds / 60)}m`;
-  const hours = Math.floor(seconds / 3600);
-  const mins = Math.floor((seconds % 3600) / 60);
-  return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`;
-}
 
 // ---------------------------------------------------------------------------
 // Loading & empty states
@@ -521,7 +834,33 @@ function TabLoadingSkeleton() {
 function NotFoundState({ className }: { readonly className?: string }) {
   return (
     <div className={cn("flex flex-col items-center justify-center py-16", className)}>
-      <p className="text-sm text-muted-foreground">Workflow not found</p>
+      <WorkflowIcon className="size-10 text-muted-foreground-faint" />
+      <p className="mt-2 text-sm text-muted-foreground">Workflow not found</p>
+      <p className="text-xs text-muted-foreground-subtle">
+        This workflow doesn&apos;t exist or you don&apos;t have access to it.
+      </p>
     </div>
   );
 }
+
+// ---------------------------------------------------------------------------
+// Icons — inline SVGs following the SDK pattern (no icon library dependency)
+// ---------------------------------------------------------------------------
+
+function WorkflowIcon({ 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="M3 3h4v4H3zM9 9h4v4H9z" />
+      <path d="M7 5h2M5 7v2M11 7V5h-2" />
+    </svg>
+  );
+}