` - Action row: `

` - "Send to PM" button: `variant="default" size="sm"` — calls `onHandoff?.(spec)`, disables during submission with `aria-disabled="true"` and `aria-busy="true"` on container - "Edit" button: `variant="outline" size="sm"` — toggles local `isEditing` state - "Save as Draft" button: `variant="ghost" size="sm"` — sets local `isDraft` state, adds "[Draft]" badge - Edit mode (when `isEditing === true`): - Each field becomes a `

` with explicit `aria-label` ("What to build", "Why it matters", "Constraints", "Success criteria") and placeholder text per UI-SPEC copywriting contract
  - Tab order: What -> Why -> Constraints -> Success -> Save changes -> Discard
  - "Save changes" button: `variant="default" size="sm"`, disabled when all four fields are empty. Uses `chatApi.editMessage(conversationId, messageId, JSON.stringify(editedSpec))` if conversationId and messageId are available
  - "Discard" button: `variant="ghost" size="sm"`, reverts local state
  - Escape key discards (add keydown handler)
- Draft mode: When `isDraft` is true, show `<span className="text-[11px] text-muted-foreground ml-2">[Draft]</span>` in the header area
- "Send to PM" disabled state while in-flight: Use local `isSubmitting` state. Set true before calling onHandoff, caller resets via success/failure.

2. Create `ui/src/components/ChatHandoffIndicator.tsx`:

```tsx
import { cn } from "../lib/utils";

interface ChatHandoffIndicatorProps {
  content: string;
}

export function ChatHandoffIndicator({ content }: ChatHandoffIndicatorProps) {
  return (
    <div
      className={cn(
        "flex items-center gap-3 py-2 text-[13px] text-muted-foreground",
        "motion-safe:animate-in motion-safe:fade-in"
      )}
      aria-label="Agent handoff from Brainstormer to PM"
    >
      <hr className="flex-1 border-border" aria-hidden="true" />
      <span className="whitespace-nowrap">{content}</span>
      <hr className="flex-1 border-border" aria-hidden="true" />
    </div>
  );
}
```
  </action>
  <verify>
    <automated>cd /opt/nexus && pnpm exec tsc --noEmit -p ui/tsconfig.json 2>&1 | head -20</automated>
  </verify>
  <acceptance_criteria>
    - grep -q "ChatSpecCard" ui/src/components/ChatSpecCard.tsx
    - grep -q "role=\"region\"" ui/src/components/ChatSpecCard.tsx
    - grep -q "Send to PM" ui/src/components/ChatSpecCard.tsx
    - grep -q "ChatHandoffIndicator" ui/src/components/ChatHandoffIndicator.tsx
    - grep -q "aria-label" ui/src/components/ChatHandoffIndicator.tsx
    - grep -q "aria-hidden" ui/src/components/ChatHandoffIndicator.tsx
  </acceptance_criteria>
  <done>ChatSpecCard renders spec sections with edit mode and action buttons; ChatHandoffIndicator renders separator-style indicator with accessibility labels</done>
</task>

<task type="auto">
  <name>Task 2: ChatTaskCreatedBadge, ChatStatusUpdateBadge, and useBrainstormerDefault</name>
  <read_first>
    - .planning/phases/23-brainstormer-flow/23-UI-SPEC.md (Task Created and Status Update sections)
    - ui/src/hooks/useStreamingChat.ts (first 20 lines for hook pattern)
    - ui/src/context/CompanyContext.tsx (for useCompany import path)
    - ui/src/api/agents.ts (for agentsApi.list pattern)
  </read_first>
  <files>
    ui/src/components/ChatTaskCreatedBadge.tsx,
    ui/src/components/ChatStatusUpdateBadge.tsx,
    ui/src/hooks/useBrainstormerDefault.ts
  </files>
  <action>
1. Create `ui/src/components/ChatTaskCreatedBadge.tsx`:

```tsx
import { Link } from "react-router-dom";
import { cn } from "../lib/utils";

interface ChatTaskCreatedBadgeProps {
  taskId?: string | null;
  taskTitle?: string | null;
  taskUrl?: string | null;
}

export function ChatTaskCreatedBadge({ taskId, taskTitle, taskUrl }: ChatTaskCreatedBadgeProps) {
  if (!taskId) {
    return (
      <div className="motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-1 inline-flex items-center gap-2 rounded-md border border-border bg-card px-3 py-1 text-[13px] text-muted-foreground">
        Creating task...
      </div>
    );
  }

return (
    <div
      className="motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-1 inline-flex items-center gap-2 rounded-md border border-border bg-card px-3 py-1 text-[13px]"
      role="status"
    >
      <span className="text-[11px] font-semibold text-muted-foreground">{taskId}</span>
      <span className="text-foreground">{taskTitle}</span>
      {taskUrl && (
        <Link
          to={taskUrl}
          className="text-primary underline-offset-2 hover:underline"
          aria-label={`View task ${taskId}`}
        >
          View task
        </Link>
      )}
    </div>
  );
}
```

2. Create `ui/src/components/ChatStatusUpdateBadge.tsx`:

```tsx
import { Link } from "react-router-dom";
import { CheckCircle2 } from "lucide-react";

