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

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

@@ -0,0 +1,136 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import { getFeaturePhaseTimings } from '@/app/actions/get-feature-phase-timings';
+import type { PhaseTimingData } from '@/app/actions/get-feature-phase-timings';
+import { getFeatureMessages } from '@/app/actions/get-feature-messages';
+import type { MessageData } from '@/app/actions/get-feature-messages';
+import { getFeaturePlan } from '@/app/actions/get-feature-plan';
+import type { PlanData } from '@/app/actions/get-feature-plan';
+import type { FeatureNodeData } from '@/components/common/feature-node';
+import { OverviewTab } from './overview-tab';
+import { ActivityTab } from './activity-tab';
+import { MessagesTab } from './messages-tab';
+import { PlanTab } from './plan-tab';
+import { useTabDataFetch } from './use-tab-data-fetch';
+import type { TabFetchers } from './use-tab-data-fetch';
+
+type TabKey = 'activity' | 'messages' | 'plan';
+type ActiveTab = 'overview' | TabKey;
+
+export interface FeatureDrawerTabsProps {
+  featureNode: FeatureNodeData;
+  featureId: string;
+}
+
+async function fetchActivity(featureId: string): Promise<PhaseTimingData[]> {
+  const result = await getFeaturePhaseTimings(featureId);
+  if ('error' in result) throw new Error(result.error);
+  return result.timings;
+}
+
+async function fetchMessages(featureId: string): Promise<MessageData[]> {
+  const result = await getFeatureMessages(featureId);
+  if ('error' in result) throw new Error(result.error);
+  return result.messages;
+}
+
+async function fetchPlan(featureId: string): Promise<PlanData | undefined> {
+  const result = await getFeaturePlan(featureId);
+  if ('error' in result) throw new Error(result.error);
+  return result.plan;
+}
+
+const TAB_FETCHERS: TabFetchers<TabKey> = {
+  activity: fetchActivity,
+  messages: fetchMessages,
+  plan: fetchPlan,
+};
+
+export function FeatureDrawerTabs({ featureNode, featureId }: FeatureDrawerTabsProps) {
+  const [activeTab, setActiveTab] = useState<ActiveTab>('overview');
+  const { tabs, fetchTab, refreshTab } = useTabDataFetch<TabKey>(featureId, TAB_FETCHERS);
+
+  // Reset to overview when featureId changes
+  const prevFeatureIdRef = useRef(featureId);
+  useEffect(() => {
+    if (prevFeatureIdRef.current !== featureId) {
+      prevFeatureIdRef.current = featureId;
+      setActiveTab('overview');
+    }
+  }, [featureId]);
+
+  // SSE refresh: re-fetch active tab data when featureNode reference changes
+  const featureNodeRef = useRef(featureNode);
+  const activeTabRef = useRef(activeTab);
+  activeTabRef.current = activeTab;
+
+  useEffect(() => {
+    if (featureNodeRef.current !== featureNode) {
+      featureNodeRef.current = featureNode;
+      const current = activeTabRef.current;
+      if (current !== 'overview') {
+        refreshTab(current);
+      }
+    }
+  }, [featureNode, refreshTab]);
+
+  const handleTabChange = useCallback(
+    (value: string) => {
+      const tab = value as ActiveTab;
+      setActiveTab(tab);
+      if (tab !== 'overview') {
+        fetchTab(tab);
+      }
+    },
+    [fetchTab]
+  );
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <Tabs
+        value={activeTab}
+        onValueChange={handleTabChange}
+        className="flex min-h-0 flex-1 flex-col"
+      >
+        <div className="shrink-0 px-4 pt-4">
+          <TabsList className="grid w-full grid-cols-4">
+            <TabsTrigger value="overview">Overview</TabsTrigger>
+            <TabsTrigger value="activity">Activity</TabsTrigger>
+            <TabsTrigger value="messages">Messages</TabsTrigger>
+            <TabsTrigger value="plan">Plan</TabsTrigger>
+          </TabsList>
+        </div>
+
+        <TabsContent value="overview" className="mt-0 flex-1 overflow-y-auto">
+          <OverviewTab data={featureNode} />
+        </TabsContent>
+
+        <TabsContent value="activity" className="mt-0 flex-1 overflow-y-auto">
+          <ActivityTab
+            timings={tabs.activity.data as PhaseTimingData[] | null}
+            loading={tabs.activity.loading}
+            error={tabs.activity.error}
+          />
+        </TabsContent>
+
+        <TabsContent value="messages" className="mt-0 flex-1 overflow-y-auto">
+          <MessagesTab
+            messages={tabs.messages.data as MessageData[] | null}
+            loading={tabs.messages.loading}
+            error={tabs.messages.error}
+          />
+        </TabsContent>
+
+        <TabsContent value="plan" className="mt-0 flex-1 overflow-y-auto">
+          <PlanTab
+            plan={tabs.plan.data as PlanData | null}
+            loading={tabs.plan.loading}
+            error={tabs.plan.error}
+          />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

package/web/.next/standalone/src/presentation/web/components/common/feature-drawer-tabs/index.ts

@@ -0,0 +1,2 @@
+export { FeatureDrawerTabs } from './feature-drawer-tabs';
+export type { FeatureDrawerTabsProps } from './feature-drawer-tabs';

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

@@ -0,0 +1,149 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MessagesTab } from './messages-tab';
+import type { MessageData } from '@/app/actions/get-feature-messages';
+
+const meta: Meta<typeof MessagesTab> = {
+  title: 'Drawers/Feature/Tabs/MessagesTab',
+  component: MessagesTab,
+  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 MessagesTab>;
+
+/* ---------------------------------------------------------------------------
+ * Data fixtures
+ * ------------------------------------------------------------------------- */
+
+const mixedRoleMessages: MessageData[] = [
+  {
+    role: 'assistant',
+    content:
+      'I will implement the OAuth2 authentication flow. Let me start by analyzing the existing codebase to understand the current auth patterns.',
+  },
+  {
+    role: 'user',
+    content: 'Please make sure to support Google and GitHub as identity providers.',
+  },
+  {
+    role: 'assistant',
+    content:
+      'Understood. I will implement support for both Google and GitHub OAuth providers. I have identified the following files that need to be modified:\n\n- src/auth/providers.ts\n- src/auth/callback-handler.ts\n- src/config/oauth.ts',
+  },
+  {
+    role: 'user',
+    content: 'Looks good. Please also add refresh token support.',
+  },
+  {
+    role: 'assistant',
+    content:
+      'I have completed the implementation with refresh token support. The changes include:\n\n1. Token refresh endpoint at /api/auth/refresh\n2. Automatic token rotation on expiry\n3. Secure httpOnly cookie storage for refresh tokens',
+  },
+];
+
+const messagesWithOptions: MessageData[] = [
+  {
+    role: 'assistant',
+    content: 'Which authentication strategy should we use for the API endpoints?',
+    options: [
+      'JWT with refresh tokens',
+      'Session-based auth',
+      'API key authentication',
+      'OAuth2 bearer tokens',
+    ],
+    selectedOption: 0,
+    answer: 'JWT with refresh tokens',
+  },
+  {
+    role: 'user',
+    content: 'JWT with refresh tokens is the right choice for our use case.',
+  },
+  {
+    role: 'assistant',
+    content: 'How should we handle token expiration?',
+    options: ['Silent refresh', 'Redirect to login', 'Show warning before expiry'],
+    selectedOption: 2,
+    answer: 'Show warning before expiry',
+  },
+  {
+    role: 'assistant',
+    content:
+      'I will implement the JWT authentication with silent refresh tokens and a warning notification shown 5 minutes before token expiry.',
+  },
+];
+
+const singleMessage: MessageData[] = [
+  {
+    role: 'assistant',
+    content:
+      'Starting feature analysis. I will review the codebase and propose an implementation plan.',
+  },
+];
+
+/* ---------------------------------------------------------------------------
+ * Stories
+ * ------------------------------------------------------------------------- */
+
+/** Default — mixed assistant and user messages. */
+export const Default: Story = {
+  args: {
+    messages: mixedRoleMessages,
+    loading: false,
+    error: null,
+  },
+};
+
+/** Messages with options — shows options list with selected answers highlighted. */
+export const WithOptions: Story = {
+  args: {
+    messages: messagesWithOptions,
+    loading: false,
+    error: null,
+  },
+};
+
+/** Single message — minimal conversation. */
+export const SingleMessage: Story = {
+  args: {
+    messages: singleMessage,
+    loading: false,
+    error: null,
+  },
+};
+
+/** Loading state — spinner displayed while data is being fetched. */
+export const Loading: Story = {
+  args: {
+    messages: null,
+    loading: true,
+    error: null,
+  },
+};
+
+/** Empty state — no messages yet. */
+export const Empty: Story = {
+  args: {
+    messages: [],
+    loading: false,
+    error: null,
+  },
+};
+
+/** Error state — inline error message. */
+export const Error: Story = {
+  args: {
+    messages: null,
+    loading: false,
+    error: 'Failed to load messages. Please try again.',
+  },
+};

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

@@ -0,0 +1,92 @@
+'use client';
+
+import { Loader2, AlertCircle, MessageSquare } from 'lucide-react';
+import type { MessageData } from '@/app/actions/get-feature-messages';
+
+export interface MessagesTabProps {
+  messages: MessageData[] | null;
+  loading: boolean;
+  error: string | null;
+}
+
+export function MessagesTab({ messages, loading, error }: MessagesTabProps) {
+  if (loading) {
+    return (
+      <div data-testid="messages-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 (!messages || messages.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-2 p-8">
+        <MessageSquare className="text-muted-foreground h-8 w-8" />
+        <p className="text-muted-foreground text-sm">No messages yet</p>
+      </div>
+    );
+  }
+
+  return (
+    <div data-testid="messages-list" className="flex flex-col gap-3 p-4">
+      {messages.map((msg, index) => (
+        // eslint-disable-next-line react/no-array-index-key -- messages are append-only, never reorder
+        <MessageItem key={`msg-${index}`} message={msg} />
+      ))}
+    </div>
+  );
+}
+
+function MessageItem({ message }: { message: MessageData }) {
+  const isAssistant = message.role === 'assistant';
+
+  return (
+    <div
+      data-testid={`message-${message.role}`}
+      className={`flex flex-col gap-1.5 rounded-lg px-3 py-2 ${
+        isAssistant ? 'bg-muted/50' : 'border-primary/20 border-l-2 pl-3'
+      }`}
+    >
+      <span
+        className={`text-xs font-medium ${isAssistant ? 'text-muted-foreground' : 'text-primary'}`}
+      >
+        {message.role}
+      </span>
+      <p className="text-sm leading-relaxed whitespace-pre-wrap">{message.content}</p>
+      {message.options && message.options.length > 0 ? (
+        <div className="mt-1 flex flex-col gap-1">
+          <span className="text-muted-foreground text-xs font-medium">Options:</span>
+          <ul className="flex flex-col gap-0.5">
+            {message.options.map((option, idx) => {
+              const isSelected = message.selectedOption === idx;
+              return (
+                <li
+                  // eslint-disable-next-line react/no-array-index-key -- options are static, never reorder
+                  key={`option-${idx}`}
+                  className={`text-xs ${isSelected ? 'font-medium text-emerald-600' : 'text-muted-foreground'}`}
+                >
+                  {isSelected ? '✓ ' : '○ '}
+                  {option}
+                </li>
+              );
+            })}
+          </ul>
+          {message.answer ? (
+            <span className="mt-0.5 text-xs font-medium text-emerald-600">
+              Answer: {message.answer}
+            </span>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,186 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PrStatus, CiStatus } from '@shepai/core/domain/generated/output';
+import { OverviewTab } from './overview-tab';
+import type { FeatureNodeData } from '@/components/common/feature-node';
+
+const meta: Meta<typeof OverviewTab> = {
+  title: 'Drawers/Feature/Tabs/OverviewTab',
+  component: OverviewTab,
+  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 OverviewTab>;
+
+/* ---------------------------------------------------------------------------
+ * Data fixtures
+ * ------------------------------------------------------------------------- */
+
+const fullData: 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 noPrData: FeatureNodeData = {
+  name: 'Search Index',
+  description: 'Elasticsearch full-text search setup',
+  featureId: '#f4',
+  lifecycle: 'implementation',
+  state: 'running',
+  progress: 40,
+  agentType: 'claude-code',
+  repositoryPath: '/home/user/my-repo',
+  branch: 'feat/search-index',
+};
+
+const noProgressData: 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 doneData: 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 blockedData: FeatureNodeData = {
+  name: 'Email Service',
+  description: 'Transactional email with SendGrid',
+  featureId: '#f5',
+  lifecycle: 'implementation',
+  state: 'blocked',
+  progress: 20,
+  blockedBy: 'Auth Module',
+  repositoryPath: '/home/user/my-repo',
+  branch: 'feat/email-service',
+};
+
+const errorData: FeatureNodeData = {
+  name: 'Notification System',
+  description: 'Real-time notifications via WebSockets',
+  featureId: '#f6',
+  lifecycle: 'review',
+  state: 'error',
+  progress: 30,
+  errorMessage: 'Build failed: type mismatch in NotificationHandler',
+  repositoryPath: '/home/user/my-repo',
+  branch: 'feat/notifications',
+};
+
+const minimalData: FeatureNodeData = {
+  name: 'Minimal Feature',
+  featureId: '#f0',
+  lifecycle: 'requirements',
+  state: 'creating',
+  progress: 0,
+  repositoryPath: '/home/user/my-repo',
+  branch: '',
+};
+
+/* ---------------------------------------------------------------------------
+ * Stories
+ * ------------------------------------------------------------------------- */
+
+/** Default — full data with status, progress, PR card, and details. */
+export const Default: Story = {
+  args: { data: fullData },
+};
+
+/** Feature with no PR — PR card is hidden. */
+export const NoPr: Story = {
+  args: { data: noPrData },
+};
+
+/** Feature with 0% progress — progress bar is hidden. */
+export const NoProgress: Story = {
+  args: { data: noProgressData },
+};
+
+/** Completed feature in deploy phase with merged PR. */
+export const DoneWithMergedPr: Story = {
+  args: { data: doneData },
+};
+
+/** Blocked feature showing blocked-by detail. */
+export const Blocked: Story = {
+  args: { data: blockedData },
+};
+
+/** Error state showing error message detail. */
+export const Error: Story = {
+  args: { data: errorData },
+};
+
+/** Minimal data — only required fields, no optional details or PR. */
+export const Minimal: Story = {
+  args: { data: minimalData },
+};
+
+/* ---------------------------------------------------------------------------
+ * Lifecycle phase stories
+ * ------------------------------------------------------------------------- */
+
+/** Requirements phase. */
+export const RequirementsPhase: Story = {
+  args: { data: { ...noPrData, lifecycle: 'requirements' as const } },
+};
+
+/** Research phase. */
+export const ResearchPhase: Story = {
+  args: { data: { ...noPrData, lifecycle: 'research' as const } },
+};
+
+/** Review phase. */
+export const ReviewPhase: Story = {
+  args: { data: { ...noPrData, lifecycle: 'review' as const } },
+};
+
+/** Maintain phase. */
+export const MaintainPhase: Story = {
+  args: { data: { ...noPrData, lifecycle: 'maintain' as const } },
+};