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

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

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

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

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

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

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