@shepai/cli 1.37.2 → 1.38.0

package/web/.next/standalone/src/presentation/web/components/common/tech-decisions-review/tech-decisions-drawer.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { ReviewDrawerShell } from '@/components/common/review-drawer-shell';
+import { TechDecisionsReview } from './tech-decisions-review';
+import type { TechDecisionsDrawerProps } from './tech-decisions-review-config';
+
+export function TechDecisionsDrawer({
+  open,
+  onClose,
+  featureName,
+  featureId,
+  repositoryPath,
+  branch,
+  specPath,
+  onDelete,
+  isDeleting,
+  ...reviewProps
+}: TechDecisionsDrawerProps) {
+  return (
+    <ReviewDrawerShell
+      open={open}
+      onClose={onClose}
+      featureName={featureName}
+      featureId={featureId}
+      repositoryPath={repositoryPath}
+      branch={branch}
+      specPath={specPath}
+      onDelete={onDelete}
+      isDeleting={isDeleting}
+    >
+      <TechDecisionsReview {...reviewProps} />
+    </ReviewDrawerShell>
+  );
+}

package/web/.next/standalone/src/presentation/web/components/common/tech-decisions-review/tech-decisions-review-config.ts

@@ -0,0 +1,42 @@
+import type { TechDecision } from '@shepai/core/domain/generated/output';
+
+export type { TechDecision };
+
+export interface TechDecisionsReviewData {
+  name: string;
+  summary: string;
+  decisions: TechDecision[];
+  technologies: string[];
+}
+
+export interface TechDecisionsReviewProps {
+  /** Tech decisions data from the research artifact */
+  data: TechDecisionsReviewData;
+  /** Chat refinement callback — sends user feedback to the agent */
+  onRefine: (text: string) => void;
+  /** Approve plan callback */
+  onApprove: () => void;
+  /** Controls disabled state during loading */
+  isProcessing?: boolean;
+}
+
+export interface TechDecisionsDrawerProps extends TechDecisionsReviewProps {
+  /** Whether the drawer is open */
+  open: boolean;
+  /** Callback when drawer should close */
+  onClose: () => void;
+  /** Feature name shown in drawer header */
+  featureName: string;
+  /** Feature ID shown below the name */
+  featureId?: string;
+  /** Absolute path to the repository on disk */
+  repositoryPath?: string;
+  /** Git branch name for this feature */
+  branch?: string;
+  /** Absolute path to the specs folder on disk */
+  specPath?: string;
+  /** Callback to delete the feature — shows delete button when provided */
+  onDelete?: (featureId: string) => void;
+  /** Whether a delete operation is in progress */
+  isDeleting?: boolean;
+}

package/web/.next/standalone/src/presentation/web/components/common/tech-decisions-review/tech-decisions-review.stories.tsx

