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

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

@@ -1,142 +0,0 @@
-'use client';
-
-import { ExternalLink, GitCommitHorizontal } from 'lucide-react';
-import { PrStatus } from '@shepai/core/domain/generated/output';
-import { cn } from '@/lib/utils';
-import { Badge } from '@/components/ui/badge';
-import { Separator } from '@/components/ui/separator';
-import { CiStatusBadge } from '@/components/common/ci-status-badge';
-import { CometSpinner } from '@/components/ui/comet-spinner';
-import { featureNodeStateConfig, lifecycleDisplayLabels } from '@/components/common/feature-node';
-import type { FeatureNodeData } from '@/components/common/feature-node';
-
-export interface OverviewTabProps {
-  data: FeatureNodeData;
-}
-
-export function OverviewTab({ data }: OverviewTabProps) {
-  return (
-    <>
-      <div data-testid="feature-drawer-status" className="flex flex-col gap-3 p-4">
-        <div className="text-muted-foreground text-xs font-semibold tracking-wider">
-          {lifecycleDisplayLabels[data.lifecycle]}
-        </div>
-        <FeatureStateBadge data={data} />
-        {data.progress > 0 ? (
-          <div data-testid="feature-drawer-progress" className="flex flex-col gap-1">
-            <div className="text-muted-foreground flex items-center justify-between text-xs">
-              <span>Progress</span>
-              <span>{data.progress}%</span>
-            </div>
-            <div className="bg-muted h-2 w-full overflow-hidden rounded-full">
-              <div
-                className={cn(
-                  'h-full rounded-full transition-all',
-                  featureNodeStateConfig[data.state].progressClass
-                )}
-                style={{ width: `${data.progress}%` }}
-              />
-            </div>
-          </div>
-        ) : null}
-      </div>
-      {data.pr ? (
-        <>
-          <Separator />
-          <FeaturePrInfo pr={data.pr} />
-        </>
-      ) : null}
-      <FeatureDetails data={data} />
-    </>
-  );
-}
-
-function FeatureStateBadge({ data }: { data: FeatureNodeData }) {
-  const config = featureNodeStateConfig[data.state];
-  const Icon = config.icon;
-  return (
-    <div
-      className={cn(
-        'flex items-center gap-2 rounded-full px-3 py-1.5 text-sm font-medium',
-        config.badgeBgClass,
-        config.badgeClass
-      )}
-    >
-      {data.state === 'running' ? (
-        <CometSpinner size="sm" className="shrink-0" />
-      ) : (
-        <Icon className="h-4 w-4 shrink-0" />
-      )}
-      <span>{config.label}</span>
-    </div>
-  );
-}
-
-const prStatusStyles: Record<PrStatus, string> = {
-  [PrStatus.Open]: 'border-transparent bg-blue-50 text-blue-700 hover:bg-blue-50',
-  [PrStatus.Merged]: 'border-transparent bg-purple-50 text-purple-700 hover:bg-purple-50',
-  [PrStatus.Closed]: 'border-transparent bg-red-50 text-red-700 hover:bg-red-50',
-};
-
-function FeaturePrInfo({ pr }: { pr: NonNullable<FeatureNodeData['pr']> }) {
-  return (
-    <div data-testid="feature-drawer-pr" className="border-border mx-4 rounded-lg border">
-      <div className="space-y-3 px-4 py-3">
-        <div className="flex items-center justify-between">
-          <a
-            href={pr.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-primary flex items-center gap-1.5 text-sm font-semibold underline underline-offset-2"
-          >
-            PR #{pr.number}
-            <ExternalLink className="h-3.5 w-3.5" />
-          </a>
-          <Badge className={prStatusStyles[pr.status]}>{pr.status}</Badge>
-        </div>
-        {pr.ciStatus ? (
-          <div className="flex items-center justify-between">
-            <span className="text-muted-foreground text-xs font-medium">CI Status</span>
-            <CiStatusBadge status={pr.ciStatus} />
-          </div>
-        ) : null}
-        {pr.commitHash ? (
-          <div className="flex items-center justify-between">
-            <span className="text-muted-foreground text-xs font-medium">Commit</span>
-            <div className="flex items-center gap-1.5">
-              <GitCommitHorizontal className="text-muted-foreground h-3.5 w-3.5" />
-              <code className="bg-muted text-foreground rounded-md px-1.5 py-0.5 font-mono text-[11px]">
-                {pr.commitHash.slice(0, 7)}
-              </code>
-            </div>
-          </div>
-        ) : null}
-      </div>
-    </div>
-  );
-}
-
-function FeatureDetails({ data }: { data: FeatureNodeData }) {
-  const hasAnyDetail = data.agentType ?? data.runtime ?? data.blockedBy ?? data.errorMessage;
-  if (!hasAnyDetail) return null;
-  return (
-    <>
-      <Separator />
-      <div data-testid="feature-drawer-details" className="flex flex-col gap-3 p-4">
-        {data.agentType ? <DetailRow label="Agent" value={data.agentType} /> : null}
-        {data.runtime ? <DetailRow label="Runtime" value={data.runtime} /> : null}
-        {data.blockedBy ? <DetailRow label="Blocked by" value={data.blockedBy} /> : null}
-        {data.errorMessage ? <DetailRow label="Error" value={data.errorMessage} /> : null}
-      </div>
-    </>
-  );
-}
-
-function DetailRow({ label, value }: { label: string; value: string }) {
-  return (
-    <div className="flex flex-col gap-0.5">
-      <span className="text-muted-foreground text-xs font-medium">{label}</span>
-      <span className="text-sm">{value}</span>
-    </div>
-  );
-}

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

@@ -1,214 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { PlanTab } from './plan-tab';
-import type { PlanData } from '@/app/actions/get-feature-plan';
-
-const meta: Meta<typeof PlanTab> = {
-  title: 'Drawers/Feature/Tabs/PlanTab',
-  component: PlanTab,
-  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 PlanTab>;
-
-/* ---------------------------------------------------------------------------
- * Data fixtures
- * ------------------------------------------------------------------------- */
-
-const mixedTasksPlan: PlanData = {
-  state: 'Ready',
-  overview:
-    'Implement OAuth2 authentication flow with support for Google and GitHub identity providers. The implementation includes token management, callback handling, and user profile sync.',
-  tasks: [
-    {
-      title: 'Set up OAuth provider configuration',
-      description: 'Configure Google and GitHub OAuth apps with client IDs and secrets',
-      state: 'Done',
-    },
-    {
-      title: 'Implement callback handler',
-      description: 'Handle OAuth callback with authorization code exchange',
-      state: 'Done',
-    },
-    {
-      title: 'Add token refresh logic',
-      description: 'Implement silent token refresh using refresh tokens stored in httpOnly cookies',
-      state: 'Work in Progress',
-    },
-    {
-      title: 'Create user profile sync',
-      description: 'Sync user profile data from identity providers on login',
-      state: 'Todo',
-    },
-    {
-      title: 'Write integration tests',
-      description: 'Test the full OAuth flow with mocked providers',
-      state: 'Todo',
-    },
-    {
-      title: 'Update API documentation',
-      description: 'Document new authentication endpoints and flows',
-      state: 'Review',
-    },
-  ],
-};
-
-const allDonePlan: PlanData = {
-  state: 'Ready',
-  overview:
-    'All implementation tasks for the rate limiting feature have been completed successfully.',
-  tasks: [
-    {
-      title: 'Design sliding window algorithm',
-      description: 'Implement Redis-backed sliding window counter',
-      state: 'Done',
-    },
-    {
-      title: 'Add rate limit middleware',
-      description: 'Express middleware that checks rate limits per IP',
-      state: 'Done',
-    },
-    {
-      title: 'Configure limits per endpoint',
-      description: 'Set different rate limits for public vs authenticated endpoints',
-      state: 'Done',
-    },
-    {
-      title: 'Add rate limit headers',
-      description: 'Include X-RateLimit-* headers in responses',
-      state: 'Done',
-    },
-  ],
-};
-
-const draftPlan: PlanData = {
-  state: 'Requirements',
-  overview:
-    'Initial plan for implementing the notification system. Requirements are still being gathered.',
-  tasks: [
-    {
-      title: 'Define notification types',
-      description: 'Enumerate all notification events and their payloads',
-      state: 'Todo',
-    },
-    {
-      title: 'Set up WebSocket server',
-      description: 'Configure Socket.io with Redis adapter for horizontal scaling',
-      state: 'Todo',
-    },
-    {
-      title: 'Implement notification store',
-      description: 'Persist notifications in database with read/unread tracking',
-      state: 'Todo',
-    },
-  ],
-};
-
-const clarificationPlan: PlanData = {
-  state: 'ClarificationRequired',
-  overview: 'Plan requires clarification on the scope of the email template system.',
-  tasks: [
-    {
-      title: 'Set up email provider',
-      description: 'Configure SendGrid API integration',
-      state: 'Done',
-    },
-    {
-      title: 'Create template engine',
-      description: 'Implement Handlebars-based email template rendering',
-      state: 'Todo',
-    },
-  ],
-};
-
-const noTasksPlan: PlanData = {
-  state: 'Requirements',
-  overview: 'Plan overview is available but no tasks have been defined yet.',
-  tasks: [],
-};
-
-/* ---------------------------------------------------------------------------
- * Stories
- * ------------------------------------------------------------------------- */
-
-/** Default — plan with tasks in various states (Todo, WIP, Done, Review). */
-export const Default: Story = {
-  args: {
-    plan: mixedTasksPlan,
-    loading: false,
-    error: null,
-  },
-};
-
-/** All tasks completed. */
-export const AllTasksDone: Story = {
-  args: {
-    plan: allDonePlan,
-    loading: false,
-    error: null,
-  },
-};
-
-/** Draft plan in Requirements state. */
-export const DraftPlan: Story = {
-  args: {
-    plan: draftPlan,
-    loading: false,
-    error: null,
-  },
-};
-
-/** Plan requiring clarification — ClarificationRequired state badge. */
-export const ClarificationRequired: Story = {
-  args: {
-    plan: clarificationPlan,
-    loading: false,
-    error: null,
-  },
-};
-
-/** Plan with overview but no tasks defined yet. */
-export const NoTasks: Story = {
-  args: {
-    plan: noTasksPlan,
-    loading: false,
-    error: null,
-  },
-};
-
-/** Loading state — spinner displayed while data is being fetched. */
-export const Loading: Story = {
-  args: {
-    plan: null,
-    loading: true,
-    error: null,
-  },
-};
-
-/** Empty state — no plan created yet. */
-export const Empty: Story = {
-  args: {
-    plan: null,
-    loading: false,
-    error: null,
-  },
-};
-
-/** Error state — inline error message. */
-export const Error: Story = {
-  args: {
-    plan: null,
-    loading: false,
-    error: 'Failed to load plan data. Please try again.',
-  },
-};

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

@@ -1,121 +0,0 @@
-'use client';
-
-import { Loader2, Circle, Check, Eye } from 'lucide-react';
-import { AlertCircle, ListTodo } from 'lucide-react';
-import { Badge } from '@/components/ui/badge';
-import type { PlanData, PlanTaskData } from '@/app/actions/get-feature-plan';
-
-export interface PlanTabProps {
-  plan: PlanData | null;
-  loading: boolean;
-  error: string | null;
-}
-
-const planStateBadgeStyles: Record<string, string> = {
-  Requirements: 'border-transparent bg-blue-50 text-blue-700 hover:bg-blue-50',
-  ClarificationRequired: 'border-transparent bg-amber-50 text-amber-700 hover:bg-amber-50',
-  Ready: 'border-transparent bg-green-50 text-green-700 hover:bg-green-50',
-};
-
-const taskStateConfig: Record<
-  string,
-  { icon: typeof Circle; colorClass: string; spinning?: boolean }
-> = {
-  Todo: { icon: Circle, colorClass: 'text-muted-foreground' },
-  'Work in Progress': { icon: Loader2, colorClass: 'text-blue-600', spinning: true },
-  Done: { icon: Check, colorClass: 'text-emerald-600' },
-  Review: { icon: Eye, colorClass: 'text-amber-600' },
-};
-
-const defaultTaskConfig = { icon: Circle, colorClass: 'text-muted-foreground' };
-
-export function PlanTab({ plan, loading, error }: PlanTabProps) {
-  if (loading) {
-    return (
-      <div data-testid="plan-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 (!plan) {
-    return (
-      <div className="flex flex-col items-center justify-center gap-2 p-8">
-        <ListTodo className="text-muted-foreground h-8 w-8" />
-        <p className="text-muted-foreground text-sm">No plan created yet</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col gap-4 p-4">
-      <div className="flex items-center gap-2">
-        <span className="text-muted-foreground text-xs font-medium">Plan State</span>
-        <Badge
-          className={
-            planStateBadgeStyles[plan.state] ?? 'border-transparent bg-gray-50 text-gray-700'
-          }
-        >
-          {plan.state}
-        </Badge>
-      </div>
-      {plan.overview ? (
-        <div className="flex flex-col gap-1">
-          <span className="text-muted-foreground text-xs font-medium">Overview</span>
-          <p className="text-sm leading-relaxed">{plan.overview}</p>
-        </div>
-      ) : null}
-      <TaskList tasks={plan.tasks} />
-    </div>
-  );
-}
-
-function TaskList({ tasks }: { tasks: PlanTaskData[] }) {
-  if (tasks.length === 0) {
-    return (
-      <div className="flex flex-col items-center justify-center gap-2 py-4">
-        <p className="text-muted-foreground text-sm">No tasks defined yet</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col gap-1">
-      <span className="text-muted-foreground text-xs font-medium">Tasks</span>
-      <div data-testid="plan-task-list" className="flex flex-col gap-2">
-        {tasks.map((task, index) => (
-          <TaskItem key={task.title || `task-${index}`} task={task} index={index} />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function TaskItem({ task, index }: { task: PlanTaskData; index: number }) {
-  const config = taskStateConfig[task.state] ?? defaultTaskConfig;
-  const Icon = config.icon;
-
-  return (
-    <div
-      data-testid={`plan-task-${index}`}
-      className={`flex items-start gap-2 rounded-md border px-3 py-2 ${config.colorClass}`}
-    >
-      <Icon className={`mt-0.5 h-4 w-4 shrink-0 ${config.spinning ? 'animate-spin' : ''}`} />
-      <div className="flex min-w-0 flex-col gap-0.5">
-        <span className="text-sm font-medium">{task.title}</span>
-        {task.description ? (
-          <span className="text-muted-foreground text-xs">{task.description}</span>
-        ) : null}
-      </div>
-    </div>
-  );
-}

package/web/.next/standalone/src/presentation/web/components/common/feature-drawer-tabs/use-tab-data-fetch.ts

@@ -1,143 +0,0 @@
-'use client';
-
-import { useState, useRef, useCallback, useEffect } from 'react';
-
-/** State for a single tab's data, loading, and error. */
-export interface TabState<T = unknown> {
-  data: T | null;
-  loading: boolean;
-  error: string | null;
-}
-
-/** A function that fetches data for a tab given a feature ID. */
-export type TabFetcher<T = unknown> = (featureId: string) => Promise<T>;
-
-/** Map of tab keys to their fetcher functions. */
-export type TabFetchers<K extends string> = Record<K, TabFetcher>;
-
-/** Return type of the useTabDataFetch hook. */
-export interface UseTabDataFetchResult<K extends string> {
-  /** Per-tab state (data, loading, error). */
-  tabs: Record<K, TabState>;
-  /** Fetch data for a tab. Uses cache if already fetched. */
-  fetchTab: (tab: K) => Promise<void>;
-  /** Force re-fetch for a tab, bypassing cache. */
-  refreshTab: (tab: K) => Promise<void>;
-}
-
-function createInitialTabState(): TabState {
-  return { data: null, loading: false, error: null };
-}
-
-/**
- * Custom hook for lazy-loading tab data with per-tab caching.
- *
- * - Fetches data only when a tab is explicitly activated via fetchTab().
- * - Caches results so revisiting a loaded tab is instant.
- * - Clears all cached data when featureId changes.
- * - Supports force re-fetch via refreshTab() for SSE-driven updates.
- * - Uses ref-based callbacks to avoid stale closures (matches useArtifactFetch pattern).
- */
-export function useTabDataFetch<K extends string>(
-  featureId: string,
-  fetchers: TabFetchers<K>
-): UseTabDataFetchResult<K> {
-  const tabKeys = Object.keys(fetchers) as K[];
-
-  const [tabStates, setTabStates] = useState<Record<K, TabState>>(() => {
-    const initial = {} as Record<K, TabState>;
-    for (const key of tabKeys) {
-      initial[key] = createInitialTabState();
-    }
-    return initial;
-  });
-
-  // Ref-based fetchers to avoid stale closures in callbacks.
-  const fetchersRef = useRef(fetchers);
-  fetchersRef.current = fetchers;
-
-  // Ref-based featureId to use current value in callbacks.
-  const featureIdRef = useRef(featureId);
-  featureIdRef.current = featureId;
-
-  // Track mounted state to prevent state updates after unmount.
-  const mountedRef = useRef(true);
-  useEffect(() => {
-    mountedRef.current = true;
-    return () => {
-      mountedRef.current = false;
-    };
-  }, []);
-
-  // Clear all cached data when featureId changes.
-  const prevFeatureIdRef = useRef(featureId);
-  useEffect(() => {
-    if (prevFeatureIdRef.current !== featureId) {
-      prevFeatureIdRef.current = featureId;
-      setTabStates((prev) => {
-        const cleared = {} as Record<K, TabState>;
-        for (const key of Object.keys(prev) as K[]) {
-          cleared[key] = createInitialTabState();
-        }
-        return cleared;
-      });
-    }
-  }, [featureId]);
-
-  const doFetch = useCallback(async (tab: K) => {
-    const fetcher = fetchersRef.current[tab];
-    const currentFeatureId = featureIdRef.current;
-
-    if (!fetcher) return;
-
-    if (mountedRef.current) {
-      setTabStates((prev) => ({
-        ...prev,
-        [tab]: { ...prev[tab], loading: true, error: null },
-      }));
-    }
-
-    try {
-      const data = await fetcher(currentFeatureId);
-      if (mountedRef.current) {
-        setTabStates((prev) => ({
-          ...prev,
-          [tab]: { data, loading: false, error: null },
-        }));
-      }
-    } catch (error: unknown) {
-      if (mountedRef.current) {
-        const message = error instanceof Error ? error.message : 'Failed to fetch tab data';
-        setTabStates((prev) => ({
-          ...prev,
-          [tab]: { data: null, loading: false, error: message },
-        }));
-      }
-    }
-  }, []);
-
-  const fetchTab = useCallback(
-    async (tab: K) => {
-      // Check if data is already cached (non-null data means already fetched)
-      const current = tabStates[tab];
-      if (current && current.data !== null) return;
-      // Also skip if currently loading
-      if (current && current.loading) return;
-      await doFetch(tab);
-    },
-    [tabStates, doFetch]
-  );
-
-  const refreshTab = useCallback(
-    async (tab: K) => {
-      await doFetch(tab);
-    },
-    [doFetch]
-  );
-
-  return {
-    tabs: tabStates,
-    fetchTab,
-    refreshTab,
-  };
-}