@shepai/cli 1.76.0-pr241.9ff2c05 → 1.76.0-pr243.b5a1065

package/web/.next/standalone/src/presentation/web/components/common/feature-drawer-tabs/activity-tab.stories.tsx

@@ -1,272 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { ActivityTab } from './activity-tab';
-import type { PhaseTimingData } from '@/app/actions/get-feature-phase-timings';
-
-const meta: Meta<typeof ActivityTab> = {
-  title: 'Drawers/Feature/Tabs/ActivityTab',
-  component: ActivityTab,
-  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 ActivityTab>;
-
-/* ---------------------------------------------------------------------------
- * Data fixtures
- * ------------------------------------------------------------------------- */
-
-const singleRunTimings: PhaseTimingData[] = [
-  {
-    agentRunId: 'run-1',
-    phase: 'run:started',
-    startedAt: '2025-01-15T10:00:00Z',
-    completedAt: '2025-01-15T10:00:00Z',
-    durationMs: 0,
-  },
-  {
-    agentRunId: 'run-1',
-    phase: 'analyze',
-    startedAt: '2025-01-15T10:00:01Z',
-    completedAt: '2025-01-15T10:00:15Z',
-    durationMs: 14000,
-  },
-  {
-    agentRunId: 'run-1',
-    phase: 'requirements',
-    startedAt: '2025-01-15T10:00:15Z',
-    completedAt: '2025-01-15T10:01:45Z',
-    durationMs: 90000,
-    waitingApprovalAt: '2025-01-15T10:01:00Z',
-    approvalWaitMs: 30000,
-  },
-  {
-    agentRunId: 'run-1',
-    phase: 'research',
-    startedAt: '2025-01-15T10:01:45Z',
-    completedAt: '2025-01-15T10:03:30Z',
-    durationMs: 105000,
-  },
-  {
-    agentRunId: 'run-1',
-    phase: 'plan',
-    startedAt: '2025-01-15T10:03:30Z',
-    completedAt: '2025-01-15T10:05:00Z',
-    durationMs: 90000,
-    waitingApprovalAt: '2025-01-15T10:04:30Z',
-    approvalWaitMs: 15000,
-  },
-  {
-    agentRunId: 'run-1',
-    phase: 'implement',
-    startedAt: '2025-01-15T10:05:00Z',
-    completedAt: '2025-01-15T10:15:00Z',
-    durationMs: 600000,
-  },
-  {
-    agentRunId: 'run-1',
-    phase: 'run:completed',
-    startedAt: '2025-01-15T10:15:00Z',
-    completedAt: '2025-01-15T10:15:00Z',
-    durationMs: 0,
-  },
-];
-
-const multiRunTimings: PhaseTimingData[] = [
-  // Run 1
-  {
-    agentRunId: 'run-1',
-    phase: 'run:started',
-    startedAt: '2025-01-15T10:00:00Z',
-    durationMs: 0,
-  },
-  {
-    agentRunId: 'run-1',
-    phase: 'analyze',
-    startedAt: '2025-01-15T10:00:01Z',
-    completedAt: '2025-01-15T10:00:20Z',
-    durationMs: 19000,
-  },
-  {
-    agentRunId: 'run-1',
-    phase: 'requirements',
-    startedAt: '2025-01-15T10:00:20Z',
-    completedAt: '2025-01-15T10:02:00Z',
-    durationMs: 100000,
-    waitingApprovalAt: '2025-01-15T10:01:20Z',
-    approvalWaitMs: 40000,
-  },
-  {
-    agentRunId: 'run-1',
-    phase: 'run:completed',
-    startedAt: '2025-01-15T10:02:00Z',
-    durationMs: 0,
-  },
-  // Run 2
-  {
-    agentRunId: 'run-2',
-    phase: 'run:resumed',
-    startedAt: '2025-01-15T11:00:00Z',
-    durationMs: 0,
-  },
-  {
-    agentRunId: 'run-2',
-    phase: 'research',
-    startedAt: '2025-01-15T11:00:01Z',
-    completedAt: '2025-01-15T11:02:30Z',
-    durationMs: 149000,
-  },
-  {
-    agentRunId: 'run-2',
-    phase: 'plan',
-    startedAt: '2025-01-15T11:02:30Z',
-    completedAt: '2025-01-15T11:04:00Z',
-    durationMs: 90000,
-    waitingApprovalAt: '2025-01-15T11:03:30Z',
-    approvalWaitMs: 20000,
-  },
-  {
-    agentRunId: 'run-2',
-    phase: 'implement',
-    startedAt: '2025-01-15T11:04:00Z',
-    completedAt: '2025-01-15T11:12:00Z',
-    durationMs: 480000,
-  },
-  {
-    agentRunId: 'run-2',
-    phase: 'merge',
-    startedAt: '2025-01-15T11:12:00Z',
-    completedAt: '2025-01-15T11:13:30Z',
-    durationMs: 90000,
-  },
-  {
-    agentRunId: 'run-2',
-    phase: 'run:completed',
-    startedAt: '2025-01-15T11:13:30Z',
-    durationMs: 0,
-  },
-];
-
-const runningTimings: PhaseTimingData[] = [
-  {
-    agentRunId: 'run-1',
-    phase: 'run:started',
-    startedAt: '2025-01-15T10:00:00Z',
-    durationMs: 0,
-  },
-  {
-    agentRunId: 'run-1',
-    phase: 'analyze',
-    startedAt: '2025-01-15T10:00:01Z',
-    completedAt: '2025-01-15T10:00:15Z',
-    durationMs: 14000,
-  },
-  {
-    agentRunId: 'run-1',
-    phase: 'implement',
-    startedAt: '2025-01-15T10:00:15Z',
-    durationMs: 45000,
-  },
-];
-
-/* ---------------------------------------------------------------------------
- * Stories
- * ------------------------------------------------------------------------- */
-
-/** Default — single run with complete phase timings and approval waits. */
-export const Default: Story = {
-  args: {
-    timings: singleRunTimings,
-    loading: false,
-    error: null,
-  },
-};
-
-/** Multiple runs with run headers showing grouping. */
-export const MultipleRuns: Story = {
-  args: {
-    timings: multiRunTimings,
-    loading: false,
-    error: null,
-  },
-};
-
-/** Running phase — a phase without completedAt shows blue bar. */
-export const RunningPhase: Story = {
-  args: {
-    timings: runningTimings,
-    loading: false,
-    error: null,
-  },
-};
-
-/** Loading state — spinner displayed while data is being fetched. */
-export const Loading: Story = {
-  args: {
-    timings: null,
-    loading: true,
-    error: null,
-  },
-};
-
-/** Empty state — no activity recorded yet. */
-export const Empty: Story = {
-  args: {
-    timings: [],
-    loading: false,
-    error: null,
-  },
-};
-
-/** Error state — inline error message. */
-export const Error: Story = {
-  args: {
-    timings: null,
-    loading: false,
-    error: 'Failed to load phase timings. Please try again.',
-  },
-};
-
-/** Approval wait indicators — phases with approval wait sub-rows. */
-export const WithApprovalWaits: Story = {
-  args: {
-    timings: [
-      {
-        agentRunId: 'run-1',
-        phase: 'requirements',
-        startedAt: '2025-01-15T10:00:00Z',
-        completedAt: '2025-01-15T10:03:00Z',
-        durationMs: 180000,
-        waitingApprovalAt: '2025-01-15T10:01:00Z',
-        approvalWaitMs: 120000,
-      },
-      {
-        agentRunId: 'run-1',
-        phase: 'plan',
-        startedAt: '2025-01-15T10:03:00Z',
-        completedAt: '2025-01-15T10:06:00Z',
-        durationMs: 180000,
-        waitingApprovalAt: '2025-01-15T10:04:00Z',
-        approvalWaitMs: 90000,
-      },
-      {
-        agentRunId: 'run-1',
-        phase: 'implement',
-        startedAt: '2025-01-15T10:06:00Z',
-        completedAt: '2025-01-15T10:16:00Z',
-        durationMs: 600000,
-      },
-    ],
-    loading: false,
-    error: null,
-  },
-};

package/web/.next/standalone/src/presentation/web/components/common/feature-drawer-tabs/activity-tab.tsx

@@ -1,245 +0,0 @@
-'use client';
-
-import { Loader2, AlertCircle, Clock } from 'lucide-react';
-import type { PhaseTimingData } from '@/app/actions/get-feature-phase-timings';
-
-export interface ActivityTabProps {
-  timings: PhaseTimingData[] | null;
-  loading: boolean;
-  error: string | null;
-}
-
-const NODE_TO_PHASE: Record<string, string> = {
-  analyze: 'Analyzing',
-  requirements: 'Requirements',
-  research: 'Researching',
-  plan: 'Planning',
-  implement: 'Implementing',
-  merge: 'Merging',
-};
-
-const LIFECYCLE_EVENTS: Record<string, { label: string; colorClass: string }> = {
-  'run:started': { label: 'started', colorClass: 'text-blue-600' },
-  'run:resumed': { label: 'resumed', colorClass: 'text-blue-600' },
-  'run:completed': { label: 'completed', colorClass: 'text-emerald-600' },
-  'run:failed': { label: 'failed', colorClass: 'text-red-600' },
-  'run:stopped': { label: 'stopped', colorClass: 'text-amber-600' },
-  'run:crashed': { label: 'crashed', colorClass: 'text-red-600' },
-};
-
-function isLifecycleEvent(phase: string): boolean {
-  return phase.startsWith('run:');
-}
-
-function formatDuration(ms: number): string {
-  return `${(ms / 1000).toFixed(1)}s`;
-}
-
-interface TimingRunGroup {
-  runId: string;
-  timings: PhaseTimingData[];
-}
-
-function groupTimingsByRun(timings: PhaseTimingData[]): TimingRunGroup[] {
-  const groups: TimingRunGroup[] = [];
-
-  for (const t of timings) {
-    const last = groups[groups.length - 1];
-    if (last?.runId === t.agentRunId) {
-      last.timings.push(t);
-    } else {
-      groups.push({ runId: t.agentRunId, timings: [t] });
-    }
-  }
-  return groups;
-}
-
-export function ActivityTab({ timings, loading, error }: ActivityTabProps) {
-  if (loading) {
-    return (
-      <div data-testid="activity-tab-loading" className="flex items-center justify-center p-8">
-        <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="flex items-center gap-2 p-4 text-sm text-red-600">
-        <AlertCircle className="h-4 w-4 shrink-0" />
-        <span>{error}</span>
-      </div>
-    );
-  }
-
-  if (!timings || timings.length === 0) {
-    return (
-      <div className="flex flex-col items-center justify-center gap-2 p-8">
-        <Clock className="text-muted-foreground h-8 w-8" />
-        <p className="text-muted-foreground text-sm">No activity recorded yet</p>
-      </div>
-    );
-  }
-
-  const nodeTimings = timings.filter((t) => !isLifecycleEvent(t.phase));
-  const maxDurationMs = Math.max(
-    ...nodeTimings.map((t) => t.durationMs ?? 0),
-    ...nodeTimings.map((t) => t.approvalWaitMs ?? 0),
-    0
-  );
-
-  const groups = groupTimingsByRun(timings);
-  const multiRun = groups.length > 1;
-
-  const totalExecMs = nodeTimings.reduce((sum, t) => sum + (t.durationMs ?? 0), 0);
-  const totalWaitMs = nodeTimings.reduce((sum, t) => sum + (t.approvalWaitMs ?? 0), 0);
-
-  return (
-    <div className="flex flex-col gap-4 p-4">
-      <div data-testid="activity-timings" className="flex flex-col gap-3">
-        {groups.map((group, groupIdx) => (
-          <RunGroup
-            key={group.runId}
-            group={group}
-            groupIdx={groupIdx}
-            multiRun={multiRun}
-            maxDurationMs={maxDurationMs}
-          />
-        ))}
-      </div>
-      {totalExecMs > 0 ? (
-        <SummaryTotals totalExecMs={totalExecMs} totalWaitMs={totalWaitMs} />
-      ) : null}
-    </div>
-  );
-}
-
-function RunGroup({
-  group,
-  groupIdx,
-  multiRun,
-  maxDurationMs,
-}: {
-  group: { runId: string; timings: PhaseTimingData[] };
-  groupIdx: number;
-  multiRun: boolean;
-  maxDurationMs: number;
-}) {
-  return (
-    <div className="flex flex-col gap-1.5">
-      {multiRun ? (
-        <div className="text-muted-foreground text-xs font-medium">Run #{groupIdx + 1}</div>
-      ) : null}
-      {group.timings.map((t) => {
-        if (isLifecycleEvent(t.phase)) {
-          return <LifecycleEventRow key={`${t.agentRunId}-${t.phase}-${t.startedAt}`} timing={t} />;
-        }
-        return (
-          <NodeTimingRow
-            key={`${t.agentRunId}-${t.phase}-${t.startedAt}`}
-            timing={t}
-            maxDurationMs={maxDurationMs}
-          />
-        );
-      })}
-    </div>
-  );
-}
-
-function LifecycleEventRow({ timing }: { timing: PhaseTimingData }) {
-  const event = LIFECYCLE_EVENTS[timing.phase];
-  if (!event) return null;
-  return (
-    <div className={`text-xs ${event.colorClass}`}>
-      <span>{event.label}</span>
-    </div>
-  );
-}
-
-function NodeTimingRow({
-  timing,
-  maxDurationMs,
-}: {
-  timing: PhaseTimingData;
-  maxDurationMs: number;
-}) {
-  const label = timing.phase.includes(':')
-    ? `rev ${timing.phase.split(':')[1]}`
-    : (NODE_TO_PHASE[timing.phase] ?? timing.phase);
-
-  const durationMs = timing.durationMs ?? 0;
-  const barPercent = maxDurationMs > 0 ? Math.max(2, (durationMs / maxDurationMs) * 100) : 2;
-  const barColorClass = timing.completedAt ? 'bg-emerald-500' : 'bg-blue-500';
-
-  return (
-    <div className="flex flex-col gap-1">
-      <div data-testid={`timing-bar-${timing.phase}`} className="flex items-center gap-3">
-        <span className="text-muted-foreground w-24 shrink-0 text-xs">{label}</span>
-        <div className="bg-muted h-3 flex-1 overflow-hidden rounded-full">
-          <div
-            className={`h-full rounded-full ${barColorClass}`}
-            style={{ width: `${Math.min(barPercent, 100)}%` }}
-          />
-        </div>
-        <span className="text-muted-foreground w-14 shrink-0 text-right text-xs">
-          {formatDuration(durationMs)}
-        </span>
-      </div>
-      {timing.approvalWaitMs != null && timing.approvalWaitMs > 0 ? (
-        <ApprovalWaitRow timing={timing} maxDurationMs={maxDurationMs} />
-      ) : null}
-    </div>
-  );
-}
-
-function ApprovalWaitRow({
-  timing,
-  maxDurationMs,
-}: {
-  timing: PhaseTimingData;
-  maxDurationMs: number;
-}) {
-  const waitMs = timing.approvalWaitMs ?? 0;
-  const barPercent = maxDurationMs > 0 ? Math.max(2, (waitMs / maxDurationMs) * 100) : 2;
-
-  return (
-    <div data-testid={`approval-wait-${timing.phase}`} className="flex items-center gap-3 pl-4">
-      <span className="text-muted-foreground w-20 shrink-0 text-xs">approval</span>
-      <div className="bg-muted h-2.5 flex-1 overflow-hidden rounded-full">
-        <div
-          className="h-full rounded-full bg-amber-500"
-          style={{ width: `${Math.min(barPercent, 100)}%` }}
-        />
-      </div>
-      <span className="text-muted-foreground w-14 shrink-0 text-right text-xs">
-        {formatDuration(waitMs)}
-      </span>
-    </div>
-  );
-}
-
-function SummaryTotals({ totalExecMs, totalWaitMs }: { totalExecMs: number; totalWaitMs: number }) {
-  return (
-    <div
-      data-testid="activity-summary"
-      className="border-border flex flex-col gap-1.5 border-t pt-3"
-    >
-      <SummaryRow label="Total execution" value={formatDuration(totalExecMs)} />
-      {totalWaitMs > 0 ? (
-        <>
-          <SummaryRow label="Total wait" value={formatDuration(totalWaitMs)} />
-          <SummaryRow label="Total wall-clock" value={formatDuration(totalExecMs + totalWaitMs)} />
-        </>
-      ) : null}
-    </div>
-  );
-}
-
-function SummaryRow({ label, value }: { label: string; value: string }) {
-  return (
-    <div className="flex items-center justify-between">
-      <span className="text-muted-foreground text-xs font-medium">{label}</span>
-      <span className="text-xs font-medium">{value}</span>
-    </div>
-  );
-}

package/web/.next/standalone/src/presentation/web/components/common/feature-drawer-tabs/feature-drawer-tabs.stories.tsx

@@ -1,130 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { PrStatus, CiStatus } from '@shepai/core/domain/generated/output';
-import { FeatureDrawerTabs } from './feature-drawer-tabs';
-import type { FeatureNodeData } from '@/components/common/feature-node';
-
-const meta: Meta<typeof FeatureDrawerTabs> = {
-  title: 'Drawers/Feature/Tabs/FeatureDrawerTabs',
-  component: FeatureDrawerTabs,
-  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 FeatureDrawerTabs>;
-
-/* ---------------------------------------------------------------------------
- * Data fixtures
- * ------------------------------------------------------------------------- */
-
-const runningFeature: FeatureNodeData = {
-  name: 'Auth Module',
-  description: 'Implement OAuth2 authentication flow with multiple providers',
-  featureId: '#f1',
-  lifecycle: 'implementation',
-  state: 'running',
-  progress: 65,
-  agentType: 'claude-code',
-  runtime: '2h 15m',
-  repositoryPath: '/home/user/my-repo',
-  branch: 'feat/auth-module',
-  pr: {
-    url: 'https://github.com/org/repo/pull/42',
-    number: 42,
-    status: PrStatus.Open,
-    ciStatus: CiStatus.Pending,
-    commitHash: 'abc1234567890def',
-  },
-};
-
-const doneFeature: FeatureNodeData = {
-  name: 'Payment Gateway',
-  description: 'Stripe integration for subscriptions',
-  featureId: '#f3',
-  lifecycle: 'deploy',
-  state: 'done',
-  progress: 100,
-  runtime: '1h 42m',
-  repositoryPath: '/home/user/my-repo',
-  branch: 'feat/payment-gateway',
-  pr: {
-    url: 'https://github.com/org/repo/pull/55',
-    number: 55,
-    status: PrStatus.Merged,
-    ciStatus: CiStatus.Success,
-    commitHash: 'def4567890abc123',
-  },
-};
-
-const requirementsFeature: FeatureNodeData = {
-  name: 'API Rate Limiting',
-  description: 'Implement sliding window rate limiting for public endpoints',
-  featureId: '#bi1',
-  lifecycle: 'requirements',
-  state: 'action-required',
-  progress: 0,
-  repositoryPath: '/home/user/my-repo',
-  branch: 'feat/api-rate-limiting',
-};
-
-const errorFeature: FeatureNodeData = {
-  name: 'Email Service',
-  description: 'Transactional email with SendGrid',
-  featureId: '#f5',
-  lifecycle: 'review',
-  state: 'error',
-  progress: 30,
-  errorMessage: 'Build failed: type mismatch in EmailHandler',
-  repositoryPath: '/home/user/my-repo',
-  branch: 'feat/email-service',
-};
-
-/* ---------------------------------------------------------------------------
- * Stories
- *
- * Note: In Storybook, server actions are mocked and return error states.
- * The Overview tab renders fully since it uses FeatureNodeData (no server action).
- * Activity, Messages, and Plan tabs show error states from the mocked actions.
- * See individual tab stories (ActivityTab, MessagesTab, PlanTab) for populated states.
- * ------------------------------------------------------------------------- */
-
-/** Default — running feature with full data. Overview tab active. */
-export const Default: Story = {
-  args: {
-    featureNode: runningFeature,
-    featureId: '#f1',
-  },
-};
-
-/** Completed feature in deploy phase with merged PR. */
-export const CompletedFeature: Story = {
-  args: {
-    featureNode: doneFeature,
-    featureId: '#f3',
-  },
-};
-
-/** Early-stage feature in requirements phase, no progress. */
-export const RequirementsPhase: Story = {
-  args: {
-    featureNode: requirementsFeature,
-    featureId: '#bi1',
-  },
-};
-
-/** Feature in error state. */
-export const ErrorState: Story = {
-  args: {
-    featureNode: errorFeature,
-    featureId: '#f5',
-  },
-};