@@ -0,0 +1,177 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { TechDecisionsReview } from './tech-decisions-review';
+import { TechDecisionsDrawer } from './tech-decisions-drawer';
+import type { TechDecisionsReviewData } from './tech-decisions-review-config';
+
+const mockData: TechDecisionsReviewData = {
+  name: 'Agent Executor Abstraction',
+  summary:
+    'Research into the best approach for abstracting agent executors to support multiple AI backends (Claude Code, Cursor, custom agents).',
+  technologies: ['TypeScript', 'tsyringe', 'LangGraph', 'Claude API'],
+  decisions: [
+    {
+      title: 'Agent Execution Framework',
+      chosen: 'LangGraph',
+      rejected: ['Custom state machine', 'Temporal.io', 'Step Functions'],
+      rationale:
+        'LangGraph provides built-in checkpointing, human-in-the-loop support, and integrates natively with LangChain. The custom state machine approach was too low-level and would require rebuilding features LangGraph offers out of the box.',
+    },
+    {
+      title: 'Dependency Injection',
+      chosen: 'tsyringe',
+      rejected: ['InversifyJS', 'TypeDI', 'Manual DI'],
+      rationale:
+        'tsyringe is lightweight, uses standard decorators, and has minimal overhead. InversifyJS was too complex for our needs, and manual DI would not scale well as the agent system grows.',
+    },
+    {
+      title: 'Inter-Process Communication',
+      chosen: 'Server-Sent Events (SSE)',
+      rejected: ['WebSockets', 'Long Polling', 'gRPC'],
+      rationale:
+        'SSE provides a simple one-way streaming protocol that fits our use case perfectly — the agent streams status updates to the UI. WebSockets would add unnecessary complexity for bidirectional communication we do not need.',
+    },
+    {
+      title: 'Configuration Storage',
+      chosen: 'SQLite',
+      rejected: ['JSON files', 'LevelDB', 'PostgreSQL'],
+      rationale:
+        'SQLite offers ACID transactions, SQL query support, and zero-config deployment. JSON files lack transactions and concurrent access support. PostgreSQL would be overkill for a local CLI tool.',
+    },
+  ],
+};
+
+/* ─── Standalone TechDecisionsReview ─── */
+
+const meta: Meta<typeof TechDecisionsReview> = {
+  title: 'Composed/TechDecisionsReview',
+  component: TechDecisionsReview,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ height: '600px', width: '400px', border: '1px solid var(--color-border)' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof TechDecisionsReview>;
+
+/** Default — scrollable list of decisions taken. */
+export const Default: Story = {
+  args: {
+    data: mockData,
+    onRefine: fn().mockName('onRefine'),
+    onApprove: fn().mockName('onApprove'),
+  },
+};
+
+/** Processing state — approve button disabled. */
+export const Processing: Story = {
+  args: {
+    data: mockData,
+    onApprove: fn().mockName('onApprove'),
+    isProcessing: true,
+  },
+};
+
+/** Single decision. */
+export const SingleDecision: Story = {
+  args: {
+    data: { ...mockData, decisions: [mockData.decisions[0]] },
+    onRefine: fn().mockName('onRefine'),
+    onApprove: fn().mockName('onApprove'),
+  },
+};
+
+/** No technologies listed. */
+export const NoTechnologies: Story = {
+  args: {
+    data: { ...mockData, technologies: [] },
+    onRefine: fn().mockName('onRefine'),
+    onApprove: fn().mockName('onApprove'),
+  },
+};
+
+/* ─── Drawer Variant ─── */
+
+type DrawerStory = StoryObj<typeof TechDecisionsDrawer>;
+
+const drawerMeta = {
+  title: 'Composed/TechDecisionsDrawer',
+  component: TechDecisionsDrawer,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+function DrawerTemplate(
+  props: Omit<React.ComponentProps<typeof TechDecisionsDrawer>, 'open' | 'onClose'>
+) {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <div style={{ height: '100vh', background: '#f8fafc', padding: '2rem' }}>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        style={{ padding: '8px 16px', border: '1px solid #ccc', borderRadius: '6px' }}
+      >
+        Open Drawer
+      </button>
+      <TechDecisionsDrawer {...props} open={open} onClose={() => setOpen(false)} />
+    </div>
+  );
+}
+
+/** Drawer with tech decisions list. */
+export const InDrawer: DrawerStory = {
+  ...drawerMeta,
+  render: () => (
+    <DrawerTemplate
+      featureName="Agent Executor Abstraction"
+      featureId="FEAT-099"
+      data={mockData}
+      onRefine={fn().mockName('onRefine')}
+      onApprove={fn().mockName('onApprove')}
+    />
+  ),
+};
+
+/** Drawer with delete button visible. */
+export const WithDeleteButton: DrawerStory = {
+  ...drawerMeta,
+  render: () => (
+    <DrawerTemplate
+      featureName="Agent Executor Abstraction"
+      featureId="FEAT-099"
+      data={mockData}
+      onRefine={fn().mockName('onRefine')}
+      onApprove={fn().mockName('onApprove')}
+      onDelete={fn().mockName('onDelete')}
+    />
+  ),
+};
+
+/** Drawer with delete in progress (button disabled). */
+export const DeletingState: DrawerStory = {
+  ...drawerMeta,
+  render: () => (
+    <DrawerTemplate
+      featureName="Agent Executor Abstraction"
+      featureId="FEAT-099"
+      data={mockData}
+      onRefine={fn().mockName('onRefine')}
+      onApprove={fn().mockName('onApprove')}
+      onDelete={fn().mockName('onDelete')}
+      isDeleting
+    />
+  ),
+};

package/web/.next/standalone/src/presentation/web/components/common/tech-decisions-review/tech-decisions-review.tsx

@@ -0,0 +1,188 @@
+'use client';
+
+import { useState } from 'react';
+import type { Components } from 'react-markdown';
+import Markdown from 'react-markdown';
+import { Check, ChevronRight, GitCompareArrows, Layers, Send } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import type { TechDecisionsReviewProps, TechDecision } from './tech-decisions-review-config';
+
+const markdownComponents: Components = {
+  p: ({ children }) => (
+    <p className="text-muted-foreground mb-2 text-xs leading-relaxed last:mb-0">{children}</p>
+  ),
+  strong: ({ children }) => <strong className="text-foreground font-semibold">{children}</strong>,
+  em: ({ children }) => <em className="italic">{children}</em>,
+  code: ({ children, className }) =>
+    className ? (
+      <code className={`${className} text-[11px]`}>{children}</code>
+    ) : (
+      <code className="bg-muted text-foreground rounded-md px-1.5 py-0.5 font-mono text-[11px]">
+        {children}
+      </code>
+    ),
+  pre: ({ children }) => (
+    <pre className="bg-muted my-2 overflow-x-auto rounded-lg border p-3">{children}</pre>
+  ),
+  ul: ({ children }) => (
+    <ul className="text-muted-foreground mb-2 list-disc space-y-1 pl-4 text-xs">{children}</ul>
+  ),
+  ol: ({ children }) => (
+    <ol className="text-muted-foreground mb-2 list-decimal space-y-1 pl-4 text-xs">{children}</ol>
+  ),
+  li: ({ children }) => <li className="leading-relaxed">{children}</li>,
+  a: ({ children, href }) => (
+    <a
+      href={href}
+      className="text-primary underline underline-offset-2"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {children}
+    </a>
+  ),
+};
+
+function DecisionCard({ decision, index }: { decision: TechDecision; index: number }) {
+  const [alternativesOpen, setAlternativesOpen] = useState(false);
+
+  return (
+    <div className="border-border rounded-lg border">
+      {/* Header: number + title + chosen badge */}
+      <div className="space-y-3 px-4 py-3">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex items-start gap-2.5">
+            <span className="bg-primary text-primary-foreground flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-bold">
+              {index + 1}
+            </span>
+            <div className="min-w-0">
+              <h3 className="text-foreground text-sm leading-tight font-semibold">
+                {decision.title}
+              </h3>
+              <p className="text-muted-foreground mt-0.5 text-xs">{decision.chosen}</p>
+            </div>
+          </div>
+          {'decisionName' in decision &&
+          (decision as unknown as { decisionName?: string }).decisionName ? (
+            <Badge variant="secondary" className="bg-primary/10 text-primary shrink-0">
+              {(decision as unknown as { decisionName: string }).decisionName}
+            </Badge>
+          ) : null}
+        </div>
+
+        {/* Rationale */}
+        {decision.rationale ? (
+          <Markdown components={markdownComponents}>{decision.rationale}</Markdown>
+        ) : null}
+      </div>
+
+      {/* Rejected alternatives (collapsed by default) */}
+      {decision.rejected.length > 0 ? (
+        <div className="border-border border-t">
+          <button
+            type="button"
+            onClick={() => setAlternativesOpen((prev) => !prev)}
+            className="text-muted-foreground hover:bg-muted/50 flex w-full items-center gap-1.5 px-4 py-3 text-xs font-medium transition-colors"
+          >
+            <ChevronRight
+              className={`h-3.5 w-3.5 transition-transform ${alternativesOpen ? 'rotate-90' : ''}`}
+            />
+            <Layers className="h-3.5 w-3.5" />
+            Other Options Considered ({decision.rejected.length})
+          </button>
+          {alternativesOpen ? (
+            <div className="space-y-1.5 px-4 pb-3">
+              {decision.rejected.map((alt) => (
+                <div key={alt} className="bg-primary/5 rounded-md px-3 py-2">
+                  <span className="text-foreground text-xs">{alt}</span>
+                </div>
+              ))}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export function TechDecisionsReview({
+  data,
+  onRefine,
+  onApprove,
+  isProcessing = false,
+}: TechDecisionsReviewProps) {
+  const { summary, decisions } = data;
+  const [chatInput, setChatInput] = useState('');
+
+  function handleSubmit(e: { preventDefault: () => void }) {
+    e.preventDefault();
+    const text = chatInput.trim();
+    if (!text) return;
+    onRefine(text);
+    setChatInput('');
+  }
+
+  if (decisions.length === 0) return null;
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="flex-1 space-y-4 overflow-y-auto p-4">
+        {/* Header */}
+        <div className="flex items-start gap-3">
+          <div className="mt-1.5 h-2.5 w-2.5 shrink-0 rounded-full bg-blue-500" />
+          <div className="flex-1">
+            <h2 className="text-foreground text-sm font-bold">
+              Technical Implementation Plan Review
+            </h2>
+            {summary ? (
+              <p className="text-muted-foreground mt-1 text-xs leading-relaxed">{summary}</p>
+            ) : null}
+          </div>
+        </div>
+
+        {/* Section heading */}
+        <div className="flex items-center gap-2 pt-1">
+          <GitCompareArrows className="text-primary h-4 w-4" />
+          <h3 className="text-foreground text-sm font-bold">Technical Decisions</h3>
+        </div>
+
+        {/* Decision cards */}
+        {decisions.map((decision, i) => (
+          <DecisionCard key={decision.title} decision={decision} index={i} />
+        ))}
+      </div>
+
+      {/* Action bar: chat + approve */}
+      <div className="border-border shrink-0 border-t">
+        <form onSubmit={handleSubmit} className="flex items-center gap-2 p-4 pb-2">
+          <Input
+            type="text"
+            placeholder="Ask AI to revise the plan..."
+            aria-label="Ask AI to revise the plan"
+            disabled={isProcessing}
+            value={chatInput}
+            onChange={(e) => setChatInput(e.target.value)}
+            className="flex-1"
+          />
+          <Button
+            type="submit"
+            variant="secondary"
+            size="icon"
+            aria-label="Send"
+            disabled={isProcessing}
+          >
+            <Send />
+          </Button>
+        </form>
+        <div className="px-4 pt-2 pb-4">
+          <Button type="button" className="w-full" disabled={isProcessing} onClick={onApprove}>
+            <Check className="mr-1.5 h-4 w-4" />
+            Approve Plan
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/web/.next/standalone/src/presentation/web/components/features/control-center/control-center-inner.tsx

@@ -1,10 +1,19 @@
 'use client';
 
-import { useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import type { Edge } from '@xyflow/react';
+import { toast } from 'sonner';
+import { approveFeature } from '@/app/actions/approve-feature';
+import { getFeatureArtifact } from '@/app/actions/get-feature-artifact';
+import { getResearchArtifact } from '@/app/actions/get-research-artifact';
+import type { TechDecisionsReviewData } from '@/components/common/tech-decisions-review';
 import { FeaturesCanvas } from '@/components/features/features-canvas';
 import type { CanvasNodeType } from '@/components/features/features-canvas';
 import { FeatureDrawer, FeatureCreateDrawer } from '@/components/common';
+import { PrdQuestionnaireDrawer } from '@/components/common/prd-questionnaire';
+import type { PrdQuestionnaireData } from '@/components/common/prd-questionnaire';
+import { TechDecisionsDrawer } from '@/components/common/tech-decisions-review';
+import { NotificationPermissionBanner } from '@/components/common/notification-permission-banner';
 import { ControlCenterEmptyState } from './control-center-empty-state';
 import { useControlCenterState } from './use-control-center-state';
 
@@ -34,6 +43,147 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
     closeCreateDrawer,
   } = useControlCenterState(initialNodes, initialEdges);
 
+  // PRD questionnaire drawer state
+  const [prdSelections, setPrdSelections] = useState<Record<string, string>>({});
+  const [isPrdProcessing, setIsPrdProcessing] = useState(false);
+  const [questionnaireData, setQuestionnaireData] = useState<PrdQuestionnaireData | null>(null);
+  const [isLoadingQuestionnaire, setIsLoadingQuestionnaire] = useState(false);
+
+  // Tech decisions drawer state
+  const [techDecisionsData, setTechDecisionsData] = useState<TechDecisionsReviewData | null>(null);
+  const [isLoadingTechDecisions, setIsLoadingTechDecisions] = useState(false);
+
+  const showPrdDrawer =
+    selectedNode?.lifecycle === 'requirements' && selectedNode?.state === 'action-required';
+
+  const showTechDecisionsDrawer =
+    selectedNode?.lifecycle === 'implementation' && selectedNode?.state === 'action-required';
+
+  const handlePrdSelect = useCallback((questionId: string, optionId: string) => {
+    setPrdSelections((prev) => ({ ...prev, [questionId]: optionId }));
+  }, []);
+
+  const handlePrdRefine = useCallback(async (_text: string) => {
+    setIsPrdProcessing(true);
+    // TODO: Call API to refine requirements
+    // For now simulate a delay
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+    setIsPrdProcessing(false);
+  }, []);
+
+  const handlePrdApprove = useCallback(
+    async (_actionId: string) => {
+      const featureId = selectedNode?.featureId;
+      if (!featureId) return;
+
+      const result = await approveFeature(featureId);
+
+      if (!result.approved) {
+        toast.error(result.error ?? 'Failed to approve requirements');
+        return;
+      }
+
+      toast.success('Requirements approved — agent resuming');
+      clearSelection();
+      setPrdSelections({});
+    },
+    [selectedNode?.featureId, clearSelection]
+  );
+
+  const handleTechDecisionsRefine = useCallback(async (_text: string) => {
+    setIsLoadingTechDecisions(true);
+    // TODO: Call API to refine tech decisions
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+    setIsLoadingTechDecisions(false);
+  }, []);
+
+  const handleTechDecisionsApprove = useCallback(async () => {
+    const featureId = selectedNode?.featureId;
+    if (!featureId) return;
+
+    const result = await approveFeature(featureId);
+
+    if (!result.approved) {
+      toast.error(result.error ?? 'Failed to approve plan');
+      return;
+    }
+
+    toast.success('Plan approved — agent resuming');
+    clearSelection();
+  }, [selectedNode?.featureId, clearSelection]);
+
+  // Fetch questionnaire data and reset selections when a different feature is selected
+  const prdFeatureId = showPrdDrawer ? selectedNode?.featureId : null;
+  useEffect(() => {
+    setPrdSelections({});
+    setQuestionnaireData(null);
+
+    if (!prdFeatureId) return;
+
+    let cancelled = false;
+    setIsLoadingQuestionnaire(true);
+    getFeatureArtifact(prdFeatureId)
+      .then((result) => {
+        if (cancelled) return;
+        if (result.error) {
+          toast.error(result.error);
+          return;
+        }
+        if (result.questionnaire) {
+          setQuestionnaireData(result.questionnaire);
+          // Pre-select AI-recommended answers
+          const defaults: Record<string, string> = {};
+          for (const q of result.questionnaire.questions) {
+            const recommended = q.options.find((o) => o.recommended);
+            if (recommended) defaults[q.id] = recommended.id;
+          }
+          setPrdSelections(defaults);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) toast.error('Failed to load questionnaire');
+      })
+      .finally(() => {
+        if (!cancelled) setIsLoadingQuestionnaire(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [prdFeatureId]);
+
+  // Fetch tech decisions data when a feature is in research + action-required
+  const techDecisionsFeatureId = showTechDecisionsDrawer ? selectedNode?.featureId : null;
+  useEffect(() => {
+    setTechDecisionsData(null);
+
+    if (!techDecisionsFeatureId) return;
+
+    let cancelled = false;
+    setIsLoadingTechDecisions(true);
+    getResearchArtifact(techDecisionsFeatureId)
+      .then((result) => {
+        if (cancelled) return;
+        if (result.error) {
+          toast.error(result.error);
+          return;
+        }
+        if (result.techDecisions) {
+          setTechDecisionsData(result.techDecisions);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) toast.error('Failed to load tech decisions');
+      })
+      .finally(() => {
+        if (!cancelled) setIsLoadingTechDecisions(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [techDecisionsFeatureId]);
+
   // Listen for global "open create drawer" events from the sidebar
   useEffect(() => {
     const handler = () => handleAddFeature();
@@ -43,6 +193,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
 
   return (
     <>
+      <NotificationPermissionBanner />
       <FeaturesCanvas
         nodes={nodes}
         edges={edges}
@@ -57,11 +208,47 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
         emptyState={<ControlCenterEmptyState onRepositorySelect={handleAddRepository} />}
       />
       <FeatureDrawer
-        selectedNode={selectedNode}
+        selectedNode={showPrdDrawer || showTechDecisionsDrawer ? null : selectedNode}
         onClose={clearSelection}
         onDelete={handleDeleteFeature}
         isDeleting={isDeleting}
       />
+      {questionnaireData ? (
+        <PrdQuestionnaireDrawer
+          open={showPrdDrawer}
+          onClose={clearSelection}
+          featureName={selectedNode?.name ?? ''}
+          featureId={selectedNode?.featureId}
+          repositoryPath={selectedNode?.repositoryPath}
+          branch={selectedNode?.branch}
+          specPath={selectedNode?.specPath}
+          data={questionnaireData}
+          selections={prdSelections}
+          onSelect={handlePrdSelect}
+          onRefine={handlePrdRefine}
+          onApprove={handlePrdApprove}
+          onDelete={handleDeleteFeature}
+          isDeleting={isDeleting}
+          isProcessing={isPrdProcessing || isLoadingQuestionnaire}
+        />
+      ) : null}
+      {techDecisionsData ? (
+        <TechDecisionsDrawer
+          open={showTechDecisionsDrawer}
+          onClose={clearSelection}
+          featureName={selectedNode?.name ?? ''}
+          featureId={selectedNode?.featureId}
+          repositoryPath={selectedNode?.repositoryPath}
+          branch={selectedNode?.branch}
+          specPath={selectedNode?.specPath}
+          data={techDecisionsData}
+          onRefine={handleTechDecisionsRefine}
+          onApprove={handleTechDecisionsApprove}
+          onDelete={handleDeleteFeature}
+          isDeleting={isDeleting}
+          isProcessing={isLoadingTechDecisions}
+        />
+      ) : null}
       <FeatureCreateDrawer
         open={isCreateDrawerOpen}
         onClose={closeCreateDrawer}