@shepai/cli 1.77.2 → 1.78.0

package/web/.next/standalone/src/presentation/web/components/common/feature-list-item/feature-list-item.stories.tsx

@@ -27,6 +27,8 @@ export const ActionNeeded: Story = {
   args: {
     name: 'Auth Module',
     status: 'action-needed',
+    agentType: 'claude-code',
+    modelId: 'claude-sonnet-4-6',
   },
 };
 
@@ -35,6 +37,8 @@ export const InProgress: Story = {
     name: 'Payment Integration',
     status: 'in-progress',
     startedAt: Date.now() - 330_000,
+    agentType: 'cursor',
+    modelId: 'claude-opus-4-6',
   },
 };
 
@@ -43,6 +47,8 @@ export const Done: Story = {
     name: 'User Dashboard',
     status: 'done',
     duration: '2h',
+    agentType: 'gemini-cli',
+    modelId: 'gemini-2.5-pro',
   },
 };
 
@@ -50,6 +56,16 @@ export const WithClickHandler: Story = {
   args: {
     name: 'API Gateway',
     status: 'action-needed',
+    agentType: 'dev',
+    modelId: 'gpt-8',
     onClick: () => alert('Clicked!'),
   },
 };
+
+export const WithoutAgent: Story = {
+  args: {
+    name: 'Legacy Feature',
+    status: 'in-progress',
+    startedAt: Date.now() - 60_000,
+  },
+};

package/web/.next/standalone/src/presentation/web/components/common/feature-list-item/feature-list-item.tsx

@@ -1,15 +1,24 @@
 'use client';
 
 import { SidebarMenuItem, SidebarMenuButton } from '@/components/ui/sidebar';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { ElapsedTime } from '@/components/common/elapsed-time';
 import { featureStatusConfig } from '@/components/common/feature-status-config';
 import type { FeatureStatus } from '@/components/common/feature-status-config';
+import {
+  getAgentTypeIcon,
+  agentTypeLabels,
+  type AgentTypeValue,
+} from '@/components/common/feature-node/agent-type-icons';
+import { getModelMeta } from '@/lib/model-metadata';
 
 export interface FeatureListItemProps {
   name: string;
   status: FeatureStatus;
   startedAt?: number;
   duration?: string;
+  agentType?: string;
+  modelId?: string;
   onClick?: () => void;
 }
 
@@ -18,9 +27,12 @@ export function FeatureListItem({
   status,
   startedAt,
   duration,
+  agentType,
+  modelId,
   onClick,
 }: FeatureListItemProps) {
   const { icon: StatusIcon, iconClass } = featureStatusConfig[status];
+  const AgentIcon = agentType ? getAgentTypeIcon(agentType) : null;
 
   return (
     <SidebarMenuItem data-testid="feature-list-item">
@@ -43,6 +55,27 @@ export function FeatureListItem({
             {duration}
           </span>
         ) : null}
+        {AgentIcon ? (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className="ml-auto shrink-0">
+                  <AgentIcon className="h-3.5 w-3.5" />
+                </span>
+              </TooltipTrigger>
+              <TooltipContent side="right">
+                <span className="font-medium">
+                  {agentTypeLabels[agentType as AgentTypeValue] ?? agentType}
+                </span>
+                {modelId ? (
+                  <span className="ml-1 opacity-70">
+                    · {getModelMeta(modelId).displayName || modelId}
+                  </span>
+                ) : null}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        ) : null}
       </SidebarMenuButton>
     </SidebarMenuItem>
   );

package/web/.next/standalone/src/presentation/web/components/common/feature-node/agent-type-icons.tsx

@@ -1,6 +1,5 @@
 import type { ComponentType, SVGProps } from 'react';
 import Image from 'next/image';
-import { Beaker } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
 /** Agent type values mirroring the TypeSpec AgentType enum. */
@@ -35,8 +34,51 @@ export function DefaultAgentIcon(props: IconProps) {
   );
 }
 
