@shepai/cli 1.76.0-pr240.447630e → 1.76.0-pr241.9ff2c05

package/web/.next/standalone/src/presentation/web/app/actions/get-feature-plan.ts

@@ -0,0 +1,52 @@
+'use server';
+
+import { resolve } from '@/lib/server-container';
+import type { IFeatureRepository } from '@shepai/core/application/ports/output/repositories/feature-repository.interface';
+
+export interface PlanTaskData {
+  title: string;
+  description: string;
+  state: string;
+}
+
+export interface PlanData {
+  state: string;
+  overview: string;
+  tasks: PlanTaskData[];
+}
+
+type GetPlanResult = { plan: PlanData | undefined } | { error: string };
+
+export async function getFeaturePlan(featureId: string): Promise<GetPlanResult> {
+  if (!featureId.trim()) {
+    return { error: 'Feature id is required' };
+  }
+
+  try {
+    const repo = resolve<IFeatureRepository>('IFeatureRepository');
+    const feature = await repo.findById(featureId);
+
+    if (!feature) {
+      return { error: 'Feature not found' };
+    }
+
+    if (!feature.plan) {
+      return { plan: undefined };
+    }
+
+    const plan: PlanData = {
+      state: feature.plan.state,
+      overview: feature.plan.overview,
+      tasks: feature.plan.tasks.map((t) => ({
+        title: t.title ?? '',
+        description: t.description ?? '',
+        state: t.state,
+      })),
+    };
+
+    return { plan };
+  } catch (error: unknown) {
+    const message = error instanceof Error ? error.message : 'Failed to load feature plan';
+    return { error: message };
+  }
+}

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

@@ -0,0 +1,272 @@
+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

@@ -0,0 +1,245 @@
+'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

@@ -0,0 +1,130 @@
+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',
+  },
+};