interface ChatStatusUpdateBadgeProps {
  agentName: string;
  taskId: string;
  taskTitle?: string;
  taskUrl?: string;
}

export function ChatStatusUpdateBadge({ agentName, taskId, taskTitle, taskUrl }: ChatStatusUpdateBadgeProps) {
  const displayTitle = taskTitle && taskTitle.length > 40
    ? taskTitle.slice(0, 40) + "..."
    : taskTitle;

return (
    <div
      className="motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-1 inline-flex items-center gap-2 rounded-md border border-border bg-card px-3 py-1 text-[13px]"
      role="status"
    >
      <CheckCircle2 className="h-3.5 w-3.5 text-green-500 dark:text-green-400" />
      <span className="text-foreground">
        {agentName} completed {taskId}{displayTitle ? `: ${displayTitle}` : ""}
      </span>
      {taskUrl && (
        <Link
          to={taskUrl}
          className="text-primary underline-offset-2 hover:underline"
          aria-label={`View task ${taskId}`}
        >
          View task
        </Link>
      )}
    </div>
  );
}
```

3. Create `ui/src/hooks/useBrainstormerDefault.ts`:

```typescript
import { useQuery } from "@tanstack/react-query";
import { agentsApi } from "../api/agents";
import { useCompany } from "../context/CompanyContext";

export function useBrainstormerDefault(): string | null {
  const { selectedCompanyId } = useCompany();

const { data: agents = [] } = useQuery({
    queryKey: ["agents", selectedCompanyId],
    queryFn: () => agentsApi.list(selectedCompanyId!),
    enabled: !!selectedCompanyId,
  });

// Reuses same queryKey as ChatPanel's agent list — React Query deduplicates
  const generalAgent = agents
    .filter((a: { role: string }) => a.role === "general")
    .sort((a: { createdAt: string }, b: { createdAt: string }) =>
      new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
    )[0];

return generalAgent?.id ?? null;
}
```

IMPORTANT: Check the exact import paths for `useCompany` and `agentsApi` by reading existing hooks (like useStreamingChat.ts or ChatPanel.tsx). The `agentsApi.list` return type may need a type assertion — check the actual API client.

NOTE: The `Link` component import — check if this project uses `react-router-dom` or `wouter` or another router. Read an existing component that has a `Link` or `<a>` with client-side navigation to confirm the import pattern.
  </action>
  <verify>
    <automated>cd /opt/nexus && pnpm exec tsc --noEmit -p ui/tsconfig.json 2>&1 | head -20</automated>
  </verify>
  <acceptance_criteria>
    - grep -q "ChatTaskCreatedBadge" ui/src/components/ChatTaskCreatedBadge.tsx
    - grep -q "Creating task" ui/src/components/ChatTaskCreatedBadge.tsx
    - grep -q "role=\"status\"" ui/src/components/ChatTaskCreatedBadge.tsx
    - grep -q "ChatStatusUpdateBadge" ui/src/components/ChatStatusUpdateBadge.tsx
    - grep -q "CheckCircle2" ui/src/components/ChatStatusUpdateBadge.tsx
    - grep -q "useBrainstormerDefault" ui/src/hooks/useBrainstormerDefault.ts
    - grep -q "general" ui/src/hooks/useBrainstormerDefault.ts
  </acceptance_criteria>
  <done>ChatTaskCreatedBadge renders loading and resolved states with View task link; ChatStatusUpdateBadge shows CheckCircle2 + agent completion text; useBrainstormerDefault returns general role agent ID with cache deduplication</done>
</task>

</tasks>

<verification>
- `pnpm exec tsc --noEmit -p ui/tsconfig.json` passes
- All 5 new files exist and export their named components/hooks
- `pnpm vitest run --project=ui` passes (existing tests not broken)
</verification>

<success_criteria>
- ChatSpecCard renders spec card with 4 sections, edit mode, and 3 action buttons
- ChatHandoffIndicator renders separator-style with flanking hr and aria-label
- ChatTaskCreatedBadge shows "Creating task..." or resolved badge
- ChatStatusUpdateBadge shows CheckCircle2 + agent + task reference
- useBrainstormerDefault returns general agent ID or null
- All components use CSS variables for theme compatibility
- All components respect prefers-reduced-motion via motion-safe: prefix
</success_criteria>

<output>
After completion, create `.planning/phases/23-brainstormer-flow/23-02-SUMMARY.md`
</output>