+/** Colorful flask icon for the Demo Executor agent. */
 function DevAgentIcon({ className, ...props }: IconProps) {
-  return <Beaker className={cn('h-6 w-6', className)} {...(props as object)} />;
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn('h-6 w-6', className)}
+      {...(props as object)}
+    >
+      <defs>
+        <linearGradient
+          id="dev-flask-grad"
+          x1="6"
+          y1="22"
+          x2="18"
+          y2="8"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0%" stopColor="#8B5CF6" />
+          <stop offset="50%" stopColor="#EC4899" />
+          <stop offset="100%" stopColor="#F59E0B" />
+        </linearGradient>
+      </defs>
+      {/* Flask body */}
+      <path
+        d="M9 2h6v6l4.5 9a2 2 0 0 1-1.79 2.89H6.29A2 2 0 0 1 4.5 17L9 8V2z"
+        fill="url(#dev-flask-grad)"
+        opacity="0.9"
+      />
+      {/* Flask neck outline */}
+      <path
+        d="M9 2h6v6l4.5 9a2 2 0 0 1-1.79 2.89H6.29A2 2 0 0 1 4.5 17L9 8V2z"
+        stroke="url(#dev-flask-grad)"
+        strokeWidth="1.5"
+        fill="none"
+      />
+      {/* Bubbles */}
+      <circle cx="10" cy="14" r="1.2" fill="white" opacity="0.7" />
+      <circle cx="13.5" cy="16" r="0.8" fill="white" opacity="0.5" />
+      <circle cx="11.5" cy="17.5" r="0.6" fill="white" opacity="0.4" />
+      {/* Spark */}
+      <path d="M16 4l1-2 1 2-2 1 2 1-1 2-1-2-2-1z" fill="#F59E0B" />
+    </svg>
+  );
 }
 DevAgentIcon.displayName = 'DevAgentIcon';
 
@@ -49,6 +91,16 @@ const agentTypeIconMap: Record<AgentTypeValue, ComponentType<IconProps>> = {
   dev: DevAgentIcon,
 };
 
