@shepai/cli 1.70.2 → 1.72.0

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

@@ -0,0 +1,98 @@
+'use client';
+
+import { useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import { Code2, Terminal, FolderOpen } from 'lucide-react';
+import { BaseDrawer } from '@/components/common/base-drawer';
+import { ActionButton } from '@/components/common/action-button';
+import { DrawerTitle, DrawerDescription } from '@/components/ui/drawer';
+import { Separator } from '@/components/ui/separator';
+import { useRepositoryActions } from '@/components/common/repository-node/use-repository-actions';
+import { featureFlags } from '@/lib/feature-flags';
+import type { RepositoryNodeData } from '@/components/common/repository-node';
+
+export interface RepositoryDrawerClientProps {
+  data: RepositoryNodeData;
+}
+
+export function RepositoryDrawerClient({ data }: RepositoryDrawerClientProps) {
+  const router = useRouter();
+  const repoActions = useRepositoryActions(
+    data.repositoryPath ? { repositoryPath: data.repositoryPath } : null
+  );
+
+  const onClose = useCallback(() => {
+    router.push('/');
+  }, [router]);
+
+  const repoDeployTarget = data.repositoryPath
+    ? {
+        targetId: data.repositoryPath,
+        targetType: 'repository' as const,
+        repositoryPath: data.repositoryPath,
+      }
+    : undefined;
+
+  const header = (
+    <div data-testid="repository-drawer-header">
+      <DrawerTitle>{data.name}</DrawerTitle>
+      {data.repositoryPath ? (
+        <DrawerDescription className="truncate font-mono text-xs">
+          {data.repositoryPath}
+        </DrawerDescription>
+      ) : null}
+    </div>
+  );
+
+  return (
+    <BaseDrawer
+      open
+      onClose={onClose}
+      size="md"
+      modal={false}
+      header={header}
+      deployTarget={featureFlags.envDeploy ? repoDeployTarget : undefined}
+      data-testid="repository-drawer"
+    >
+      {data.repositoryPath ? (
+        <div className="flex-1 overflow-y-auto">
+          <Separator />
+          <div className="flex flex-col gap-3 p-4">
+            <div className="text-muted-foreground text-xs font-semibold tracking-wider">
+              OPEN WITH
+            </div>
+            <div className="flex flex-col gap-2">
+              <ActionButton
+                label="Open in IDE"
+                onClick={repoActions.openInIde}
+                loading={repoActions.ideLoading}
+                error={!!repoActions.ideError}
+                icon={Code2}
+                variant="outline"
+                size="sm"
+              />
+              <ActionButton
+                label="Open in Shell"
+                onClick={repoActions.openInShell}
+                loading={repoActions.shellLoading}
+                error={!!repoActions.shellError}
+                icon={Terminal}
+                variant="outline"
+                size="sm"
+              />
+              <ActionButton
+                label="Open Folder"
+                onClick={repoActions.openFolder}
+                loading={repoActions.folderLoading}
+                error={!!repoActions.folderError}
+                icon={FolderOpen}
+                variant="outline"
+                size="sm"
+              />
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </BaseDrawer>
+  );
+}

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}
+    />
+  ),
+};