@shepai/cli 1.70.2 → 1.71.0

package/web/.next/standalone/src/presentation/web/components/common/base-drawer/base-drawer.tsx

@@ -156,7 +156,11 @@ function DeployBar({ deployTarget }: { deployTarget: DeployActionInput }) {
         </Tooltip>
       </TooltipProvider>
       {isDeploymentActive ? (
-        <DeploymentStatusBadge status={deployAction.status} url={deployAction.url} />
+        <DeploymentStatusBadge
+          status={deployAction.status}
+          url={deployAction.url}
+          targetId={deployTarget.targetId}
+        />
       ) : null}
     </div>
   );

package/web/.next/standalone/src/presentation/web/components/common/control-center-drawer/control-center-drawer.tsx

@@ -51,7 +51,8 @@ import { ActionButton } from '@/components/common/action-button';
 import { OpenActionMenu } from '@/components/common/open-action-menu';
 import { FeatureCreateDrawer } from '@/components/common/feature-create-drawer';
 import { PrdQuestionnaire } from '@/components/common/prd-questionnaire';
-import { TechDecisionsReview } from '@/components/common/tech-decisions-review';
+import { TechReviewTabs } from '@/components/common/tech-review-tabs';
+import type { ProductDecisionsSummaryData } from '@/components/common/product-decisions-summary';
 import { MergeReview } from '@/components/common/merge-review';
 import { featureNodeStateConfig, lifecycleDisplayLabels } from '@/components/common/feature-node';
 import type { FeatureNodeData } from '@/components/common/feature-node';
