@shepai/cli 1.77.2-pr240.88b3534 → 1.77.2-pr243.1fc63c3

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

@@ -20,13 +20,14 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
-import { CheckboxGroup } from '@/components/ui/checkbox-group';
-import { CheckboxGroupItem } from '@/components/ui/checkbox-group-item';
 import { Badge } from '@/components/ui/badge';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Switch } from '@/components/ui/switch';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { useGuardedDrawerClose } from '@/hooks/drawer-close-guard';
 import type { FileAttachment } from '@shepai/core/infrastructure/services/file-dialog.service';
 import type { WorkflowDefaults } from '@/app/actions/get-workflow-defaults';
+import { AgentModelPicker } from '@/components/features/settings/AgentModelPicker';
 import { pickFiles } from './pick-files';
 
 export type { FileAttachment } from '@shepai/core/infrastructure/services/file-dialog.service';
@@ -51,6 +52,10 @@ export interface FeatureCreatePayload {
   parentId?: string;
   /** When true, skip SDLC phases and implement directly from the prompt. */
   fast: boolean;
+  /** Optional agent type override for this feature run */
+  agentType?: string;
+  /** Optional model override for this feature run */
+  model?: string;
 }
 
 const AUTO_APPROVE_OPTIONS = [
@@ -76,6 +81,10 @@ export interface FeatureCreateDrawerProps {
   features?: ParentFeatureOption[];
   /** Pre-select a parent feature when the drawer opens (e.g. from (+) button on a feature node). */
   initialParentId?: string;
+  /** Current global agent type from settings */
+  currentAgentType?: string;
+  /** Current global model from settings */
+  currentModel?: string;
 }
 
 export function FeatureCreateDrawer({
@@ -87,6 +96,8 @@ export function FeatureCreateDrawer({
   workflowDefaults,
   features,
   initialParentId,
+  currentAgentType,
+  currentModel,
 }: FeatureCreateDrawerProps) {
   const createSound = useSoundAction('create');
   const defaultGates = workflowDefaults?.approvalGates ?? EMPTY_GATES;
@@ -100,6 +111,8 @@ export function FeatureCreateDrawer({
   const [openPr, setOpenPr] = useState(defaultOpenPr);
   const [parentId, setParentId] = useState<string | undefined>(undefined);
   const [fast, setFast] = useState(false);
+  const [overrideAgent, setOverrideAgent] = useState<string | undefined>(undefined);
+  const [overrideModel, setOverrideModel] = useState<string | undefined>(undefined);
 
   // Sync state when workflowDefaults load asynchronously
   useEffect(() => {
@@ -125,6 +138,8 @@ export function FeatureCreateDrawer({
     setOpenPr(defaultOpenPr);
     setParentId(undefined);
     setFast(false);
+    setOverrideAgent(undefined);
+    setOverrideModel(undefined);
   }, [defaultGates, defaultPush, defaultOpenPr]);
 
   // Track whether the form has unsaved data
@@ -150,6 +165,8 @@ export function FeatureCreateDrawer({
         push: push || openPr,
         openPr,
         fast,
+        ...(overrideAgent ? { agentType: overrideAgent } : {}),
+        ...(overrideModel ? { model: overrideModel } : {}),
         ...(parentId ? { parentId } : {}),
       });
       resetForm();
@@ -163,6 +180,8 @@ export function FeatureCreateDrawer({
       push,
       openPr,
       fast,
+      overrideAgent,
+      overrideModel,
       parentId,
       createSound,
       resetForm,
@@ -226,135 +245,236 @@ export function FeatureCreateDrawer({
     >
       {/* Form body */}
       <div className="overflow-y-auto p-4">
-        <form id="create-feature-form" onSubmit={handleSubmit} className="flex flex-col gap-4">
-          {/* Description */}
-          <div className="flex flex-col gap-1.5">
-            <Label
-              htmlFor="feature-description"
-              className="text-muted-foreground text-xs font-semibold tracking-wider"
-            >
-              DESCRIBE YOUR FEATURE
-            </Label>
-            <Textarea
-              id="feature-description"
-              placeholder="e.g. Add GitHub OAuth login with callback handling and token refresh..."
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              rows={4}
-              required
-              disabled={isSubmitting}
-            />
-          </div>
-
-          {/* Parent feature selector (only when features are available) */}
-          {hasFeatures ? (
+        <TooltipProvider delayDuration={400}>
+          <form id="create-feature-form" onSubmit={handleSubmit} className="flex flex-col gap-4">
+            {/* Description + inline controls */}
             <div className="flex flex-col gap-1.5">
               <Label
-                htmlFor="parent-feature"
+                htmlFor="feature-description"
                 className="text-muted-foreground text-xs font-semibold tracking-wider"
               >
-                PARENT FEATURE
+                DESCRIBE YOUR FEATURE
               </Label>
-              <ParentFeatureCombobox
-                features={features}
-                value={parentId}
-                onChange={setParentId}
-                disabled={isSubmitting}
-              />
+              <div className="border-input focus-within:ring-ring/50 focus-within:border-ring overflow-hidden rounded-md border shadow-xs transition-[color,box-shadow] focus-within:ring-[3px]">
+                <Textarea
+                  id="feature-description"
+                  placeholder="e.g. Add GitHub OAuth login with callback handling and token refresh..."
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  rows={7}
+                  required
+                  disabled={isSubmitting}
+                  className="field-sizing-fixed min-h-42! resize-none rounded-none border-0 shadow-none focus-visible:ring-0"
+                />
+                <div className="border-input flex items-center gap-3 border-t px-3 py-1.5">
+                  <AgentModelPicker
+                    initialAgentType={overrideAgent ?? currentAgentType ?? 'claude-code'}
+                    initialModel={overrideModel ?? currentModel ?? 'claude-sonnet-4-6'}
+                    mode="override"
+                    onAgentModelChange={(agent, model) => {
+                      setOverrideAgent(agent);
+                      setOverrideModel(model);
+                    }}
+                    disabled={isSubmitting}
+                  />
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <div className="ml-auto flex cursor-pointer items-center gap-2">
+                        <Switch
+                          id="fast-mode"
+                          checked={fast}
+                          onCheckedChange={setFast}
+                          disabled={isSubmitting}
+                        />
+                        <Label htmlFor="fast-mode" className="cursor-pointer text-sm font-medium">
+                          Fast Mode
+                        </Label>
+                      </div>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom">
+                      Skip SDLC phases and implement directly from your prompt.
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
+              </div>
             </div>
-          ) : null}
 
-          {/* Fast mode toggle */}
-          <div className="flex flex-col gap-1.5">
-            <Label className="text-muted-foreground text-xs font-semibold tracking-wider">
-              MODE
-            </Label>
-            <CheckboxGroupItem
-              id="fast-mode"
-              label="Fast Mode"
-              description="Skip SDLC phases and implement directly from your prompt."
-              checked={fast}
-              onCheckedChange={setFast}
-              disabled={isSubmitting}
-            />
-          </div>
-
-          {/* Auto-approve checkboxes */}
-          <div className="flex flex-col gap-1.5">
-            <Label className="text-muted-foreground text-xs font-semibold tracking-wider">
-              APPROVE
-            </Label>
-            <CheckboxGroup
-              label="Autonomous Mode"
-              description="YOLO!"
-              parentAriaLabel="Auto approve all"
-              options={AUTO_APPROVE_OPTIONS}
-              value={approvalGates}
-              onValueChange={setApprovalGates}
-              disabled={isSubmitting}
-            />
-          </div>
+            {/* Parent feature selector (only when opened from a feature node) */}
+            {hasFeatures && initialParentId !== undefined ? (
+              <div className="flex flex-col gap-1.5">
+                <Label
+                  htmlFor="parent-feature"
+                  className="text-muted-foreground text-xs font-semibold tracking-wider"
+                >
+                  PARENT FEATURE
+                </Label>
+                <ParentFeatureCombobox
+                  features={features}
+                  value={parentId}
+                  onChange={setParentId}
+                  disabled={isSubmitting}
+                />
+              </div>
+            ) : null}
 
-          {/* Git options */}
-          <div className="flex flex-col gap-1.5">
-            <Label className="text-muted-foreground text-xs font-semibold tracking-wider">
-              GIT
-            </Label>
+            {/* Approve + Git — compact switch groups */}
             <div className="flex flex-col gap-2">
-              <CheckboxGroupItem
-                id="push"
-                label="Push"
-                description="Push branch to remote after implementation."
-                checked={push || openPr}
-                onCheckedChange={setPush}
-                disabled={openPr || isSubmitting}
-              />
-              <CheckboxGroupItem
-                id="open-pr"
-                label="Create PR"
-                description="Open a pull request after pushing."
-                checked={openPr}
-                onCheckedChange={setOpenPr}
-                disabled={isSubmitting}
-              />
-            </div>
-          </div>
+              {/* Approve row */}
+              <div className="border-input flex items-center gap-4 rounded-md border px-3 py-2.5">
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <span className="text-muted-foreground w-16 shrink-0 cursor-default text-xs font-semibold tracking-wider">
+                      APPROVE
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom">
+                    Auto-approve phase transitions without manual review.
+                  </TooltipContent>
+                </Tooltip>
+                <div className="flex flex-1 items-center gap-4">
+                  {AUTO_APPROVE_OPTIONS.map((opt) => (
+                    <Tooltip key={opt.id}>
+                      <TooltipTrigger asChild>
+                        <div className="flex cursor-pointer items-center gap-1.5">
+                          <Switch
+                            id={`approve-${opt.id}`}
+                            size="sm"
+                            checked={approvalGates[opt.id] ?? false}
+                            onCheckedChange={(v) =>
+                              setApprovalGates((prev) => ({ ...prev, [opt.id]: v }))
+                            }
+                            disabled={
+                              isSubmitting ||
+                              (fast && (opt.id === 'allowPrd' || opt.id === 'allowPlan'))
+                            }
+                          />
+                          <Label
+                            htmlFor={`approve-${opt.id}`}
+                            className="cursor-pointer text-xs font-medium"
+                          >
+                            {opt.label}
+                          </Label>
+                        </div>
+                      </TooltipTrigger>
+                      <TooltipContent side="bottom">
+                        {fast && (opt.id === 'allowPrd' || opt.id === 'allowPlan')
+                          ? 'Skipped in Fast Mode'
+                          : opt.description}
+                      </TooltipContent>
+                    </Tooltip>
+                  ))}
+                </div>
+                {/* Select all shortcut */}
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        const allOn = AUTO_APPROVE_OPTIONS.every((o) => approvalGates[o.id]);
+                        const next: Record<string, boolean> = {};
+                        for (const o of AUTO_APPROVE_OPTIONS) next[o.id] = !allOn;
+                        setApprovalGates(next);
+                      }}
+                      disabled={isSubmitting}
+                      className={cn(
+                        'text-muted-foreground hover:text-foreground cursor-pointer rounded px-1.5 py-0.5 text-[10px] font-semibold tracking-wider uppercase transition-colors',
+                        AUTO_APPROVE_OPTIONS.every((o) => approvalGates[o.id]) && 'text-primary'
+                      )}
+                    >
+                      All
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom">Toggle all approval gates</TooltipContent>
+                </Tooltip>
+              </div>
 
-          {/* Attachments */}
-          <div className="flex flex-col gap-2">
-            <div className="flex items-center justify-between">
-              <Label className="text-muted-foreground text-xs font-semibold tracking-wider">
-                ATTACHMENTS
-                {attachments.length > 0 && (
-                  <span className="text-muted-foreground/60 ml-1.5">({attachments.length})</span>
-                )}
-              </Label>
-              <Button
-                type="button"
-                variant="outline"
-                size="xs"
-                onClick={handleAddFiles}
-                disabled={isSubmitting}
-              >
-                <PlusIcon className="size-3" />
-                Add Files
-              </Button>
+              {/* Git row */}
+              <div className="border-input flex items-center gap-4 rounded-md border px-3 py-2.5">
+                <span className="text-muted-foreground w-16 shrink-0 text-xs font-semibold tracking-wider">
+                  GIT
+                </span>
+                <div className="flex flex-1 items-center gap-4">
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <div className="flex cursor-pointer items-center gap-1.5">
+                        <Switch
+                          id="push"
+                          size="sm"
+                          checked={push || openPr}
+                          onCheckedChange={(v) => {
+                            setPush(v);
+                            if (!v && openPr) setOpenPr(false);
+                          }}
+                          disabled={isSubmitting}
+                        />
+                        <Label htmlFor="push" className="cursor-pointer text-xs font-medium">
+                          Push
+                        </Label>
+                      </div>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom">
+                      Push branch to remote after implementation.
+                    </TooltipContent>
+                  </Tooltip>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <div className="flex cursor-pointer items-center gap-1.5">
+                        <Switch
+                          id="open-pr"
+                          size="sm"
+                          checked={openPr}
+                          onCheckedChange={setOpenPr}
+                          disabled={isSubmitting}
+                        />
+                        <Label htmlFor="open-pr" className="cursor-pointer text-xs font-medium">
+                          PR
+                        </Label>
+                      </div>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom">
+                      Open a pull request after pushing.
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
+              </div>
             </div>
 
-            {attachments.length > 0 && (
-              <div className="flex flex-col gap-2">
-                {attachments.map((file) => (
-                  <AttachmentCard
-                    key={file.path}
-                    file={file}
-                    onRemove={() => handleRemoveFile(file.path)}
-                    disabled={isSubmitting}
-                  />
-                ))}
+            {/* Attachments */}
+            <div className="flex flex-col gap-2">
+              <div className="flex items-center justify-between">
+                <Label className="text-muted-foreground text-xs font-semibold tracking-wider">
+                  ATTACHMENTS
+                  {attachments.length > 0 && (
+                    <span className="text-muted-foreground/60 ml-1.5">({attachments.length})</span>
+                  )}
+                </Label>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="xs"
+                  onClick={handleAddFiles}
+                  disabled={isSubmitting}
+                >
+                  <PlusIcon className="size-3" />
+                  Add Files
+                </Button>
               </div>
-            )}
-          </div>
-        </form>
+
+              {attachments.length > 0 && (
+                <div className="flex flex-col gap-2">
+                  {attachments.map((file) => (
+                    <AttachmentCard
+                      key={file.path}
+                      file={file}
+                      onRemove={() => handleRemoveFile(file.path)}
+                      disabled={isSubmitting}
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+          </form>
+        </TooltipProvider>
       </div>
     </BaseDrawer>
   );

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

@@ -218,9 +218,7 @@ const stateFixtures: Record<FeatureNodeState, FeatureNodeData> = {
 
 const allLifecycles: FeatureLifecyclePhase[] = [
   'requirements',
-  'gathering',
   'research',
-  'planning',
   'implementation',
   'review',
   'deploy',

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/derive-feature-state.ts

@@ -116,7 +116,6 @@ export function mapEventTypeToState(eventType: NotificationEventType): FeatureNo
 export const sdlcLifecycleMap: Record<string, FeatureLifecyclePhase> = {
   Requirements: 'requirements',
   Research: 'research',
-  Planning: 'planning',
   Implementation: 'implementation',
   Review: 'review',
   'Deploy & QA': 'deploy',
@@ -126,9 +125,9 @@ export const sdlcLifecycleMap: Record<string, FeatureLifecyclePhase> = {
 /** Map agent graph node names (from agent_run.result or SSE phaseName) to UI lifecycle phases. */
 const phaseNameToLifecycle: Record<string, FeatureLifecyclePhase> = {
   analyze: 'requirements',
-  requirements: 'gathering',
+  requirements: 'requirements',
   research: 'research',
-  plan: 'planning',
+  plan: 'implementation',
   implement: 'implementation',
   merge: 'review',
   maintain: 'maintain',