+/** Human-readable labels for agent types. */
+export const agentTypeLabels: Record<AgentTypeValue, string> = {
+  'claude-code': 'Claude Code',
+  cursor: 'Cursor',
+  'gemini-cli': 'Gemini CLI',
+  aider: 'Aider',
+  continue: 'Continue',
+  dev: 'Demo',
+};
+
 /** Resolve an agent type string to its corresponding icon component. */
 export function getAgentTypeIcon(agentType?: string): ComponentType<IconProps> {
   if (agentType && agentType in agentTypeIconMap) {

package/web/.next/standalone/src/presentation/web/components/common/feature-node/feature-node-state-config.ts

@@ -63,6 +63,8 @@ export interface FeatureNodeData {
   errorMessage?: string;
   /** Agent executor type (e.g. "claude-code", "cursor"). */
   agentType?: AgentTypeValue;
+  /** LLM model identifier used for this feature's agent run. */
+  modelId?: string;
   /** PR metadata for features with an associated pull request */
   pr?: {
     url: string;

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

@@ -83,6 +83,8 @@ const allStatesData: FeatureNodeData[] = [
     lifecycle: 'implementation' as FeatureLifecyclePhase,
     state: 'running',
     progress: 45,
+    agentType: 'claude-code' as AgentTypeValue,
+    modelId: 'claude-sonnet-4-6',
     repositoryPath: '/home/user/my-repo',
     branch: 'feat/auth-module',
   },
@@ -93,6 +95,8 @@ const allStatesData: FeatureNodeData[] = [
     lifecycle: 'requirements' as FeatureLifecyclePhase,
     state: 'action-required',
     progress: 22,
+    agentType: 'claude-code' as AgentTypeValue,
+    modelId: 'claude-sonnet-4-6',
     repositoryPath: '/home/user/my-repo',
     branch: 'feat/api-rate-limiting',
   },
@@ -103,6 +107,8 @@ const allStatesData: FeatureNodeData[] = [
     lifecycle: 'implementation' as FeatureLifecyclePhase,
     state: 'action-required',
     progress: 40,
+    agentType: 'cursor' as AgentTypeValue,
+    modelId: 'claude-opus-4-6',
     repositoryPath: '/home/user/my-repo',
     branch: 'feat/data-pipeline',
   },
@@ -113,6 +119,8 @@ const allStatesData: FeatureNodeData[] = [
     lifecycle: 'review' as FeatureLifecyclePhase,
     state: 'action-required',
     progress: 90,
+    agentType: 'gemini-cli' as AgentTypeValue,
+    modelId: 'gemini-2.5-pro',
     repositoryPath: '/home/user/my-repo',
     branch: 'feat/merge-review',
   },
@@ -124,6 +132,8 @@ const allStatesData: FeatureNodeData[] = [
     state: 'done',
     progress: 100,
     runtime: '1h 42m',
+    agentType: 'claude-code' as AgentTypeValue,
+    modelId: 'claude-sonnet-4-6',
     repositoryPath: '/home/user/my-repo',
     branch: 'feat/payment-gateway',
   },
@@ -135,6 +145,8 @@ const allStatesData: FeatureNodeData[] = [
     state: 'blocked',
     progress: 20,
     blockedBy: 'Auth Module',
+    agentType: 'claude-code' as AgentTypeValue,
+    modelId: 'claude-opus-4-6',
     repositoryPath: '/home/user/my-repo',
     branch: 'feat/search-index',
   },
@@ -146,6 +158,8 @@ const allStatesData: FeatureNodeData[] = [
     state: 'error',
     progress: 30,
     errorMessage: 'Build failed: type mismatch',
+    agentType: 'dev' as AgentTypeValue,
+    modelId: 'gpt-8',
     repositoryPath: '/home/user/my-repo',
     branch: 'feat/email-service',
   },
@@ -202,6 +216,7 @@ const allAgentTypesData: FeatureNodeData[] = [
     state: 'running',
     progress: 50,
     agentType: 'claude-code' as AgentTypeValue,
+    modelId: 'claude-sonnet-4-6',
     repositoryPath: '/home/user/my-repo',
     branch: 'feat/claude-code',
   },
@@ -213,6 +228,7 @@ const allAgentTypesData: FeatureNodeData[] = [
     state: 'running',
     progress: 50,
     agentType: 'cursor' as AgentTypeValue,
+    modelId: 'claude-opus-4-6',
     repositoryPath: '/home/user/my-repo',
     branch: 'feat/cursor',
   },
@@ -224,6 +240,7 @@ const allAgentTypesData: FeatureNodeData[] = [
     state: 'running',
     progress: 50,
     agentType: 'gemini-cli' as AgentTypeValue,
+    modelId: 'gemini-2.5-pro',
     repositoryPath: '/home/user/my-repo',
     branch: 'feat/gemini-cli',
   },
@@ -235,6 +252,7 @@ const allAgentTypesData: FeatureNodeData[] = [
     state: 'running',
     progress: 50,
     agentType: 'aider' as AgentTypeValue,
+    modelId: 'claude-sonnet-4-6',
     repositoryPath: '/home/user/my-repo',
     branch: 'feat/aider',
   },
@@ -246,6 +264,7 @@ const allAgentTypesData: FeatureNodeData[] = [
     state: 'running',
     progress: 50,
     agentType: 'continue' as AgentTypeValue,
+    modelId: 'claude-sonnet-4-6',
     repositoryPath: '/home/user/my-repo',
     branch: 'feat/continue',
   },

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

@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import { Handle, Position } from '@xyflow/react';
-import { Settings, Plus, FileText, Wrench, GitMerge, Trash2, type LucideIcon } from 'lucide-react';
+import { Plus, FileText, Wrench, GitMerge, Trash2, type LucideIcon } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import {
   Dialog,
@@ -21,7 +21,8 @@ import {
   lifecycleRunningVerbs,
 } from './feature-node-state-config';
 import type { FeatureNodeData } from './feature-node-state-config';
-import { getAgentTypeIcon } from './agent-type-icons';
+import { getAgentTypeIcon, agentTypeLabels, type AgentTypeValue } from './agent-type-icons';
+import { getModelMeta } from '@/lib/model-metadata';
 
 function AgentIcon({ agentType, className }: { agentType?: string; className?: string }) {
   const IconComponent = getAgentTypeIcon(agentType);
@@ -160,7 +161,7 @@ export function FeatureNode({
           selected && 'ring-primary ring-2'
         )}
       >
-        {/* Top row: lifecycle label + settings */}
+        {/* Top row: lifecycle label + agent icon */}
         <div className="flex items-center justify-between">
           <span
             data-testid="feature-node-lifecycle-label"
@@ -168,19 +169,40 @@ export function FeatureNode({
           >
             {data.state === 'blocked' ? 'BLOCKED' : lifecycleDisplayLabels[data.lifecycle]}
           </span>
-          {data.onSettings ? (
-            <button
-              type="button"
-              aria-label="Settings"
-              data-testid="feature-node-settings-button"
-              onClick={(e) => {
-                e.stopPropagation();
-                data.onSettings?.();
-              }}
-              className="nodrag text-muted-foreground hover:text-foreground -mt-1 -mr-1 p-1"
-            >
-              <Settings className="h-3.5 w-3.5" />
-            </button>
+          {data.agentType ? (
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    aria-label={agentTypeLabels[data.agentType as AgentTypeValue] ?? data.agentType}
+                    data-testid="feature-node-agent-badge"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      data.onSettings?.();
+                    }}
+                    className={cn(
+                      'nodrag -mt-1 -mr-1 p-1',
+                      data.onSettings
+                        ? 'cursor-pointer opacity-80 transition-opacity hover:opacity-100'
+                        : 'cursor-default'
+                    )}
+                  >
+                    <AgentIcon agentType={data.agentType} className="h-3.5 w-3.5" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">
+                  <span className="font-medium">
+                    {agentTypeLabels[data.agentType as AgentTypeValue] ?? data.agentType}
+                  </span>
+                  {data.modelId ? (
+                    <span className="ml-1 opacity-70">
+                      · {getModelMeta(data.modelId).displayName || data.modelId}
+                    </span>
+                  ) : null}
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           ) : null}
         </div>
 

package/web/.next/standalone/src/presentation/web/components/features/control-center/control-center-inner.tsx

@@ -86,6 +86,8 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
           status,
           ...(d.startedAt != null && { startedAt: d.startedAt }),
           ...(d.runtime != null && { duration: d.runtime }),
+          ...(d.agentType && { agentType: d.agentType }),
+          ...(d.modelId && { modelId: d.modelId }),
         };
       })
       .filter(Boolean) as {
@@ -94,6 +96,8 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
       status: 'action-needed' | 'in-progress' | 'done';
       startedAt?: number;
       duration?: string;
+      agentType?: string;
+      modelId?: string;
     }[];
 
     setSidebarFeatures(sidebarItems);

package/web/.next/standalone/src/presentation/web/components/features/settings/AgentModelPicker/AgentModelPicker.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { AgentModelPicker } from './index';
+
+const meta: Meta<typeof AgentModelPicker> = {
+  title: 'Features/Settings/AgentModelPicker',
+  component: AgentModelPicker,
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div className="w-80">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    onAgentModelChange: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ClaudeCodeDefault: Story = {
+  args: {
+    initialAgentType: 'claude-code',
+    initialModel: 'claude-sonnet-4-6',
+    mode: 'settings',
+  },
+};
+
+export const CursorSelected: Story = {
+  args: {
+    initialAgentType: 'cursor',
+    initialModel: 'gpt-5.4',
+    mode: 'settings',
+  },
+};
+
+export const GeminiCli: Story = {
+  args: {
+    initialAgentType: 'gemini-cli',
+    initialModel: 'gemini-2.5-pro',
+    mode: 'settings',
+  },
+};
+
+export const DemoAgent: Story = {
+  args: {
+    initialAgentType: 'dev',
+    initialModel: '',
+    mode: 'settings',
+  },
+};
+
+export const OverrideMode: Story = {
+  args: {
+    initialAgentType: 'claude-code',
+    initialModel: 'claude-sonnet-4-6',
+    mode: 'override',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    initialAgentType: 'claude-code',
+    initialModel: 'claude-sonnet-4-6',
+    mode: 'settings',
+    disabled: true,
+  },
+};