@@ -89,6 +90,12 @@ export function ControlCenterDrawer({
   const [techData, setTechData] = useState<TechDecisionsReviewData | null>(null);
   const [isLoadingTech, setIsLoadingTech] = useState(false);
 
+  // ── Product decisions state (for tech review Product tab) ─────────────
+  const [techProductData, setTechProductData] = useState<
+    ProductDecisionsSummaryData | null | undefined
+  >(undefined);
+  const [isLoadingTechProduct, setIsLoadingTechProduct] = useState(false);
+
   // ── Merge review state ──────────────────────────────────────────────────
   const [mergeData, setMergeData] = useState<MergeReviewData | null>(null);
   const [isLoadingMerge, setIsLoadingMerge] = useState(false);
@@ -162,6 +169,32 @@ export function ControlCenterDrawer({
     };
   }, [techFeatureId]);
 
+  // Fetch product decisions for the Product tab in tech review
+  useEffect(() => {
+    setTechProductData(undefined);
+    if (!techFeatureId) return;
+
+    let cancelled = false;
+    setIsLoadingTechProduct(true);
+    getFeatureArtifact(techFeatureId)
+      .then((result) => {
+        if (cancelled) return;
+        if (result.productDecisions) {
+          setTechProductData(result.productDecisions);
+        }
+        // Silent failure — product tab shows "not available"
+      })
+      .catch(() => {
+        // Silent failure — the product tab is supplementary
+      })
+      .finally(() => {
+        if (!cancelled) setIsLoadingTechProduct(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [techFeatureId]);
+
   const mergeFeatureId = view?.type === 'merge-review' ? view.node.featureId : null;
   useEffect(() => {
     setMergeData(null);
@@ -381,7 +414,11 @@ export function ControlCenterDrawer({
                   </Tooltip>
                 </TooltipProvider>
                 {isFeatureDeployActive ? (
-                  <DeploymentStatusBadge status={deployAction.status} url={deployAction.url} />
+                  <DeploymentStatusBadge
+                    status={deployAction.status}
+                    url={deployAction.url}
+                    targetId={featureDeployTarget?.targetId}
+                  />
                 ) : null}
               </>
             ) : null}
@@ -508,8 +545,9 @@ export function ControlCenterDrawer({
     );
   } else if (view?.type === 'tech-review') {
     body = techData ? (
-      <TechDecisionsReview
-        data={techData}
+      <TechReviewTabs
+        techData={techData}
+        productData={isLoadingTechProduct ? null : techProductData}
         onApprove={handleTechApprove}
         onReject={handleTechReject}
         isProcessing={isLoadingTech}

package/web/.next/standalone/src/presentation/web/components/common/deployment-status-badge/deployment-status-badge.stories.tsx

@@ -33,3 +33,13 @@ export const Stopped: Story = {
 export const NoDeployment: Story = {
   args: { status: null },
 };
+
+/** Booting with View Logs button — shows log button next to spinner. */
+export const BootingWithLogs: Story = {
+  args: { status: DeploymentState.Booting, targetId: 'demo-target' },
+};
+
+/** Ready with View Logs button — shows URL and log button. */
+export const ReadyWithLogs: Story = {
+  args: { status: DeploymentState.Ready, url: 'http://localhost:3000', targetId: 'demo-target' },
+};

package/web/.next/standalone/src/presentation/web/components/common/deployment-status-badge/deployment-status-badge.tsx

@@ -1,40 +1,93 @@
-import { Loader2, ExternalLink } from 'lucide-react';
+'use client';
+
+import { useState } from 'react';
+import { Loader2, ExternalLink, Terminal } from 'lucide-react';
 import { DeploymentState } from '@shepai/core/domain/generated/output';
 import { Badge } from '@/components/ui/badge';
+import { ServerLogViewer } from '@/components/common/server-log-viewer';
 
 export interface DeploymentStatusBadgeProps {
   status: DeploymentState | null;
   url?: string | null;
+  targetId?: string;
 }
 
-export function DeploymentStatusBadge({ status, url }: DeploymentStatusBadgeProps) {
+export function DeploymentStatusBadge({ status, url, targetId }: DeploymentStatusBadgeProps) {
+  const [logViewerOpen, setLogViewerOpen] = useState(false);
+  const showLogButton =
+    targetId && (status === DeploymentState.Booting || status === DeploymentState.Ready);
+
   switch (status) {
     case DeploymentState.Booting:
       return (
-        <Badge className="border-transparent bg-blue-50 text-blue-700 hover:bg-blue-50">
-          <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
-          Starting...
-        </Badge>
+        <>
+          <Badge className="border-transparent bg-blue-50 text-blue-700 hover:bg-blue-50">
+            <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
+            Starting...
+            {showLogButton ? (
+              <button
+                type="button"
+                aria-label="View server logs"
+                className="ml-1.5 inline-flex items-center rounded-sm p-0.5 hover:bg-blue-100"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setLogViewerOpen(true);
+                }}
+              >
+                <Terminal className="h-3 w-3" />
+              </button>
+            ) : null}
+          </Badge>
+          {showLogButton ? (
+            <ServerLogViewer
+              open={logViewerOpen}
+              onOpenChange={setLogViewerOpen}
+              targetId={targetId}
+            />
+          ) : null}
+        </>
       );
     case DeploymentState.Ready:
       return (
-        <Badge className="border-transparent bg-green-50 text-green-700 hover:bg-green-50">
-          <span className="mr-1 inline-block h-2 w-2 rounded-full bg-green-500" />
-          {url ? (
-            <a
-              href={url}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 hover:underline"
-              onClick={(e) => e.stopPropagation()}
-            >
-              {url}
-              <ExternalLink className="h-3 w-3" />
-            </a>
-          ) : (
-            'Ready'
-          )}
-        </Badge>
+        <>
+          <Badge className="border-transparent bg-green-50 text-green-700 hover:bg-green-50">
+            <span className="mr-1 inline-block h-2 w-2 rounded-full bg-green-500" />
+            {url ? (
+              <a
+                href={url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1 hover:underline"
+                onClick={(e) => e.stopPropagation()}
+              >
+                {url}
+                <ExternalLink className="h-3 w-3" />
+              </a>
+            ) : (
+              'Ready'
+            )}
+            {showLogButton ? (
+              <button
+                type="button"
+                aria-label="View server logs"
+                className="ml-1.5 inline-flex items-center rounded-sm p-0.5 hover:bg-green-100"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setLogViewerOpen(true);
+                }}
+              >
+                <Terminal className="h-3 w-3" />
+              </button>
+            ) : null}
+          </Badge>
+          {showLogButton ? (
+            <ServerLogViewer
+              open={logViewerOpen}
+              onOpenChange={setLogViewerOpen}
+              targetId={targetId}
+            />
+          ) : null}
+        </>
       );
     default:
       return null;

package/web/.next/standalone/src/presentation/web/components/common/product-decisions-summary/index.ts

@@ -0,0 +1,6 @@
+export { ProductDecisionsSummary } from './product-decisions-summary';
+export type {
+  ProductDecisionsSummaryData,
+  ProductDecisionItem,
+  ProductDecisionsSummaryProps,
+} from './product-decisions-summary-config';

package/web/.next/standalone/src/presentation/web/components/common/product-decisions-summary/product-decisions-summary-config.ts

@@ -0,0 +1,24 @@
+export interface ProductDecisionItem {
+  /** Question text */
+  question: string;
+  /** The selected option label */
+  selectedOption: string;
+  /** Rationale for the selected option */
+  rationale: string;
+  /** Whether it was the AI-recommended option */
+  wasRecommended: boolean;
+}
+
+export interface ProductDecisionsSummaryData {
+  /** Goal/title from the PRD */
+  question: string;
+  /** Context description (one-liner) */
+  context: string;
+  /** Resolved questions with selected options */
+  questions: ProductDecisionItem[];
+}
+
+export interface ProductDecisionsSummaryProps {
+  /** Product decisions data from the feature artifact */
+  data: ProductDecisionsSummaryData;
+}

package/web/.next/standalone/src/presentation/web/components/common/product-decisions-summary/product-decisions-summary.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ProductDecisionsSummary } from './product-decisions-summary';
+import type { ProductDecisionsSummaryData } from './product-decisions-summary-config';
+
+const mockData: ProductDecisionsSummaryData = {
+  question: 'Goal',
+  context: 'Add user authentication to the application',
+  questions: [
+    {
+      question: 'Which authentication strategy should we use?',
+      selectedOption: 'OAuth 2.0',
+      rationale: 'Industry standard with broad provider support and well-maintained libraries.',
+      wasRecommended: true,
+    },
+    {
+      question: 'How should we handle session management?',
+      selectedOption: 'JWT tokens',
+      rationale: 'Stateless and scalable across services without shared session storage.',
+      wasRecommended: false,
+    },
+    {
+      question: 'What level of MFA should we support?',
+      selectedOption: 'Optional TOTP',
+      rationale: 'Balances security with user convenience. Power users can opt in.',
+      wasRecommended: true,
+    },
+    {
+      question: 'Where should we store user profiles?',
+      selectedOption: 'PostgreSQL',
+      rationale: 'Relational data model fits well for user attributes and relationships.',
+      wasRecommended: false,
+    },
+  ],
+};
+
+const meta: Meta<typeof ProductDecisionsSummary> = {
+  title: 'Drawers/Review/ProductDecisionsSummary',
+  component: ProductDecisionsSummary,
+  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 ProductDecisionsSummary>;
+
+/** Default — multiple product decisions with a mix of recommended and non-recommended. */
+export const Default: Story = {
+  args: {
+    data: mockData,
+  },
+};
+
+/** Single question. */
+export const SingleQuestion: Story = {
+  args: {
+    data: { ...mockData, questions: [mockData.questions[0]] },
+  },
+};
+
+/** All recommended — every option was the AI-recommended choice. */
+export const AllRecommended: Story = {
+  args: {
+    data: {
+      ...mockData,
+      questions: mockData.questions.map((q) => ({ ...q, wasRecommended: true })),
+    },
+  },
+};
+
+/** No recommended badges — none of the selected options were AI-recommended. */
+export const NoneRecommended: Story = {
+  args: {
+    data: {
+      ...mockData,
+      questions: mockData.questions.map((q) => ({ ...q, wasRecommended: false })),
+    },
+  },
+};

package/web/.next/standalone/src/presentation/web/components/common/product-decisions-summary/product-decisions-summary.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { ClipboardList } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import type {
+  ProductDecisionsSummaryProps,
+  ProductDecisionItem,
+} from './product-decisions-summary-config';
+
+function ProductDecisionCard({ item, index }: { item: ProductDecisionItem; index: number }) {
+  return (
+    <div className="border-border rounded-lg border">
+      <div className="space-y-2 px-4 py-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 flex-1">
+            <h3 className="text-foreground text-sm leading-tight font-semibold">{item.question}</h3>
+            <div className="mt-1 flex items-center gap-2">
+              <p className="text-muted-foreground text-xs">{item.selectedOption}</p>
+              {item.wasRecommended ? (
+                <Badge className="px-1.5 py-0 text-[10px]">AI Recommended</Badge>
+              ) : null}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function ProductDecisionsSummary({ data }: ProductDecisionsSummaryProps) {
+  const { questions } = data;
+
+  if (questions.length === 0) return null;
+
+  return (
+    <div className="space-y-4 p-4">
+      {/* Section heading */}
+      <div className="flex items-center gap-2">
+        <ClipboardList className="text-primary h-4 w-4" />
+        <h3 className="text-foreground text-sm font-bold">Product Decisions</h3>
+      </div>
+
+      {/* Decision cards */}
+      {questions.map((item, i) => (
+        <ProductDecisionCard key={item.question} item={item} index={i} />
+      ))}
+    </div>
+  );
+}

package/web/.next/standalone/src/presentation/web/components/common/repository-node/repository-node.tsx

@@ -206,7 +206,11 @@ export function RepositoryNode({ data }: { data: RepositoryNodeData; [key: strin
                     </Tooltip>
                   </TooltipProvider>
                   {isDeploymentActive ? (
-                    <DeploymentStatusBadge status={deployAction.status} url={deployAction.url} />
+                    <DeploymentStatusBadge
+                      status={deployAction.status}
+                      url={deployAction.url}
+                      targetId={data.repositoryPath}
+                    />
                   ) : null}
                 </>
               ) : null}

package/web/.next/standalone/src/presentation/web/components/common/server-log-viewer/index.ts

@@ -0,0 +1,6 @@
+export {
+  ServerLogViewer,
+  ServerLogViewerContent,
+  type ServerLogViewerProps,
+  type ServerLogViewerContentProps,
+} from './server-log-viewer';

package/web/.next/standalone/src/presentation/web/components/common/server-log-viewer/server-log-viewer.stories.tsx

@@ -0,0 +1,168 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { LogEntry } from '@shepai/core/application/ports/output/services/deployment-service.interface';
+import { ServerLogViewerContent } from './server-log-viewer';
+
+const meta: Meta<typeof ServerLogViewerContent> = {
+  title: 'Common/ServerLogViewer',
+  component: ServerLogViewerContent,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ServerLogViewerContent>;
+
+function makeLog(line: string, stream: 'stdout' | 'stderr' = 'stdout', offsetMs = 0): LogEntry {
+  return {
+    targetId: 'story-target',
+    stream,
+    line,
+    timestamp: Date.now() + offsetMs,
+  };
+}
+
+function InteractiveWrapper({ logs, isConnected }: { logs: LogEntry[]; isConnected: boolean }) {
+  const [open, setOpen] = useState(true);
+  return (
+    <ServerLogViewerContent
+      open={open}
+      onOpenChange={setOpen}
+      logs={logs}
+      isConnected={isConnected}
+    />
+  );
+}
+
+/** Empty state — no log output yet. */
+export const Empty: Story = {
+  render: () => <InteractiveWrapper logs={[]} isConnected={true} />,
+};
+
+/** A few stdout-only lines. */
+export const FewLines: Story = {
+  render: () => (
+    <InteractiveWrapper
+      logs={[
+        makeLog('$ npm run dev', 'stdout', 0),
+        makeLog('', 'stdout', 10),
+        makeLog('> my-app@1.0.0 dev', 'stdout', 20),
+        makeLog('> next dev', 'stdout', 30),
+        makeLog('', 'stdout', 40),
+        makeLog('  ▲ Next.js 14.2.3', 'stdout', 50),
+        makeLog('  - Local:        http://localhost:3000', 'stdout', 60),
+        makeLog('  - Environments: .env.local', 'stdout', 70),
+        makeLog('', 'stdout', 80),
+        makeLog(' ✓ Ready in 1.2s', 'stdout', 90),
+      ]}
+      isConnected={true}
+    />
+  ),
+};
+
+/** Interleaved stdout and stderr showing color differentiation. */
+export const MixedOutput: Story = {
+  render: () => (
+    <InteractiveWrapper
+      logs={[
+        makeLog('$ npm run dev', 'stdout', 0),
+        makeLog('> next dev', 'stdout', 10),
+        makeLog('  ▲ Next.js 14.2.3', 'stdout', 20),
+        makeLog(
+          '(node:12345) [DEP0040] DeprecationWarning: The punycode module is deprecated.',
+          'stderr',
+          30
+        ),
+        makeLog('Use `node:punycode` instead.', 'stderr', 31),
+        makeLog('  - Local:        http://localhost:3000', 'stdout', 40),
+        makeLog(' ✓ Ready in 1.8s', 'stdout', 50),
+        makeLog(' ○ Compiling /page ...', 'stdout', 100),
+        makeLog(' ✓ Compiled /page in 342ms', 'stdout', 200),
+        makeLog('GET / 200 in 412ms', 'stdout', 300),
+        makeLog('Warning: Each child in a list should have a unique "key" prop.', 'stderr', 310),
+        makeLog('GET /api/data 200 in 23ms', 'stdout', 400),
+        makeLog('GET /favicon.ico 304 in 2ms', 'stdout', 410),
+        makeLog("Error: ENOENT: no such file or directory, open '/tmp/cache.json'", 'stderr', 500),
+        makeLog('GET /api/users 500 in 156ms', 'stdout', 510),
+      ]}
+      isConnected={true}
+    />
+  ),
+};
+
+/** 100+ lines demonstrating scrollable content. */
+export const ManyLines: Story = {
+  render: () => {
+    const logs: LogEntry[] = [];
+    logs.push(makeLog('$ npm run dev', 'stdout', 0));
+    logs.push(makeLog('> next dev', 'stdout', 10));
+    logs.push(makeLog(' ✓ Ready in 1.2s', 'stdout', 20));
+    for (let i = 0; i < 120; i++) {
+      const method = ['GET', 'POST', 'PUT', 'DELETE'][i % 4];
+      const path = ['/api/users', '/api/features', '/api/repos', '/api/deploy'][i % 4];
+      const status = i % 15 === 0 ? 500 : i % 7 === 0 ? 404 : 200;
+      const ms = Math.floor(Math.random() * 500) + 5;
+      const stream: 'stdout' | 'stderr' = status >= 500 ? 'stderr' : 'stdout';
+      logs.push(makeLog(`${method} ${path}/${i} ${status} in ${ms}ms`, stream, 100 + i * 10));
+    }
+    return <InteractiveWrapper logs={logs} isConnected={true} />;
+  },
+};
+
+/** Lines exceeding viewport width showing wrap behavior. */
+export const LongLines: Story = {
+  render: () => (
+    <InteractiveWrapper
+      logs={[
+        makeLog('Short line', 'stdout', 0),
+        makeLog(
+          "Error: Module not found: Can't resolve '@/components/features/really-long-component-name/that-goes-on-and-on/sub-component/deeply-nested-module/index.tsx' in '/Users/developer/projects/my-very-long-project-name/src/presentation/web/components/features'",
+          'stderr',
+          10
+        ),
+        makeLog(
+          'at Object.resolve (webpack://my-app/node_modules/enhanced-resolve/lib/Resolver.js?:331:11) at Object.resolve (webpack://my-app/node_modules/enhanced-resolve/lib/Resolver.js?:331:11) at Object.resolve (webpack://my-app/node_modules/enhanced-resolve/lib/Resolver.js?:331:11)',
+          'stderr',
+          20
+        ),
+        makeLog('Normal log line here', 'stdout', 30),
+        makeLog(
+          JSON.stringify({
+            level: 'info',
+            message: 'Request processed',
+            metadata: {
+              userId: 'usr_abc123',
+              path: '/api/features',
+              method: 'POST',
+              duration: 234,
+              headers: { 'content-type': 'application/json', authorization: 'Bearer xxx...xxx' },
+            },
+          }),
+          'stdout',
+          40
+        ),
+        makeLog('Another normal line', 'stdout', 50),
+      ]}
+      isConnected={true}
+    />
+  ),
+};
+
+/** Disconnected state — shows server stopped message. */
+export const Disconnected: Story = {
+  render: () => (
+    <InteractiveWrapper
+      logs={[
+        makeLog('$ npm run dev', 'stdout', 0),
+        makeLog('> next dev', 'stdout', 10),
+        makeLog(' ✓ Ready in 1.2s', 'stdout', 20),
+        makeLog('GET / 200 in 412ms', 'stdout', 100),
+        makeLog('GET /api/data 200 in 23ms', 'stdout', 200),
+        makeLog('SIGTERM received, shutting down...', 'stderr', 300),
+      ]}
+      isConnected={false}
+    />
+  ),
+};