Build agentic PM demo app

.env.example

@@ -0,0 +1,4 @@
+LLM_API_BASE_URL=https://api.openai.com/v1
+LLM_API_KEY=
+LLM_MODEL=gpt-4.1-mini
+

.gitignore

@@ -0,0 +1,46 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+!.env.example
+
+# local tool/cache state
+.npm-cache/
+.claude/
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

AGENTS.md

@@ -0,0 +1,29 @@
+<!-- BEGIN:nextjs-agent-rules -->
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+<!-- END:nextjs-agent-rules -->
+
+# Agentic PM Demo (Codex)
+
+## Product
+
+Build an independent web demo called **Agentic PM Demo** (not a Codex plugin).
+
+The UI is split:
+
+- Left: chat workspace
+- Right: structured IoT product-development work packages
+
+## MVP Rules
+
+1. Seed work packages from `agentic_pm_demo_codex_plans/data/work-packages.seed.json`.
+2. Support commands:
+   - `@WorkPackageName ask ...`
+   - `@WorkPackageName plan ...`
+   - `@WorkPackageName change ...`
+   - `@WorkPackageName execute ...`
+3. All `execute` tasks are simulated.
+4. Every simulated output must include this disclaimer verbatim:
+
+> This is a simulated execution result generated for demo purposes. No real external tool, engineering review, certification approval, user database, image generation service, patent search, or test system was executed.

Dockerfile

@@ -0,0 +1,16 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm ci
+
+COPY . .
+
+RUN npm run build
+
+EXPOSE 3000
+
+ENV PORT=3000
+CMD ["npm", "start"]
+

README.md

@@ -6,7 +6,36 @@ colorTo: gray
 sdk: docker
 pinned: false
 license: mit
-short_description: work with Agent to co-develope Hardware products
+short_description: Agentic PM demo for hardware product development
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Agentic PM Demo
+
+Two-column demo app:
+
+- Left: chat with an AI assistant
+- Right: structured IoT product-development work packages
+
+## Local run
+
+```bash
+npm install
+npm run dev
+```
+
+Open `http://localhost:3000`.
+
+## Environment
+
+Copy `.env.example` to `.env.local` and set:
+
+- `LLM_API_BASE_URL` (OpenAI-compatible)
+- `LLM_API_KEY` (optional; app runs in mock mode without it)
+- `LLM_MODEL`
+
+## Docker (Hugging Face Spaces)
+
+```bash
+docker build -t agentic-pm-demo .
+docker run --rm -p 3000:3000 agentic-pm-demo
+```

agentic_pm_demo_codex_plans/.gitignore

@@ -0,0 +1,6 @@
+.next
+node_modules
+out
+.env*.local
+.npm-cache
+npm-debug.log*

agentic_pm_demo_codex_plans/AGENTS.md

@@ -0,0 +1,57 @@
+# AGENTS.md — Codex Instructions
+
+## Project
+
+Build an independent web demo called **Agentic PM Demo**.
+
+The application demonstrates an AI-native product management workflow for IoT product development.
+
+## Development Principles
+
+1. Keep the MVP small and working.
+2. Build UI first with mock data.
+3. Add LLM integration only after the local UI works.
+4. All tool execution must be simulated in MVP.
+5. Never imply simulated execution is real.
+6. Keep data models explicit and typed.
+7. Use OpenAI-compatible API format.
+8. Make the app deployable to Hugging Face Spaces with Docker.
+
+## Required App Features
+
+1. Two-column layout: left chat, right work package board.
+2. Seed work packages from `data/work-packages.seed.json`.
+3. Support commands:
+   - `@WorkPackageName ask ...`
+   - `@WorkPackageName plan ...`
+   - `@WorkPackageName change ...`
+   - `@WorkPackageName execute ...`
+4. For `ask`, do not change the board.
+5. For `plan`, update tasks or next steps.
+6. For `change`, update work package fields.
+7. For `execute`, generate simulated outputs and append them to the selected package.
+8. Every simulated output must show the disclaimer.
+
+## Recommended Implementation Order
+
+1. Create Next.js project scaffold.
+2. Add static two-column layout.
+3. Add seed work package board.
+4. Add chat input and message history.
+5. Add command parser.
+6. Add local mock agent fallback.
+7. Add LLM API route.
+8. Add prompt contract and structured JSON parsing.
+9. Add Dockerfile for Hugging Face Spaces.
+10. Polish UX.
+
+## Avoid in MVP
+
+- No login.
+- No database.
+- No real external tool execution.
+- No real patent search.
+- No real certification validation.
+- No real user-data reading.
+- No real image generation.
+- No complex drag-and-drop kanban.

agentic_pm_demo_codex_plans/README.md

@@ -0,0 +1,61 @@
+# Agentic PM Demo — Codex Development Pack
+
+This pack contains Codex-ready planning documents for an independent **Agentic PM Demo** web app.
+
+## Product Direction
+
+Build an independent web demo, not a Codex plugin. Codex is used as the development assistant; the product itself is a web app.
+
+## Demo Concept
+
+A user chats with an AI assistant on the left side. The right side shows structured product-development work packages. The user can reference a work package and ask the AI to `ask`, `plan`, `change`, or `execute` its contents.
+
+## MVP Rule
+
+All `execute` tasks are simulated. The app must clearly label all execution outputs as fake/simulated.
+
+Default disclaimer:
+
+> This is a simulated execution result generated for demo purposes. No real external tool, engineering review, certification approval, user database, image generation service, patent search, or test system was executed.
+
+## Recommended Stack
+
+- Next.js
+- React
+- TypeScript
+- Tailwind CSS
+- shadcn/ui
+- OpenAI-compatible LLM API
+- Docker for Hugging Face Spaces
+
+## Documents
+
+- `AGENTS.md`
+- `plans/01-product-vision-and-scope.md`
+- `plans/02-ux-layout-and-interaction.md`
+- `plans/03-work-package-data-model.md`
+- `plans/04-work-package-catalog.md`
+- `plans/05-reference-command-and-execution.md`
+- `plans/06-llm-api-and-prompt-contract.md`
+- `plans/07-technical-architecture-and-file-structure.md`
+- `plans/08-local-run-and-huggingface-deployment.md`
+- `prompts/work-package-system-prompt.md`
+- `data/work-packages.seed.json`
+
+## Local UI Prototype
+
+This folder now also contains a small Next.js demo UI for the Agentic PM workspace.
+
+```bash
+npm install
+npm run dev
+```
+
+Open `http://localhost:3000` and try:
+
+```text
+@SRS plan Break this into verification tasks.
+@Design FMEA execute Generate a risk table for a tightening-quality IoT product.
+```
+
+The UX pattern is intentionally Cursor/Codex-like: chat stays on the left, work packages stay on the right, and every package section can be cited into the composer with `@Package#Context` references.

agentic_pm_demo_codex_plans/app/globals.css

@@ -0,0 +1,1007 @@
+:root {
+  --page-bg: #f6f9fd;
+  --page-tint: rgba(85, 132, 214, 0.08);
+  --surface: rgba(255, 255, 255, 0.96);
+  --surface-strong: #ffffff;
+  --surface-muted: #eef4fb;
+  --surface-accent: #f4f8fd;
+  --ink: #18202b;
+  --muted: #637182;
+  --line: rgba(24, 32, 43, 0.1);
+  --line-strong: rgba(24, 32, 43, 0.2);
+  --accent: #3d6fd6;
+  --accent-soft: rgba(61, 111, 214, 0.12);
+  --success: #2f7a56;
+  --warning: #b97b18;
+  --shadow: 0 16px 36px rgba(42, 73, 122, 0.08);
+  --font-sans: "Avenir Next", "IBM Plex Sans", "Segoe UI", sans-serif;
+  --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+  min-height: 100%;
+  overflow: hidden;
+}
+
+body {
+  margin: 0;
+  background:
+    radial-gradient(circle at top left, rgba(255, 255, 255, 0.9), transparent 28rem),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(246, 249, 253, 0.98)),
+    var(--page-bg);
+  color: var(--ink);
+  font-family: var(--font-sans);
+  overscroll-behavior: none;
+}
+
+body::before {
+  background:
+    linear-gradient(120deg, transparent 0%, var(--page-tint) 42%, transparent 72%),
+    repeating-linear-gradient(
+      90deg,
+      transparent 0,
+      transparent 23px,
+      rgba(31, 27, 22, 0.018) 23px,
+      rgba(31, 27, 22, 0.018) 24px
+    );
+  content: "";
+  inset: 0;
+  pointer-events: none;
+  position: fixed;
+}
+
+button,
+textarea {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+svg {
+  display: block;
+  flex: 0 0 auto;
+  height: 1rem;
+  width: 1rem;
+}
+
+.pm-shell {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
+  height: 100vh;
+  min-height: 760px;
+  overflow: hidden;
+  padding: 12px;
+  position: relative;
+}
+
+.chat-rail,
+.workspace-canvas,
+.agent-log-zone {
+  backdrop-filter: blur(14px);
+  background: var(--surface);
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow);
+}
+
+.chat-rail {
+  border-radius: 12px;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.project-strip {
+  align-items: center;
+  border-bottom: 1px solid var(--line);
+  display: grid;
+  gap: 12px;
+  grid-template-columns: 52px 1fr;
+  padding: 12px;
+}
+
+.project-mark {
+  align-items: center;
+  background: linear-gradient(145deg, #ffffff, #eef4fb);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  color: var(--accent);
+  display: flex;
+  height: 52px;
+  justify-content: center;
+}
+
+.project-meta p,
+.workspace-title p,
+.panel-kicker span,
+.composer-topline span:last-child,
+.agent-log-header p,
+.phase-column header small,
+.context-section-header span,
+.stat-card span,
+.agent-summary-card span,
+.agent-summary-card small,
+.empty-copy,
+.chat-bubble strong {
+  color: var(--muted);
+}
+
+.project-meta p {
+  font-size: 0.72rem;
+  letter-spacing: 0.12em;
+  margin: 0 0 4px;
+  text-transform: uppercase;
+}
+
+.project-meta h1,
+.workspace-title h2,
+.detail-hero-copy h1,
+.context-section h3,
+.agent-log-header h2 {
+  font-family: var(--font-display);
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  margin: 0;
+}
+
+.project-meta h1 {
+  font-size: 1.1rem;
+}
+
+.project-meta span {
+  color: var(--muted);
+  display: block;
+  font-size: 0.88rem;
+  margin-top: 2px;
+}
+
+.chat-history {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.panel-kicker {
+  align-items: center;
+  border-bottom: 1px solid var(--line);
+  display: flex;
+  gap: 8px;
+  padding: 10px 14px;
+}
+
+.panel-kicker span {
+  font-size: 0.82rem;
+  font-weight: 600;
+}
+
+.message-stack {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 10px;
+  overflow: auto;
+  padding: 12px;
+}
+
+.chat-bubble {
+  background: rgba(255, 255, 255, 0.84);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  max-width: 92%;
+  padding: 10px 11px;
+}
+
+.chat-bubble.user {
+  align-self: flex-end;
+  background: rgba(61, 111, 214, 0.08);
+  border-color: rgba(61, 111, 214, 0.22);
+}
+
+.chat-bubble strong {
+  display: block;
+  font-size: 0.72rem;
+  margin-bottom: 4px;
+  text-transform: uppercase;
+}
+
+.chat-bubble p {
+  font-size: 0.92rem;
+  line-height: 1.45;
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+.chat-input-zone {
+  border-top: 1px solid var(--line);
+  padding: 12px;
+}
+
+.composer-topline,
+.quick-action-row,
+.reference-row,
+.input-toolbar,
+.workspace-tabs,
+.workspace-title,
+.package-card-topline,
+.package-card-actions,
+.floating-cite-bar,
+.detail-hero-actions,
+.simple-tags,
+.simple-task,
+.context-section-header,
+.simple-output-header,
+.agent-log-header,
+.agent-log-content {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+}
+
+.composer-topline {
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.composer-topline span {
+  font-size: 0.8rem;
+}
+
+.reference-row {
+  flex-wrap: wrap;
+  margin-bottom: 8px;
+}
+
+.reference-chip {
+  background: var(--surface-strong);
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  color: var(--ink);
+  font-size: 0.75rem;
+  padding: 6px 9px;
+}
+
+.reference-chip.removable {
+  color: #8f5530;
+}
+
+.quick-action-row {
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+}
+
+.quick-action-button,
+.workspace-tabs button,
+.phase-nav-button,
+.context-section-header button,
+.detail-hero-actions button,
+.floating-cite-bar button,
+.selection-cite button,
+.back-button,
+.send-button,
+.ghost-button {
+  align-items: center;
+  background: var(--surface-strong);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  color: var(--ink);
+  display: inline-flex;
+  gap: 8px;
+  justify-content: center;
+  padding: 8px 12px;
+  transition:
+    transform 160ms ease,
+    border-color 160ms ease,
+    background-color 160ms ease;
+}
+
+.quick-action-button:hover,
+.workspace-tabs button:hover,
+.phase-nav-button:hover,
+.context-section-header button:hover,
+.detail-hero-actions button:hover,
+.floating-cite-bar button:hover,
+.selection-cite button:hover,
+.back-button:hover,
+.send-button:hover,
+.ghost-button:hover,
+.package-card:hover {
+  border-color: rgba(61, 111, 214, 0.34);
+  transform: translateY(-1px);
+}
+
+.quick-action-button {
+  font-size: 0.8rem;
+  padding: 7px 10px;
+}
+
+.quick-action-button svg,
+.detail-hero-actions button svg,
+.context-section-header button svg,
+.floating-cite-bar button svg,
+.selection-cite button svg {
+  color: var(--accent);
+}
+
+.composer-wrap {
+  position: relative;
+}
+
+textarea {
+  background: rgba(255, 255, 255, 0.82);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  color: var(--ink);
+  min-height: 124px;
+  outline: 0;
+  padding: 12px 14px;
+  resize: none;
+  width: 100%;
+}
+
+textarea::placeholder {
+  color: #8b9ab0;
+}
+
+textarea:focus {
+  border-color: rgba(61, 111, 214, 0.32);
+  box-shadow: 0 0 0 4px rgba(61, 111, 214, 0.08);
+}
+
+.mention-popover {
+  background: var(--surface-strong);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  bottom: calc(100% + 8px);
+  box-shadow: var(--shadow);
+  display: grid;
+  gap: 5px;
+  left: 0;
+  padding: 8px;
+  position: absolute;
+  width: 100%;
+  z-index: 3;
+}
+
+.mention-popover button {
+  background: transparent;
+  border: 0;
+  border-radius: 6px;
+  display: grid;
+  gap: 2px;
+  padding: 8px;
+  text-align: left;
+}
+
+.mention-popover button:hover {
+  background: var(--surface-muted);
+}
+
+.mention-popover span {
+  font-weight: 700;
+}
+
+.mention-popover small {
+  color: var(--muted);
+}
+
+.input-toolbar {
+  justify-content: space-between;
+  margin-top: 10px;
+}
+
+.ghost-button,
+.send-button {
+  border-radius: 8px;
+  height: 38px;
+  padding: 0;
+  width: 38px;
+}
+
+.ghost-button svg,
+.send-button svg {
+  height: 0.95rem;
+  width: 0.95rem;
+}
+
+.send-button {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #f8fbff;
+}
+
+.main-workspace {
+  display: grid;
+  gap: 14px;
+  grid-template-rows: minmax(0, 1fr) 164px;
+  min-width: 0;
+}
+
+.workspace-canvas {
+  border-radius: 12px;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  min-height: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+.workspace-toolbar {
+  align-items: center;
+  border-bottom: 1px solid var(--line);
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 16px;
+}
+
+.workspace-title svg,
+.panel-kicker svg,
+.agent-log-header svg {
+  color: var(--accent);
+}
+
+.workspace-title h2,
+.agent-log-header h2 {
+  font-size: 1.05rem;
+}
+
+.workspace-title p,
+.agent-log-header p {
+  font-size: 0.86rem;
+  margin: 2px 0 0;
+}
+
+.workspace-tabs button {
+  font-size: 0.82rem;
+  padding: 8px 11px;
+}
+
+.workspace-tabs button.active {
+  background: var(--accent-soft);
+  border-color: rgba(61, 111, 214, 0.2);
+  color: #315aa9;
+}
+
+.overview-layout {
+  display: grid;
+  grid-template-columns: 170px minmax(0, 1fr);
+  min-height: 0;
+  overflow: hidden;
+}
+
+.phase-rail {
+  border-right: 1px solid var(--line);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: hidden;
+  padding: 14px;
+}
+
+.phase-rail p {
+  color: var(--muted);
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  margin: 0 0 2px;
+  text-transform: uppercase;
+}
+
+.phase-nav-button {
+  justify-content: space-between;
+  text-align: left;
+}
+
+.phase-nav-button span {
+  font-size: 0.88rem;
+}
+
+.phase-nav-button small {
+  color: var(--muted);
+  font-size: 0.76rem;
+}
+
+.overview-content {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: auto;
+  padding: 12px 14px 58px;
+}
+
+.stat-row {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin-bottom: 14px;
+}
+
+.stat-card {
+  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 253, 0.96));
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 10px 12px;
+}
+
+.stat-card span {
+  display: block;
+  font-size: 0.8rem;
+  margin-bottom: 10px;
+}
+
+.stat-card strong {
+  font-family: var(--font-display);
+  font-size: 1.55rem;
+}
+
+.phase-map {
+  display: grid;
+  flex: 1 1 auto;
+  gap: 12px;
+}
+
+.phase-column header {
+  align-items: baseline;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.phase-column header span {
+  font-size: 0.82rem;
+  font-weight: 700;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+}
+
+.package-card-grid {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+}
+
+.package-card {
+  background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 253, 0.96));
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 12px;
+  text-align: left;
+  transition:
+    transform 160ms ease,
+    border-color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.package-card.selected {
+  border-color: rgba(61, 111, 214, 0.4);
+  box-shadow: inset 0 0 0 1px rgba(61, 111, 214, 0.16);
+}
+
+.package-card-topline {
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.package-short {
+  color: #315aa9;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.status-pill {
+  border-radius: 999px;
+  font-size: 0.72rem;
+  padding: 5px 8px;
+}
+
+.status-pill.todo {
+  background: #edf3f8;
+  color: #59697d;
+}
+
+.status-pill.in_progress {
+  background: #f5e7c9;
+  color: var(--warning);
+}
+
+.status-pill.done {
+  background: #deefe6;
+  color: var(--success);
+}
+
+.package-card h3 {
+  font-size: 1rem;
+  margin: 0 0 8px;
+}
+
+.package-card p {
+  color: var(--muted);
+  font-size: 0.84rem;
+  line-height: 1.35;
+  margin: 0 0 10px;
+}
+
+.package-card-actions {
+  justify-content: space-between;
+}
+
+.package-card-actions > span,
+.package-card-actions button {
+  align-items: center;
+  display: inline-flex;
+  gap: 6px;
+}
+
+.package-card-actions > span {
+  color: var(--muted);
+  font-size: 0.78rem;
+}
+
+.package-card-actions button {
+  background: transparent;
+  border: 0;
+  border-radius: 999px;
+  color: var(--accent);
+  padding: 4px;
+}
+
+.floating-cite-bar {
+  background: rgba(255, 255, 255, 0.96);
+  border-top: 1px solid var(--line);
+  inset: auto 0 0 0;
+  justify-content: space-between;
+  padding: 10px 14px;
+  position: absolute;
+}
+
+.floating-cite-bar span {
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+
+.floating-cite-bar button {
+  padding: 8px 10px;
+}
+
+.detail-layout {
+  min-height: 0;
+  overflow: auto;
+  padding: 14px;
+}
+
+.detail-hero {
+  background: linear-gradient(140deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 253, 0.96));
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  display: grid;
+  gap: 18px;
+  grid-template-columns: 170px minmax(0, 1fr) auto;
+  margin-bottom: 14px;
+  padding: 14px;
+}
+
+.back-button {
+  align-self: start;
+  justify-self: start;
+}
+
+.detail-hero-copy {
+  min-width: 0;
+}
+
+.status-label {
+  color: #315aa9;
+  display: inline-block;
+  font-size: 0.76rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  margin-bottom: 10px;
+  text-transform: uppercase;
+}
+
+.detail-hero-copy h1 {
+  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
+  margin-bottom: 8px;
+}
+
+.detail-hero-copy p {
+  color: var(--muted);
+  font-size: 1rem;
+  line-height: 1.55;
+  margin: 0;
+  max-width: 48rem;
+}
+
+.detail-hero-actions {
+  align-items: flex-start;
+  flex-direction: column;
+}
+
+.detail-hero-actions button {
+  justify-content: flex-start;
+  width: 132px;
+}
+
+.detail-content-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.context-section {
+  background: rgba(255, 255, 255, 0.78);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 14px;
+}
+
+.context-section-header {
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.context-section h3 {
+  font-size: 1.02rem;
+  margin-bottom: 3px;
+}
+
+.context-section-header span {
+  display: block;
+  font-size: 0.8rem;
+}
+
+.context-section-header button {
+  padding: 8px 10px;
+}
+
+.context-section p {
+  color: var(--muted);
+  font-size: 0.92rem;
+  line-height: 1.5;
+  margin: 0;
+}
+
+.simple-tags {
+  flex-wrap: wrap;
+}
+
+.simple-tags span {
+  background: var(--surface-strong);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  font-size: 0.8rem;
+  padding: 7px 10px;
+}
+
+.simple-task-list {
+  display: grid;
+  gap: 12px;
+}
+
+.simple-task {
+  align-items: flex-start;
+}
+
+.task-status-dot {
+  background: #b8a895;
+  border-radius: 999px;
+  height: 10px;
+  margin-top: 4px;
+  width: 10px;
+}
+
+.task-status-dot.in_progress {
+  background: var(--warning);
+}
+
+.task-status-dot.done {
+  background: var(--success);
+}
+
+.simple-task strong {
+  display: block;
+  margin-bottom: 3px;
+}
+
+.simple-output {
+  background: var(--surface-strong);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.simple-output + .simple-output {
+  margin-top: 10px;
+}
+
+.simple-output-header {
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.simple-output-header span {
+  color: #315aa9;
+  font-size: 0.76rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+pre {
+  color: var(--ink);
+  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
+  font-size: 0.83rem;
+  line-height: 1.5;
+  margin: 0 0 10px;
+  overflow: auto;
+  white-space: pre-wrap;
+}
+
+.selection-cite {
+  background: rgba(255, 255, 255, 0.98);
+  border: 1px solid rgba(61, 111, 214, 0.28);
+  border-radius: 8px;
+  bottom: 0;
+  justify-content: space-between;
+  margin-top: 14px;
+  padding: 12px 14px;
+  position: sticky;
+}
+
+.selection-cite span {
+  color: var(--muted);
+  font-size: 0.88rem;
+}
+
+.selection-cite button {
+  padding: 8px 12px;
+}
+
+.agent-log-zone {
+  border-radius: 12px;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  overflow: hidden;
+  padding: 12px 14px 14px;
+}
+
+.agent-log-header {
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.agent-focus-pill {
+  background: var(--accent-soft);
+  border: 1px solid rgba(61, 111, 214, 0.18);
+  border-radius: 8px;
+  color: #315aa9;
+  font-size: 0.82rem;
+  padding: 7px 11px;
+}
+
+.agent-log-content {
+  align-items: stretch;
+  gap: 12px;
+}
+
+.agent-summary-card,
+.agent-log-list {
+  background: rgba(255, 255, 255, 0.68);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+}
+
+.agent-summary-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 240px;
+  padding: 12px 14px;
+}
+
+.agent-summary-card strong {
+  font-size: 1rem;
+  margin: 6px 0 3px;
+}
+
+.agent-log-list {
+  display: grid;
+  gap: 8px;
+  list-style: decimal;
+  margin: 0;
+  padding: 14px 18px 14px 34px;
+  width: 100%;
+}
+
+.agent-log-list li {
+  color: var(--muted);
+  font-size: 0.88rem;
+  line-height: 1.45;
+}
+
+@media (max-width: 1180px) {
+  .pm-shell {
+    grid-template-columns: 1fr;
+    height: auto;
+    min-height: 100vh;
+    overflow: visible;
+  }
+
+  html,
+  body {
+    height: auto;
+    overflow: auto;
+  }
+
+  .chat-rail {
+    min-height: 680px;
+  }
+
+  .main-workspace {
+    grid-template-rows: minmax(640px, auto) auto;
+  }
+
+  .overview-layout,
+  .detail-hero,
+  .detail-content-grid,
+  .agent-log-content {
+    grid-template-columns: 1fr;
+  }
+
+  .phase-rail {
+    border-bottom: 1px solid var(--line);
+    border-right: 0;
+  }
+
+  .phase-nav-button {
+    justify-content: flex-start;
+  }
+
+  .detail-hero-actions {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .detail-hero-actions button {
+    width: auto;
+  }
+}
+
+@media (max-width: 760px) {
+  .pm-shell {
+    padding: 10px;
+  }
+
+  .workspace-toolbar,
+  .floating-cite-bar,
+  .selection-cite,
+  .agent-log-header,
+  .agent-log-content,
+  .context-section-header,
+  .composer-topline {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .stat-row {
+    grid-template-columns: 1fr;
+  }
+
+  .workspace-tabs {
+    width: 100%;
+  }
+
+  .detail-layout {
+    padding: 12px;
+  }
+}

agentic_pm_demo_codex_plans/app/layout.tsx

@@ -0,0 +1,19 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "Agentic PM Demo",
+  description: "A Cursor-like workspace for AI-native product management work packages.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

agentic_pm_demo_codex_plans/app/page.tsx

@@ -0,0 +1,5 @@
+import { AgenticPmWorkbench } from "@/components/AgenticPmWorkbench";
+
+export default function Page() {
+  return <AgenticPmWorkbench />;
+}

agentic_pm_demo_codex_plans/components/AgenticPmWorkbench.tsx

@@ -0,0 +1,826 @@
+"use client";
+
+import { useMemo, useRef, useState } from "react";
+import seedWorkPackages from "@/data/work-packages.seed.json";
+import { getPackageSuggestions } from "@/lib/command-parser";
+import { runMockAgentTurn } from "@/lib/mock-agent";
+import type {
+  ChatMessage,
+  CitationReference,
+  CommandMode,
+  WorkPackage,
+  WorkPackagePhase,
+  WorkPackageStatus,
+} from "@/lib/work-package-types";
+
+type WorkspaceMode = "overview" | "detail";
+
+const phases: WorkPackagePhase[] = [
+  "Stakeholder Needs",
+  "Specify Product",
+  "Design Product",
+  "Verify and Validate Product",
+];
+
+const statusLabels: Record<WorkPackageStatus, string> = {
+  todo: "Todo",
+  in_progress: "In progress",
+  done: "Done",
+};
+
+const quickActions: Array<{ mode: CommandMode; label: string; icon: typeof SparkIcon }> = [
+  { mode: "ask", label: "Ask", icon: SparkIcon },
+  { mode: "plan", label: "Plan", icon: PlanIcon },
+  { mode: "change", label: "Change", icon: TuneIcon },
+  { mode: "execute", label: "Execute", icon: PlayIcon },
+];
+
+export function AgenticPmWorkbench() {
+  const [workPackages, setWorkPackages] = useState<WorkPackage[]>(() => seedWorkPackages as WorkPackage[]);
+  const [selectedPackageId, setSelectedPackageId] = useState(workPackages[0]?.id ?? "");
+  const [workspaceMode, setWorkspaceMode] = useState<WorkspaceMode>("overview");
+  const [inputValue, setInputValue] = useState("");
+  const [activeReferences, setActiveReferences] = useState<CitationReference[]>([]);
+  const [selectedQuote, setSelectedQuote] = useState("");
+  const idCounterRef = useRef(0);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  const [messages, setMessages] = useState<ChatMessage[]>([
+    {
+      id: "welcome",
+      role: "assistant",
+      createdAt: new Date().toISOString(),
+      content:
+        "Workspace ready. Pick a work package, cite the exact context you want, then ask the agent to plan, change, or execute a simulated deliverable.",
+    },
+  ]);
+
+  const [agentLogs, setAgentLogs] = useState([
+    "System initialized with the seeded IPD package map.",
+    "Agent standby: ready for package-specific planning or execution.",
+  ]);
+
+  const selectedPackage =
+    workPackages.find((workPackage) => workPackage.id === selectedPackageId) ?? workPackages[0];
+  const suggestions = getPackageSuggestions(inputValue, workPackages);
+
+  const groupedPackages = useMemo(() => {
+    return phases.map((phase) => ({
+      phase,
+      workPackages: workPackages.filter((workPackage) => workPackage.phase === phase),
+    }));
+  }, [workPackages]);
+
+  const boardStats = useMemo(() => {
+    const done = workPackages.filter((workPackage) => workPackage.status === "done").length;
+    const inProgress = workPackages.filter((workPackage) => workPackage.status === "in_progress").length;
+
+    return {
+      total: workPackages.length,
+      done,
+      inProgress,
+    };
+  }, [workPackages]);
+
+  function openPackage(workPackage: WorkPackage) {
+    setSelectedPackageId(workPackage.id);
+    setWorkspaceMode("detail");
+  }
+
+  function handleQuickAction(workPackage: WorkPackage, mode: CommandMode) {
+    setSelectedPackageId(workPackage.id);
+    setInputValue(`@${workPackage.shortName} ${mode} `);
+    inputRef.current?.focus();
+  }
+
+  function addReference(workPackage: WorkPackage, label: string, quote?: string) {
+    const reference: CitationReference = {
+      id: `ref-${workPackage.id}-${idCounterRef.current++}`,
+      packageId: workPackage.id,
+      packageShortName: workPackage.shortName,
+      packageTitle: workPackage.title,
+      label,
+      quote,
+    };
+
+    setSelectedPackageId(workPackage.id);
+    setActiveReferences((references) => [...references, reference]);
+    setInputValue((currentValue) => {
+      const token = quote
+        ? `@${workPackage.shortName}:"${quote.slice(0, 72)}"`
+        : `@${workPackage.shortName}#${label.replace(/\s+/g, "-")}`;
+
+      return currentValue.trim() ? `${currentValue.trimEnd()} ${token} ` : `${token} `;
+    });
+    inputRef.current?.focus();
+  }
+
+  function citeSelectedQuote() {
+    if (!selectedPackage || !selectedQuote) {
+      return;
+    }
+
+    addReference(selectedPackage, "Selected wording", selectedQuote);
+    setSelectedQuote("");
+  }
+
+  function captureSelectedText() {
+    const selection = window.getSelection()?.toString().replace(/\s+/g, " ").trim() ?? "";
+
+    if (selection.length > 2) {
+      setSelectedQuote(selection.slice(0, 180));
+    }
+  }
+
+  function applySuggestion(workPackage: WorkPackage) {
+    setInputValue((currentValue) => currentValue.replace(/@[A-Za-z\s-]*$/, `@${workPackage.shortName} `));
+    setSelectedPackageId(workPackage.id);
+    inputRef.current?.focus();
+  }
+
+  function handleSend() {
+    const content = inputValue.trim();
+
+    if (!content) {
+      return;
+    }
+
+    const userMessage: ChatMessage = {
+      id: `message-user-${idCounterRef.current++}`,
+      role: "user",
+      content,
+      createdAt: new Date().toISOString(),
+      references: activeReferences,
+    };
+    const result = runMockAgentTurn(content, workPackages);
+    const assistantMessage: ChatMessage = {
+      id: `message-assistant-${idCounterRef.current++}`,
+      role: "assistant",
+      content: result.assistantMessage,
+      createdAt: new Date().toISOString(),
+    };
+    const selectedAfterTurn = result.workPackages.find(
+      (workPackage) => workPackage.id === (result.selectedPackageId ?? selectedPackageId),
+    );
+
+    setMessages((currentMessages) => [...currentMessages, userMessage, assistantMessage]);
+    setWorkPackages(result.workPackages);
+    setSelectedPackageId(result.selectedPackageId ?? selectedPackageId);
+    setWorkspaceMode(result.selectedPackageId ? "detail" : workspaceMode);
+    setAgentLogs((logs) => [
+      `Package ${selectedAfterTurn?.shortName ?? "General"} handled request: ${content.slice(0, 78)}.`,
+      `Board state is now ${selectedAfterTurn ? statusLabels[selectedAfterTurn.status].toLowerCase() : "unchanged"}.`,
+      ...logs,
+    ]);
+    setInputValue("");
+    setActiveReferences([]);
+  }
+
+  return (
+    <main className="pm-shell">
+      <aside className="chat-rail" aria-label="All chat and history">
+        <header className="project-strip">
+          <div className="project-mark">
+            <ProjectGlyph />
+          </div>
+          <div className="project-meta">
+            <p>Agentic PM</p>
+            <div>
+              <h1>Factory Sensor Platform</h1>
+              <span>Project 042, IPD Sandbox</span>
+            </div>
+          </div>
+        </header>
+
+        <section className="chat-history">
+          <div className="panel-kicker">
+            <ChatIcon />
+            <span>Chat and history</span>
+          </div>
+          <div className="message-stack">
+            {messages.map((message) => (
+              <article className={`chat-bubble ${message.role}`} key={message.id}>
+                <strong>{message.role === "assistant" ? "Agent" : "You"}</strong>
+                <p>{message.content}</p>
+                {!!message.references?.length && (
+                  <div className="reference-row">
+                    {message.references.map((reference) => (
+                      <span className="reference-chip" key={reference.id}>
+                        @{reference.packageShortName} · {reference.label}
+                      </span>
+                    ))}
+                  </div>
+                )}
+              </article>
+            ))}
+          </div>
+        </section>
+
+        <section className="chat-input-zone" aria-label="User input chat zone">
+          <div className="composer-topline">
+            <span>Composer</span>
+            <span>{selectedPackage ? `Context: ${selectedPackage.shortName}` : "No package selected"}</span>
+          </div>
+
+          {!!activeReferences.length && (
+            <div className="reference-row">
+              {activeReferences.map((reference) => (
+                <button
+                  className="reference-chip removable"
+                  key={reference.id}
+                  onClick={() =>
+                    setActiveReferences((references) =>
+                      references.filter((existingReference) => existingReference.id !== reference.id),
+                    )
+                  }
+                  type="button"
+                >
+                  @{reference.packageShortName} · {reference.label}
+                </button>
+              ))}
+            </div>
+          )}
+
+          <div className="quick-action-row">
+            {quickActions.map(({ icon: Icon, label, mode }) => (
+              <button
+                className="quick-action-button"
+                key={mode}
+                onClick={() => selectedPackage && handleQuickAction(selectedPackage, mode)}
+                type="button"
+              >
+                <Icon />
+                <span>{label}</span>
+              </button>
+            ))}
+          </div>
+
+          <div className="composer-wrap">
+            {suggestions.length > 0 && (
+              <div className="mention-popover">
+                {suggestions.map((workPackage) => (
+                  <button key={workPackage.id} onClick={() => applySuggestion(workPackage)} type="button">
+                    <span>@{workPackage.shortName}</span>
+                    <small>{workPackage.title}</small>
+                  </button>
+                ))}
+              </div>
+            )}
+            <textarea
+              aria-label="Chat input"
+              onChange={(event) => setInputValue(event.target.value)}
+              onKeyDown={(event) => {
+                if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+                  handleSend();
+                }
+              }}
+              placeholder="Ask the current package for a plan, cite a section, or execute a simulated output."
+              ref={inputRef}
+              value={inputValue}
+            />
+          </div>
+
+          <div className="input-toolbar">
+            <button className="ghost-button" type="button">
+              <PlusIcon />
+            </button>
+            <button className="ghost-button" type="button">
+              <BoltIcon />
+            </button>
+            <button className="ghost-button" type="button">
+              <DeckIcon />
+            </button>
+            <button className="ghost-button" type="button">
+              <MoreIcon />
+            </button>
+            <button className="send-button" onClick={handleSend} type="button">
+              <SendIcon />
+            </button>
+          </div>
+        </section>
+      </aside>
+
+      <section className="main-workspace">
+        {workspaceMode === "overview" ? (
+          <WorkPackageOverview
+            boardStats={boardStats}
+            groupedPackages={groupedPackages}
+            onCite={addReference}
+            onOpen={openPackage}
+            onSwitchMode={setWorkspaceMode}
+            selectedPackage={selectedPackage}
+            selectedPackageId={selectedPackageId}
+          />
+        ) : (
+          selectedPackage && (
+            <WorkPackageDetail
+              onBack={() => setWorkspaceMode("overview")}
+              onCaptureSelection={captureSelectedText}
+              onCite={addReference}
+              onQuickAction={handleQuickAction}
+              onSelectedQuoteCite={citeSelectedQuote}
+              onSwitchMode={setWorkspaceMode}
+              selectedPackage={selectedPackage}
+              selectedQuote={selectedQuote}
+            />
+          )
+        )}
+
+        <AgentLog logs={agentLogs} selectedPackage={selectedPackage} />
+      </section>
+    </main>
+  );
+}
+
+function WorkPackageOverview({
+  boardStats,
+  groupedPackages,
+  onCite,
+  onOpen,
+  onSwitchMode,
+  selectedPackage,
+  selectedPackageId,
+}: {
+  boardStats: { total: number; done: number; inProgress: number };
+  groupedPackages: Array<{ phase: WorkPackagePhase; workPackages: WorkPackage[] }>;
+  onCite: (workPackage: WorkPackage, label: string, quote?: string) => void;
+  onOpen: (workPackage: WorkPackage) => void;
+  onSwitchMode: (mode: WorkspaceMode) => void;
+  selectedPackage: WorkPackage;
+  selectedPackageId: string;
+}) {
+  return (
+    <section className="workspace-canvas">
+      <header className="workspace-toolbar">
+        <div className="workspace-title">
+          <CompassIcon />
+          <div>
+            <h2>Work package map</h2>
+            <p>Overview of the IPD package landscape and current package status.</p>
+          </div>
+        </div>
+
+        <div className="workspace-tabs">
+          <button className="active" onClick={() => onSwitchMode("overview")} type="button">
+            Overview
+          </button>
+          <button onClick={() => onSwitchMode("detail")} type="button">
+            Detail
+          </button>
+        </div>
+      </header>
+
+      <div className="overview-layout">
+        <aside className="phase-rail">
+          <p>Phases</p>
+          {groupedPackages.map((group) => (
+            <button className="phase-nav-button" key={group.phase} type="button">
+              <span>{group.phase}</span>
+              <small>{group.workPackages.length}</small>
+            </button>
+          ))}
+        </aside>
+
+        <div className="overview-content">
+          <div className="stat-row">
+            <StatCard label="Total packages" value={String(boardStats.total)} />
+            <StatCard label="In progress" value={String(boardStats.inProgress)} />
+            <StatCard label="Done" value={String(boardStats.done)} />
+          </div>
+
+          <div className="phase-map">
+            {groupedPackages.map((group) => (
+              <section className="phase-column" key={group.phase}>
+                <header>
+                  <span>{group.phase}</span>
+                  <small>{group.workPackages.length} packages</small>
+                </header>
+                <div className="package-card-grid">
+                  {group.workPackages.map((workPackage) => (
+                    <article
+                      className={`package-card ${workPackage.id === selectedPackageId ? "selected" : ""}`}
+                      key={workPackage.id}
+                      onClick={() => onOpen(workPackage)}
+                      onKeyDown={(event) => {
+                        if (event.key === "Enter" || event.key === " ") {
+                          event.preventDefault();
+                          onOpen(workPackage);
+                        }
+                      }}
+                      role="button"
+                      tabIndex={0}
+                    >
+                      <div className="package-card-topline">
+                        <span className="package-short">{workPackage.shortName}</span>
+                        <span className={`status-pill ${workPackage.status}`}>
+                          {statusLabels[workPackage.status]}
+                        </span>
+                      </div>
+                      <h3>{workPackage.title}</h3>
+                      <p>{workPackage.objective}</p>
+                      <div className="package-card-actions">
+                        <span>
+                          <FileIcon />
+                          Open
+                        </span>
+                        <button
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            onCite(workPackage, "Package");
+                          }}
+                          type="button"
+                        >
+                          <QuoteIcon />
+                        </button>
+                      </div>
+                    </article>
+                  ))}
+                </div>
+              </section>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="floating-cite-bar">
+        <span>Selected package: {selectedPackage.shortName}</span>
+        <button onClick={() => onCite(selectedPackage, "Package")} type="button">
+          <QuoteIcon />
+          Cite package
+        </button>
+      </div>
+    </section>
+  );
+}
+
+function WorkPackageDetail({
+  onBack,
+  onCaptureSelection,
+  onCite,
+  onQuickAction,
+  onSelectedQuoteCite,
+  onSwitchMode,
+  selectedPackage,
+  selectedQuote,
+}: {
+  onBack: () => void;
+  onCaptureSelection: () => void;
+  onCite: (workPackage: WorkPackage, label: string, quote?: string) => void;
+  onQuickAction: (workPackage: WorkPackage, mode: CommandMode) => void;
+  onSelectedQuoteCite: () => void;
+  onSwitchMode: (mode: WorkspaceMode) => void;
+  selectedPackage: WorkPackage;
+  selectedQuote: string;
+}) {
+  return (
+    <section className="workspace-canvas">
+      <header className="workspace-toolbar">
+        <div className="workspace-title">
+          <FileStackIcon />
+          <div>
+            <h2>{selectedPackage.title}</h2>
+            <p>{selectedPackage.phase}</p>
+          </div>
+        </div>
+
+        <div className="workspace-tabs">
+          <button onClick={() => onSwitchMode("overview")} type="button">
+            Overview
+          </button>
+          <button className="active" onClick={() => onSwitchMode("detail")} type="button">
+            Detail
+          </button>
+        </div>
+      </header>
+
+      <article className="detail-layout" onMouseUp={onCaptureSelection}>
+        <div className="detail-hero">
+          <button className="back-button" onClick={onBack} type="button">
+            <ArrowLeftIcon />
+            <span>Back to map</span>
+          </button>
+          <div className="detail-hero-copy">
+            <span className="status-label">{statusLabels[selectedPackage.status]}</span>
+            <h1>{selectedPackage.title}</h1>
+            <p>{selectedPackage.objective}</p>
+          </div>
+          <div className="detail-hero-actions">
+            {quickActions.map(({ icon: Icon, label, mode }) => (
+              <button key={mode} onClick={() => onQuickAction(selectedPackage, mode)} type="button">
+                <Icon />
+                <span>{label}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className="detail-content-grid">
+          <ContextSection
+            label="Expected outputs"
+            meta={`${selectedPackage.outputFiles.length} deliverables`}
+            onCite={() => onCite(selectedPackage, "Expected outputs", selectedPackage.outputFiles.join(", "))}
+          >
+            <div className="simple-tags">
+              {selectedPackage.outputFiles.map((outputFile) => (
+                <span key={outputFile}>{outputFile}</span>
+              ))}
+            </div>
+          </ContextSection>
+
+          <ContextSection
+            label="Tasks"
+            meta={`${selectedPackage.tasks.length} tasks`}
+            onCite={() =>
+              onCite(
+                selectedPackage,
+                "Tasks",
+                selectedPackage.tasks.map((task) => task.title).join(", "),
+              )
+            }
+          >
+            <div className="simple-task-list">
+              {selectedPackage.tasks.map((task) => (
+                <div className="simple-task" key={task.id}>
+                  <span className={`task-status-dot ${task.status}`} />
+                  <div>
+                    <strong>{task.title}</strong>
+                    <p>{task.description}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </ContextSection>
+
+          {!!selectedPackage.coreSections.length && (
+            <ContextSection
+              label="Added context"
+              meta={`${selectedPackage.coreSections.length} notes`}
+              onCite={() => onCite(selectedPackage, "Added context", selectedPackage.coreSections.join(", "))}
+            >
+              <div className="simple-tags">
+                {selectedPackage.coreSections.map((section) => (
+                  <span key={section}>{section}</span>
+                ))}
+              </div>
+            </ContextSection>
+          )}
+
+          <ContextSection
+            label="Simulated outputs"
+            meta={`${selectedPackage.outputs.length} saved`}
+            onCite={() => onCite(selectedPackage, "Simulated outputs")}
+          >
+            {selectedPackage.outputs.length ? (
+              selectedPackage.outputs.map((output) => (
+                <div className="simple-output" key={output.id}>
+                  <div className="simple-output-header">
+                    <strong>{output.title}</strong>
+                    <span>{output.type}</span>
+                  </div>
+                  <pre>{output.content}</pre>
+                  <p>{output.disclaimer}</p>
+                </div>
+              ))
+            ) : (
+              <p className="empty-copy">No outputs yet. Use execute to generate a simulated result.</p>
+            )}
+          </ContextSection>
+        </div>
+
+        {selectedQuote && (
+          <div className="selection-cite">
+            <span>Selected text ready to cite: “{selectedQuote}”</span>
+            <button onClick={onSelectedQuoteCite} type="button">
+              <QuoteIcon />
+              <span>Cite selected wording</span>
+            </button>
+          </div>
+        )}
+      </article>
+    </section>
+  );
+}
+
+function AgentLog({
+  logs,
+  selectedPackage,
+}: {
+  logs: string[];
+  selectedPackage?: WorkPackage;
+}) {
+  return (
+    <section className="agent-log-zone" aria-label="Agent logging zone">
+      <div className="agent-log-header">
+        <div className="workspace-title">
+          <PulseIcon />
+          <div>
+            <h2>Agent activity</h2>
+            <p>Live execution, package status, and process notes.</p>
+          </div>
+        </div>
+        <div className="agent-focus-pill">{selectedPackage?.shortName ?? "No package selected"}</div>
+      </div>
+
+      <div className="agent-log-content">
+        <div className="agent-summary-card">
+          <span>Active package</span>
+          <strong>{selectedPackage?.title ?? "None"}</strong>
+          <small>{selectedPackage ? statusLabels[selectedPackage.status] : "Waiting"}</small>
+        </div>
+        <ol className="agent-log-list">
+          {logs.slice(0, 3).map((log) => (
+            <li key={log}>{log}</li>
+          ))}
+        </ol>
+      </div>
+    </section>
+  );
+}
+
+function ContextSection({
+  children,
+  label,
+  meta,
+  onCite,
+}: {
+  children: React.ReactNode;
+  label: string;
+  meta: string;
+  onCite: () => void;
+}) {
+  return (
+    <section className="context-section">
+      <div className="context-section-header">
+        <div>
+          <h3>{label}</h3>
+          <span>{meta}</span>
+        </div>
+        <button onClick={onCite} type="button">
+          <QuoteIcon />
+          <span>Cite</span>
+        </button>
+      </div>
+      {children}
+    </section>
+  );
+}
+
+function StatCard({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="stat-card">
+      <span>{label}</span>
+      <strong>{value}</strong>
+    </div>
+  );
+}
+
+function ProjectGlyph() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 24 24">
+      <path d="M5 5h7v7H5zM12 12h7v7h-7zM14 5h5v5h-5zM5 14h5v5H5z" fill="currentColor" />
+    </svg>
+  );
+}
+
+function ChatIcon() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 24 24">
+      <path
+        d="M5 6.5h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H9l-4 3v-3H5a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2Z"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.7"
+      />
+    </svg>
+  );
+}
+
+function CompassIcon() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 24 24">
+      <circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" strokeWidth="1.7" />
+      <path d="m10 14 1.5-4 4-1.5-1.5 4Z" fill="currentColor" />
+    </svg>
+  );
+}
+
+function FileStackIcon() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 24 24">
+      <path d="M7 5h10v10H7z" fill="none" stroke="currentColor" strokeWidth="1.7" />
+      <path d="M5 8h10v10H5z" fill="none" stroke="currentColor" strokeWidth="1.7" />
+    </svg>
+  );
+}
+
+function SparkIcon() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 24 24">
+      <path d="M12 3 14 9l6 3-6 3-2 6-2-6-6-3 6-3Z" fill="currentColor" />
+    </svg>
+  );
+}
+
+function PlanIcon() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 24 24">
+      <path d="M6 7h12M6 12h8M6 17h10" fill="none" stroke="currentColor" strokeWidth="1.7" />
+    </svg>
+  );
+}
+
+function TuneIcon() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 24 24">
+      <path d="M5 7h14M8 7v10M12 12h7M5 17h14M16 17V7" fill="none" stroke="currentColor" strokeWidth="1.7" />
+    </svg>
+  );
+}
+
+function PlayIcon() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 24 24">
+      <path d="m8 6 10 6-10 6Z" fill="currentColor" />
+    </svg>
+  );
+}
+
+function QuoteIcon() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 24 24">
+      <path
+        d="M7 10h4v4H7v4H3v-4c0-4 2-6 4-7Zm10 0h4v4h-4v4h-4v-4c0-4 2-6 4-7Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+function ArrowLeftIcon() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 24 24">
+      <path d="m11 6-6 6 6 6M6 12h13" fill="none" stroke="currentColor" strokeWidth="1.7" />
+    </svg>
+  );
+}
+
+function SendIcon() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 24 24">
+      <path d="m4 12 15-7-3 7 3 7Z" fill="none" stroke="currentColor" strokeWidth="1.7" />
+      <path d="M4 12h12" fill="none" stroke="currentColor" strokeWidth="1.7" />
+    </svg>
+  );
+}
+
+function PulseIcon() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 24 24">
+      <path d="M3 12h4l2-4 4 8 2-4h6" fill="none" stroke="currentColor" strokeWidth="1.7" />
+    </svg>
+  );
+}
+
+function PlusIcon() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 24 24">
+      <path d="M12 5v14M5 12h14" fill="none" stroke="currentColor" strokeWidth="1.7" />
+    </svg>
+  );
+}
+
+function BoltIcon() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 24 24">
+      <path d="M13 3 6 13h5l-1 8 8-11h-5l1-7Z" fill="currentColor" />
+    </svg>
+  );
+}
+
+function DeckIcon() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 24 24">
+      <path d="M5 7h14v10H5z" fill="none" stroke="currentColor" strokeWidth="1.7" />
+      <path d="M8 10h8M8 14h5" fill="none" stroke="currentColor" strokeWidth="1.7" />
+    </svg>
+  );
+}
+
+function MoreIcon() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 24 24">
+      <circle cx="6" cy="12" r="1.8" fill="currentColor" />
+      <circle cx="12" cy="12" r="1.8" fill="currentColor" />
+      <circle cx="18" cy="12" r="1.8" fill="currentColor" />
+    </svg>
+  );
+}
+
+function FileIcon() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 24 24">
+      <path d="M7 4h7l4 4v12H7z" fill="none" stroke="currentColor" strokeWidth="1.7" />
+      <path d="M14 4v4h4" fill="none" stroke="currentColor" strokeWidth="1.7" />
+    </svg>
+  );
+}

agentic_pm_demo_codex_plans/data/work-packages.seed.json

@@ -0,0 +1,338 @@
+[
+  {
+    "id": "wp-crs",
+    "title": "Customer Requirements Specification",
+    "shortName": "CRS",
+    "phase": "Stakeholder Needs",
+    "objective": "Capture and structure customer requirements.",
+    "inputFiles": [],
+    "outputFiles": [
+      "Customer Requirement List",
+      "User Stories",
+      "Requirement Classification",
+      "CRS-to-SRS Traceability Input"
+    ],
+    "coreSections": [],
+    "tasks": [
+      {
+        "id": "task-crs-execute",
+        "title": "Generate simulated output",
+        "description": "Generate a simulated MVP output for this work package.",
+        "type": "generation",
+        "executable": true,
+        "status": "todo"
+      }
+    ],
+    "outputs": [],
+    "status": "todo",
+    "priority": "high"
+  },
+  {
+    "id": "wp-final-concept",
+    "title": "Final Concept",
+    "shortName": "Final Concept",
+    "phase": "Stakeholder Needs",
+    "objective": "Transform CRS into a product concept with insights, benefits, reasons to believe, validation, and visual brief.",
+    "inputFiles": [],
+    "outputFiles": [
+      "Final Product Concept",
+      "Insight-Benefit-RTB Matrix",
+      "Validation of Verbal Concept",
+      "2D Concept Visual Brief"
+    ],
+    "coreSections": [],
+    "tasks": [
+      {
+        "id": "task-final-concept-execute",
+        "title": "Generate simulated output",
+        "description": "Generate a simulated MVP output for this work package.",
+        "type": "generation",
+        "executable": true,
+        "status": "todo"
+      }
+    ],
+    "outputs": [],
+    "status": "todo",
+    "priority": "medium"
+  },
+  {
+    "id": "wp-srs",
+    "title": "System Requirements Specification",
+    "shortName": "SRS",
+    "phase": "Specify Product",
+    "objective": "Translate CRS into traceable system-level requirements, components, interfaces, specifications, and verification methods.",
+    "inputFiles": [],
+    "outputFiles": [
+      "System Requirements Specification",
+      "CRS-to-SRS Traceability Matrix",
+      "Component Requirement List",
+      "Interface Requirement List"
+    ],
+    "coreSections": [],
+    "tasks": [
+      {
+        "id": "task-srs-execute",
+        "title": "Generate simulated output",
+        "description": "Generate a simulated MVP output for this work package.",
+        "type": "generation",
+        "executable": true,
+        "status": "todo"
+      }
+    ],
+    "outputs": [],
+    "status": "todo",
+    "priority": "high"
+  },
+  {
+    "id": "wp-safety-of-products",
+    "title": "Safety of Products",
+    "shortName": "Safety",
+    "phase": "Specify Product",
+    "objective": "Identify product safety hazards, assess initial and residual risks, and define risk reduction measures.",
+    "inputFiles": [],
+    "outputFiles": [
+      "Product Safety Risk Assessment",
+      "Hazard List",
+      "Risk Matrix",
+      "Risk Reduction Measures"
+    ],
+    "coreSections": [],
+    "tasks": [
+      {
+        "id": "task-safety-of-products-execute",
+        "title": "Generate simulated output",
+        "description": "Generate a simulated MVP output for this work package.",
+        "type": "generation",
+        "executable": true,
+        "status": "todo"
+      }
+    ],
+    "outputs": [],
+    "status": "todo",
+    "priority": "medium"
+  },
+  {
+    "id": "wp-product-certification",
+    "title": "Product Certification",
+    "shortName": "Certification",
+    "phase": "Specify Product",
+    "objective": "Identify market access requirements, standards, certification documents, testing needs, approval milestones, and action items.",
+    "inputFiles": [],
+    "outputFiles": [
+      "Product Certification Briefing",
+      "Product Certification Plan",
+      "Certification Checklist",
+      "Applicable Standards List"
+    ],
+    "coreSections": [],
+    "tasks": [
+      {
+        "id": "task-product-certification-execute",
+        "title": "Generate simulated output",
+        "description": "Generate a simulated MVP output for this work package.",
+        "type": "generation",
+        "executable": true,
+        "status": "todo"
+      }
+    ],
+    "outputs": [],
+    "status": "todo",
+    "priority": "medium"
+  },
+  {
+    "id": "wp-test-management",
+    "title": "Test Management",
+    "shortName": "Test",
+    "phase": "Specify Product",
+    "objective": "Plan product verification and reliability validation from CRS, SRS, safety, and certification requirements.",
+    "inputFiles": [],
+    "outputFiles": [
+      "Test Plan",
+      "Requirement-to-Test Matrix",
+      "Reliability Validation Plan",
+      "Sample Size Calculation"
+    ],
+    "coreSections": [],
+    "tasks": [
+      {
+        "id": "task-test-management-execute",
+        "title": "Generate simulated output",
+        "description": "Generate a simulated MVP output for this work package.",
+        "type": "generation",
+        "executable": true,
+        "status": "todo"
+      }
+    ],
+    "outputs": [],
+    "status": "todo",
+    "priority": "high"
+  },
+  {
+    "id": "wp-decompose-system",
+    "title": "Decompose System",
+    "shortName": "Decompose",
+    "phase": "Design Product",
+    "objective": "Decompose the product/system into components, modules, standardization opportunities, technical focus areas, and risks.",
+    "inputFiles": [],
+    "outputFiles": [
+      "Technology Filter",
+      "Focus Area Analysis",
+      "Technical Complexity Category",
+      "Project Risk Class"
+    ],
+    "coreSections": [],
+    "tasks": [
+      {
+        "id": "task-decompose-system-execute",
+        "title": "Generate simulated output",
+        "description": "Generate a simulated MVP output for this work package.",
+        "type": "generation",
+        "executable": true,
+        "status": "todo"
+      }
+    ],
+    "outputs": [],
+    "status": "todo",
+    "priority": "medium"
+  },
+  {
+    "id": "wp-industrial-design",
+    "title": "Industrial Design",
+    "shortName": "Industrial Design",
+    "phase": "Design Product",
+    "objective": "Translate product concept and requirements into product form, visual direction, interaction layout, CMF, and concept design direction.",
+    "inputFiles": [],
+    "outputFiles": [
+      "Industrial Design Brief",
+      "2D Concept Design Brief",
+      "CMF Proposal",
+      "Design Review Checklist"
+    ],
+    "coreSections": [],
+    "tasks": [
+      {
+        "id": "task-industrial-design-execute",
+        "title": "Generate simulated output",
+        "description": "Generate a simulated MVP output for this work package.",
+        "type": "generation",
+        "executable": true,
+        "status": "todo"
+      }
+    ],
+    "outputs": [],
+    "status": "todo",
+    "priority": "medium"
+  },
+  {
+    "id": "wp-patent-check",
+    "title": "Patent Check",
+    "shortName": "Patent",
+    "phase": "Design Product",
+    "objective": "Identify patent-related risks and possible patentable innovation points before engineering design is finalized.",
+    "inputFiles": [],
+    "outputFiles": [
+      "Patent Search Topic List",
+      "FTO Risk Assumptions",
+      "Patentable Invention Points",
+      "IP Review Action Items"
+    ],
+    "coreSections": [],
+    "tasks": [
+      {
+        "id": "task-patent-check-execute",
+        "title": "Generate simulated output",
+        "description": "Generate a simulated MVP output for this work package.",
+        "type": "generation",
+        "executable": true,
+        "status": "todo"
+      }
+    ],
+    "outputs": [],
+    "status": "todo",
+    "priority": "medium"
+  },
+  {
+    "id": "wp-design-fmea",
+    "title": "Design FMEA",
+    "shortName": "Design FMEA",
+    "phase": "Design Product",
+    "objective": "Identify design failure modes, effects, causes, controls, risk priority, recommended actions, and residual risk.",
+    "inputFiles": [],
+    "outputFiles": [
+      "Design FMEA Table",
+      "High-Risk Failure Mode List",
+      "Recommended Design Actions",
+      "Residual Risk Summary"
+    ],
+    "coreSections": [],
+    "tasks": [
+      {
+        "id": "task-design-fmea-execute",
+        "title": "Generate simulated output",
+        "description": "Generate a simulated MVP output for this work package.",
+        "type": "generation",
+        "executable": true,
+        "status": "todo"
+      }
+    ],
+    "outputs": [],
+    "status": "todo",
+    "priority": "high"
+  },
+  {
+    "id": "wp-final-engineering-concept",
+    "title": "Final Engineering Concept",
+    "shortName": "Engineering Concept",
+    "phase": "Design Product",
+    "objective": "Finalize hardware BOM, software SBOM, and feature list.",
+    "inputFiles": [],
+    "outputFiles": [
+      "Hardware BOM",
+      "Software SBOM",
+      "Feature List",
+      "Traceability Mapping"
+    ],
+    "coreSections": [],
+    "tasks": [
+      {
+        "id": "task-final-engineering-concept-execute",
+        "title": "Generate simulated output",
+        "description": "Generate a simulated MVP output for this work package.",
+        "type": "generation",
+        "executable": true,
+        "status": "todo"
+      }
+    ],
+    "outputs": [],
+    "status": "todo",
+    "priority": "high"
+  },
+  {
+    "id": "wp-service-ability-review",
+    "title": "Service Ability Review",
+    "shortName": "Service Review",
+    "phase": "Design Product",
+    "objective": "Use a quality gate questionnaire to confirm serviceability readiness before next phase, tooling, or production preparation.",
+    "inputFiles": [],
+    "outputFiles": [
+      "Service Quality Gate Questionnaire",
+      "Service Readiness Score",
+      "Go/Conditional Go/No-Go Recommendation",
+      "Open Service Action Items"
+    ],
+    "coreSections": [],
+    "tasks": [
+      {
+        "id": "task-service-ability-review-execute",
+        "title": "Generate simulated output",
+        "description": "Generate a simulated MVP output for this work package.",
+        "type": "generation",
+        "executable": true,
+        "status": "todo"
+      }
+    ],
+    "outputs": [],
+    "status": "todo",
+    "priority": "medium"
+  }
+]

agentic_pm_demo_codex_plans/eslint.config.mjs

@@ -0,0 +1,11 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  globalIgnores([".next/**", "out/**", "build/**", "next-env.d.ts"]),
+]);
+
+export default eslintConfig;

agentic_pm_demo_codex_plans/lib/command-parser.ts

@@ -0,0 +1,86 @@
+import type { CommandMode, ParsedCommand, WorkPackage } from "./work-package-types";
+
+const commandModes: CommandMode[] = ["ask", "plan", "change", "execute"];
+
+export function parseWorkPackageCommand(
+  input: string,
+  workPackages: WorkPackage[],
+): ParsedCommand | null {
+  const trimmedInput = input.trim();
+
+  if (!trimmedInput.startsWith("@")) {
+    return null;
+  }
+
+  const mentionBody = trimmedInput.slice(1);
+  const candidates = workPackages
+    .flatMap((workPackage) => [
+      { name: workPackage.title, workPackage },
+      { name: workPackage.shortName, workPackage },
+    ])
+    .sort((left, right) => right.name.length - left.name.length);
+
+  for (const candidate of candidates) {
+    const packageName = candidate.name.toLowerCase();
+    const inputName = mentionBody.toLowerCase();
+
+    if (!inputName.startsWith(packageName)) {
+      continue;
+    }
+
+    const boundaryCharacter = mentionBody[candidate.name.length];
+    const isBoundary =
+      boundaryCharacter === undefined ||
+      boundaryCharacter === " " ||
+      boundaryCharacter === "#" ||
+      boundaryCharacter === ":";
+
+    if (!isBoundary) {
+      continue;
+    }
+
+    const remainingText = mentionBody.slice(candidate.name.length).trim();
+    const [maybeMode, ...instructionParts] = remainingText.split(/\s+/);
+    const mode = commandModes.includes(maybeMode as CommandMode)
+      ? (maybeMode as CommandMode)
+      : "ask";
+
+    return {
+      referencedPackageName: candidate.name,
+      workPackageId: candidate.workPackage.id,
+      mode,
+      instruction:
+        mode === maybeMode
+          ? instructionParts.join(" ").trim()
+          : remainingText.replace(/^#\S+\s*/, "").trim(),
+    };
+  }
+
+  return {
+    mode: "ask",
+    instruction: trimmedInput,
+  };
+}
+
+export function getPackageSuggestions(input: string, workPackages: WorkPackage[]) {
+  const match = input.match(/@([A-Za-z\s-]*)$/);
+
+  if (!match) {
+    return [];
+  }
+
+  const query = match[1].toLowerCase().trim();
+
+  return workPackages
+    .filter((workPackage) => {
+      if (!query) {
+        return true;
+      }
+
+      return (
+        workPackage.title.toLowerCase().includes(query) ||
+        workPackage.shortName.toLowerCase().includes(query)
+      );
+    })
+    .slice(0, 6);
+}

agentic_pm_demo_codex_plans/lib/mock-agent.ts

@@ -0,0 +1,177 @@
+import { parseWorkPackageCommand } from "./command-parser";
+import {
+  SIMULATED_EXECUTION_DISCLAIMER,
+  type CommandMode,
+  type OutputType,
+  type WorkPackage,
+  type WorkPackageTask,
+} from "./work-package-types";
+
+type AgentTurnResult = {
+  assistantMessage: string;
+  workPackages: WorkPackage[];
+  selectedPackageId?: string;
+};
+
+export function runMockAgentTurn(input: string, workPackages: WorkPackage[]): AgentTurnResult {
+  const command = parseWorkPackageCommand(input, workPackages);
+
+  if (!command?.workPackageId) {
+    return {
+      assistantMessage:
+        "I can help shape that into product work. Try citing a package like `@CRS ask what should we capture first?`, or click a Cite button in the board to pull exact context into the chat.",
+      workPackages,
+    };
+  }
+
+  const selectedPackage = workPackages.find((workPackage) => workPackage.id === command.workPackageId);
+
+  if (!selectedPackage) {
+    return {
+      assistantMessage:
+        "I could not find that work package. Use one of the package references from the board, such as `@CRS`, `@SRS`, or `@Design FMEA`.",
+      workPackages,
+    };
+  }
+
+  const instruction = command.instruction || "Review this work package.";
+  const nextPackages = workPackages.map((workPackage) => {
+    if (workPackage.id !== selectedPackage.id) {
+      return workPackage;
+    }
+
+    return updatePackageForMode(workPackage, command.mode, instruction);
+  });
+
+  return {
+    assistantMessage: makeAssistantMessage(selectedPackage, command.mode, instruction),
+    workPackages: nextPackages,
+    selectedPackageId: selectedPackage.id,
+  };
+}
+
+function updatePackageForMode(
+  workPackage: WorkPackage,
+  mode: CommandMode,
+  instruction: string,
+): WorkPackage {
+  if (mode === "ask") {
+    return workPackage;
+  }
+
+  if (mode === "plan") {
+    const plannedTasks = makePlannedTasks(workPackage, instruction);
+
+    return {
+      ...workPackage,
+      status: "in_progress",
+      tasks: [...workPackage.tasks, ...plannedTasks],
+    };
+  }
+
+  if (mode === "change") {
+    const changeNote = `Change request: ${instruction}`;
+
+    return {
+      ...workPackage,
+      status: "in_progress",
+      coreSections: workPackage.coreSections.includes(changeNote)
+        ? workPackage.coreSections
+        : [...workPackage.coreSections, changeNote],
+    };
+  }
+
+  const taskToClose = workPackage.tasks.find((task) => task.executable);
+
+  return {
+    ...workPackage,
+    status: "done",
+    tasks: workPackage.tasks.map((task) =>
+      task.id === taskToClose?.id ? { ...task, status: "done" } : task,
+    ),
+    outputs: [
+      {
+        id: `output-${workPackage.id}-${Date.now()}`,
+        title: `Simulated ${workPackage.shortName} Output`,
+        type: inferOutputType(workPackage),
+        content: makeSimulatedOutput(workPackage, instruction),
+        createdAt: new Date().toISOString(),
+        sourceTaskId: taskToClose?.id,
+        executionMode: "simulated",
+        disclaimer: SIMULATED_EXECUTION_DISCLAIMER,
+      },
+      ...workPackage.outputs,
+    ],
+  };
+}
+
+function makePlannedTasks(workPackage: WorkPackage, instruction: string): WorkPackageTask[] {
+  const normalizedInstruction = instruction.replace(/\s+/g, " ").trim();
+
+  return [
+    {
+      id: `task-${workPackage.id}-context-${Date.now()}`,
+      title: "Clarify cited context",
+      description: normalizedInstruction || `Review the current ${workPackage.shortName} context.`,
+      type: "planning",
+      executable: false,
+      status: "todo",
+    },
+    {
+      id: `task-${workPackage.id}-draft-${Date.now() + 1}`,
+      title: "Draft package-specific deliverable",
+      description: `Create a first-pass ${workPackage.outputFiles[0] ?? "deliverable"} using cited assumptions.`,
+      type: "generation",
+      executable: true,
+      status: "todo",
+    },
+  ];
+}
+
+function makeAssistantMessage(
+  workPackage: WorkPackage,
+  mode: CommandMode,
+  instruction: string,
+) {
+  if (mode === "ask") {
+    return `${workPackage.shortName} is the right context for this. I would inspect its objective, expected outputs, and downstream dependencies first. For your request — “${instruction}” — the next useful answer is to separate requirement intent from the evidence needed to validate it.`;
+  }
+
+  if (mode === "plan") {
+    return `I added a lightweight plan to ${workPackage.shortName}: clarify the cited context, then draft the first package-specific deliverable. The board is now marked in progress.`;
+  }
+
+  if (mode === "change") {
+    return `I recorded that change request inside ${workPackage.shortName} as package context, so future asks/plans/executions can cite it.`;
+  }
+
+  return `I generated a simulated ${workPackage.shortName} output and saved it back to the package. It is explicitly marked as simulated, with the required demo disclaimer.`;
+}
+
+function inferOutputType(workPackage: WorkPackage): OutputType {
+  const title = workPackage.title.toLowerCase();
+
+  if (title.includes("fmea")) return "risk_table";
+  if (title.includes("certification")) return "checklist";
+  if (title.includes("test")) return "test_case";
+  if (title.includes("industrial design")) return "design_brief";
+  if (title.includes("engineering")) return "bom";
+  if (title.includes("patent")) return "text";
+
+  return "table";
+}
+
+function makeSimulatedOutput(workPackage: WorkPackage, instruction: string) {
+  const deliverables = workPackage.outputFiles.slice(0, 4).map((outputFile) => `- ${outputFile}`);
+
+  return [
+    `Instruction: ${instruction}`,
+    "",
+    "Generated package content:",
+    ...deliverables,
+    "",
+    "Recommended next review:",
+    `- Confirm assumptions with the ${workPackage.phase} owner.`,
+    "- Convert accepted items into traceable requirements or action items.",
+  ].join("\n");
+}

agentic_pm_demo_codex_plans/lib/work-package-types.ts

@@ -0,0 +1,105 @@
+export const SIMULATED_EXECUTION_DISCLAIMER =
+  "This is a simulated execution result generated for demo purposes. No real external tool, engineering review, certification approval, user database, image generation service, patent search, or test system was executed.";
+
+export type WorkPackagePhase =
+  | "Stakeholder Needs"
+  | "Specify Product"
+  | "Design Product"
+  | "Verify and Validate Product";
+
+export type WorkPackageStatus = "todo" | "in_progress" | "done";
+export type WorkPackagePriority = "low" | "medium" | "high";
+
+export type TaskType =
+  | "research"
+  | "planning"
+  | "generation"
+  | "testing"
+  | "design"
+  | "analysis"
+  | "review"
+  | "compliance"
+  | "risk";
+
+export type OutputType =
+  | "text"
+  | "table"
+  | "code"
+  | "image_prompt"
+  | "design_brief"
+  | "test_case"
+  | "checklist"
+  | "risk_table"
+  | "bom"
+  | "sbom"
+  | "feature_list";
+
+export type ExecutionMode = "simulated" | "real";
+
+export type WorkPackageTask = {
+  id: string;
+  title: string;
+  description: string;
+  type: TaskType;
+  executable: boolean;
+  status: WorkPackageStatus;
+};
+
+export type WorkPackageOutput = {
+  id: string;
+  title: string;
+  type: OutputType;
+  content: string;
+  createdAt: string;
+  sourceTaskId?: string;
+  executionMode: ExecutionMode;
+  disclaimer: string;
+};
+
+export type WorkPackageDeliverable = {
+  name: string;
+  required: boolean | string;
+  description?: string;
+};
+
+export type WorkPackage = {
+  id: string;
+  title: string;
+  shortName: string;
+  phase: WorkPackagePhase;
+  objective: string;
+  inputFiles: string[];
+  outputFiles: string[];
+  coreSections: string[];
+  deliverables?: WorkPackageDeliverable[];
+  tasks: WorkPackageTask[];
+  outputs: WorkPackageOutput[];
+  status: WorkPackageStatus;
+  priority: WorkPackagePriority;
+};
+
+export type CommandMode = "ask" | "plan" | "change" | "execute";
+
+export type ParsedCommand = {
+  referencedPackageName?: string;
+  workPackageId?: string;
+  mode: CommandMode;
+  instruction: string;
+};
+
+export type CitationReference = {
+  id: string;
+  packageId: string;
+  packageShortName: string;
+  packageTitle: string;
+  label: string;
+  quote?: string;
+};
+
+export type ChatMessage = {
+  id: string;
+  role: "assistant" | "user";
+  content: string;
+  createdAt: string;
+  references?: CitationReference[];
+};

agentic_pm_demo_codex_plans/next.config.ts

@@ -0,0 +1,10 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  allowedDevOrigins: ["127.0.0.1", "localhost"],
+  turbopack: {
+    root: process.cwd(),
+  },
+};
+
+export default nextConfig;

agentic_pm_demo_codex_plans/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "agentic-pm-demo",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --webpack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "next": "16.2.4",
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.4",
+    "typescript": "^5"
+  }
+}

agentic_pm_demo_codex_plans/plans/01-product-vision-and-scope.md

@@ -0,0 +1,59 @@
+# 01 Product Vision and Scope Plan
+
+## Project Name
+
+Agentic PM Demo for IoT Product Planning
+
+## Goal
+
+Build a lightweight web demo that shows how an AI assistant helps a product manager transform an ambiguous IoT product idea into structured product work packages.
+
+The app should not behave like a normal chatbot only. It should demonstrate an agentic product management workflow: the user chats with AI on the left, and the AI creates, updates, and displays structured work packages on the right.
+
+## Target User
+
+- Product manager
+- Innovation manager
+- Solution owner
+- Technical product lead
+- IoT / Industrial IoT product owner
+
+## First Demo Domain
+
+IoT product planning, especially industrial IoT or smart device development.
+
+## MVP Scope
+
+1. Two-column web interface.
+2. Chat input and message history.
+3. Work package board.
+4. Seed work package catalog for IoT product development.
+5. LLM API route using OpenAI-compatible format.
+6. Work package command parser.
+7. Simulated execution outputs.
+8. Local development support.
+9. Docker deployment for Hugging Face Spaces.
+
+## Out of Scope for MVP
+
+- User login
+- Persistent database
+- Multi-user collaboration
+- Real tool execution
+- Real patent database search
+- Real certification/legal database lookup
+- Real test execution
+- Real user database access
+- Real image generation
+- Complex drag-and-drop kanban
+
+## Success Criteria
+
+1. User can run the app locally.
+2. User can enter an IoT product idea.
+3. App generates structured work packages.
+4. Board displays the packages clearly.
+5. User can reference packages using `@`.
+6. User can `ask`, `plan`, `change`, and `execute` package content.
+7. Simulated execution outputs are written back to the board.
+8. App can be deployed to Hugging Face Spaces with Docker.

agentic_pm_demo_codex_plans/plans/02-ux-layout-and-interaction.md

@@ -0,0 +1,110 @@
+# 02 UX Layout and Interaction Plan
+
+## Layout
+
+Use a two-column layout.
+
+### Left Column: Chat Workspace
+
+- App title
+- Short instruction
+- Message history
+- Chat input
+- Send button
+- Example prompts
+
+### Right Column: Work Package Board
+
+- Phase sections
+- Work package cards
+- Work package status
+- Inputs and outputs
+- Tasks
+- Simulated execution outputs
+- Quick actions
+
+## Board Grouping
+
+Group work packages by phase:
+
+1. Stakeholder Needs
+2. Specify Product
+3. Design Product
+4. Verify and Validate Product
+
+## Work Package Card
+
+Each card should show:
+
+- Title
+- Short name
+- Phase
+- Objective
+- Status
+- Priority
+- Input files
+- Output files
+- Key sections
+- Tasks
+- Outputs
+- Quick actions
+
+## Quick Actions
+
+Each card should include:
+
+- Ask
+- Plan
+- Change
+- Execute
+- Copy Reference
+
+Clicking a quick action should pre-fill the chat input, for example:
+
+```text
+@CRS ask 
+@SRS plan 
+@Design FMEA change 
+@Test Management execute 
+```
+
+## Interaction Examples
+
+Free-form product idea:
+
+```text
+I want to build an IoT product for production-line tightening quality monitoring.
+```
+
+Reference command:
+
+```text
+@SRS ask Which components are needed to implement CRS-001?
+```
+
+Plan command:
+
+```text
+@Test Management plan Break this into detailed test planning tasks.
+```
+
+Change command:
+
+```text
+@Product Certification change Add EU Data Act as a checklist item.
+```
+
+Execute command:
+
+```text
+@Design FMEA execute Generate a Design FMEA for this IoT product.
+```
+
+## Simulated Execution UX Rule
+
+Every simulated output card must show:
+
+```text
+Simulated Execution
+This is a simulated execution result generated for demo purposes. No real external tool or formal review was executed.
+```

agentic_pm_demo_codex_plans/plans/03-work-package-data-model.md

@@ -0,0 +1,124 @@
+# 03 Work Package Data Model
+
+## TypeScript Types
+
+```ts
+export type WorkPackagePhase =
+  | "Stakeholder Needs"
+  | "Specify Product"
+  | "Design Product"
+  | "Verify and Validate Product";
+
+export type WorkPackageStatus = "todo" | "in_progress" | "done";
+export type WorkPackagePriority = "low" | "medium" | "high";
+
+export type TaskType =
+  | "research"
+  | "planning"
+  | "generation"
+  | "testing"
+  | "design"
+  | "analysis"
+  | "review"
+  | "compliance"
+  | "risk";
+
+export type OutputType =
+  | "text"
+  | "table"
+  | "code"
+  | "image_prompt"
+  | "design_brief"
+  | "test_case"
+  | "checklist"
+  | "risk_table"
+  | "bom"
+  | "sbom"
+  | "feature_list";
+
+export type ExecutionMode = "simulated" | "real";
+
+export type WorkPackageTask = {
+  id: string;
+  title: string;
+  description: string;
+  type: TaskType;
+  executable: boolean;
+  status: WorkPackageStatus;
+};
+
+export type WorkPackageOutput = {
+  id: string;
+  title: string;
+  type: OutputType;
+  content: string;
+  createdAt: string;
+  sourceTaskId?: string;
+  executionMode: ExecutionMode;
+  disclaimer: string;
+};
+
+export type WorkPackageDeliverable = {
+  name: string;
+  required: boolean | string;
+  description?: string;
+};
+
+export type WorkPackage = {
+  id: string;
+  title: string;
+  shortName: string;
+  phase: WorkPackagePhase;
+  objective: string;
+  inputFiles: string[];
+  outputFiles: string[];
+  coreSections: string[];
+  deliverables?: WorkPackageDeliverable[];
+  tasks: WorkPackageTask[];
+  outputs: WorkPackageOutput[];
+  status: WorkPackageStatus;
+  priority: WorkPackagePriority;
+};
+```
+
+## Command Model
+
+```ts
+export type CommandMode = "ask" | "plan" | "change" | "execute";
+
+export type ParsedCommand = {
+  referencedPackageName?: string;
+  mode?: CommandMode;
+  instruction: string;
+};
+```
+
+## Command Pattern
+
+```text
+@WorkPackageName [ask | plan | change | execute] user instruction
+```
+
+## Board Update Rules
+
+### ask
+
+- Do not update work package data.
+- Return only chat response.
+
+### plan
+
+- May add or refine tasks.
+- May update status to `in_progress`.
+
+### change
+
+- May update objective, tasks, input files, output files, core sections, or deliverables.
+- Explain what changed.
+
+### execute
+
+- Must create a `WorkPackageOutput`.
+- Must set `executionMode` to `simulated`.
+- Must include disclaimer.
+- May mark related task as `done`.

agentic_pm_demo_codex_plans/plans/04-work-package-catalog.md

@@ -0,0 +1,298 @@
+# 04 Work Package Catalog
+
+## Phase Overview
+
+```text
+Stakeholder Needs
+1. CRS
+2. Final Concept
+
+Specify Product
+3. SRS
+4. Safety of Products
+5. Product Certification
+6. Test Management
+
+Design Product
+7. Decompose System
+8. Pre-Development — skipped in MVP
+9. Industrial Design
+10. Patent Check
+11. Design FMEA
+12. Final Engineering Concept
+13. Service Ability Review
+
+Verify and Validate Product
+14. Build and Test A-Sample — future/optional
+```
+
+---
+
+# 1. CRS — Customer Requirements Specification
+
+## Objective
+
+Capture and structure customer, user, legal, safety, security, manufacturing, logistics, trade, and service requirements as the source for system requirements and product planning.
+
+## Inputs
+
+VOC notes, customer interviews, market feedback, user pain points, safety input, legal/certification input, security input, manufacturing constraints, logistics constraints, service feedback, trade/sales requirements.
+
+In MVP, these inputs can be mocked.
+
+## Outputs
+
+Customer Requirement List, User Stories, Requirement Classification, CRS-to-SRS Traceability Input, Revision History.
+
+## Core Sections
+
+CRS-User, CRS-Safety, CRS-Legal, CRS-Security, CRS-Technology, CRS-Manufacturing, CRS-Logistics, CRS-Trade, CRS-Service.
+
+## Simulated Tasks
+
+Generate customer requirements; classify requirements; convert VOC to user stories; prepare CRS-to-SRS traceability.
+
+---
+
+# 2. Final Concept
+
+## Objective
+
+Transform CRS into a product concept using user insights, benefits, reasons to believe, and verbal concept validation.
+
+## Outputs
+
+Final Product Concept, Insight-Benefit-Reason-to-Believe Matrix, Validation of Verbal Concept, Concept Visual Brief, 2D Product Concept Image Prompt.
+
+## Core Sections
+
+User group, user size, 3–5 insights, 3–5 benefits, 3–5 reasons to believe, validation of verbal concept, product concept visual brief.
+
+## Simulated Tasks
+
+Generate final product concept from CRS; generate insights; generate benefit/RTB matrix; generate simulated verbal concept validation; generate 2D concept visual brief.
+
+---
+
+# 3. SRS — System Requirements Specification
+
+## Objective
+
+Translate CRS into traceable system-level requirements, including required functions, components, interfaces, specifications, and verification methods.
+
+## Key Concept
+
+CRS explains what the customer needs. SRS explains what the system must contain and satisfy to realize the CRS.
+
+## Outputs
+
+System Requirements Specification, CRS-to-SRS Traceability Matrix, Component Requirement List, Interface Requirement List, Verification Input for Test Management.
+
+## Core Sections
+
+SRS ID, Related CRS ID, System Requirement Statement, Component / Module, Specification, Interface / Dependency, Verification Method, Acceptance Criteria.
+
+## Simulated Tasks
+
+Generate system requirements from CRS; generate CRS-to-SRS traceability; identify required system components; generate verification methods.
+
+---
+
+# 4. Safety of Products
+
+## Objective
+
+Identify product safety hazards, assess initial and residual risks, define risk reduction measures, and document risk acceptance with evidence references.
+
+## Outputs
+
+Product Safety Risk Assessment, Hazard List, Risk Matrix, Risk Reduction Measures, Residual Risk Assessment, Risk Acceptance Statement, Revision History.
+
+## Hazard Categories
+
+Moving Elements, Accessible Parts, Thermal Hazards, Material/Substance Hazards, Ergonomic Hazards, Environment Hazards, Life Cycle Hazards.
+
+## Simulated Tasks
+
+Generate intended use and foreseeable misuse; identify safety hazards; generate risk table; suggest risk reduction; generate residual risk acceptance summary.
+
+---
+
+# 5. Product Certification
+
+## Objective
+
+Identify applicable market access requirements, standards, certification documents, testing needs, approval milestones, and action items.
+
+## Outputs
+
+Product Certification Briefing, Product Certification Plan, Certification Checklist, Applicable Standards List, Applicable Directives and Regulations List, EU DoC Input, Required Approval Document List, Certification Action Item List.
+
+## Certification Todo Topics
+
+Radio module conformity assessment, radio approval test house, Bluetooth SIG/DID, North America questionnaire, battery/UN38.3, special attachments/accessories, risk assessment completion, button/coin battery, functional safety/SCF, Critical Component List, EU Data Act, label drawing review, test house vs in-house testing, required certification documents, sample condition, national approval handover.
+
+## Simulated Tasks
+
+Generate product certification briefing; identify applicable standard categories; generate EU market access checklist; generate certification todo list; generate required document list.
+
+---
+
+# 6. Test Management
+
+## Objective
+
+Translate CRS, SRS, safety, and certification requirements into test objectives, test cases, sample size, testing time, acceptance criteria, and result assessment logic.
+
+## Outputs
+
+Test Plan, Requirement-to-Test Traceability Matrix, Reliability Validation Plan, Sample Size Calculation, Test Time Calculation, Success Run Plan, WeiBayes Evaluation Summary, Test Cost Estimate.
+
+## Key Methods
+
+Success Run basic, Success Run advanced, Weibull assumptions, WeiBayes evaluation, sample size estimation, test time estimation, test cost estimation.
+
+## Simulated Tasks
+
+Generate requirement-to-test matrix; generate functional/performance test cases; generate reliability validation plan; estimate sample size and testing time; generate test cost and resource estimate.
+
+---
+
+# 7. Decompose System
+
+## Objective
+
+Decompose the product/system from the initial Engineering Concept into components, modules, standardization opportunities, technical focus areas, and critical pre-development topics.
+
+## Deliverables
+
+- Technology Filter: required
+- Focus Area Analysis: required if product category is `complicated-new` or `complex`
+- Review of FAM: required if product category is `complex` or if FAM is used for technical risk management
+- Technical Complexity Category: required
+- Project Risk Class: required
+
+## Simulated Tasks
+
+Generate system decomposition; generate Technology Filter; generate Focus Area Analysis; evaluate technical complexity; evaluate project risk class; identify pre-development topics.
+
+---
+
+# 8. Pre-Development
+
+Skipped in MVP.
+
+---
+
+# 9. Industrial Design
+
+## Objective
+
+Translate product concept, system requirements, safety, certification, and service needs into product form, visual direction, interaction layout, CMF, and concept design direction.
+
+## Outputs
+
+Industrial Design Brief, 2D Concept Design Brief, CMF Proposal, HMI/Interaction Layout, Label/LED/Display/Button Layout, Product Usage Scenario Visual, Design Review Checklist.
+
+## Simulated Tasks
+
+Generate industrial design brief; generate 2D concept visual prompt; generate CMF proposal; generate interaction checklist; generate design review checklist.
+
+---
+
+# 10. Patent Check
+
+## Objective
+
+Identify patent-related risks and possible patentable innovation points before engineering design is finalized.
+
+## Outputs
+
+Patent Search Topic List, Potential Freedom-to-Operate Risk Summary, Competitor Patent Review Topics, Possible Patentable Invention Points, Design-Around Questions, IP Review Action Items.
+
+## MVP Rule
+
+Must be simulated. Do not claim real patent search or legal opinion.
+
+---
+
+# 11. Design FMEA
+
+## Objective
+
+Identify potential design failure modes, effects, causes, controls, risk priority, recommended actions, and residual risk.
+
+## Outputs
+
+Design FMEA Table, High-Risk Failure Mode List, Recommended Design Actions, Verification Action List, Residual Risk Summary, FMEA Revision History.
+
+## Core Fields
+
+FMEA ID, Related CRS ID, Related SRS ID, System/Module, Function, Potential Failure Mode, Potential Effect, Severity, Cause, Occurrence, Prevention Control, Detection Control, Detection, Risk Priority, Recommended Action, Owner, Due Date, Status, Residual Risk, Verification Evidence.
+
+## MVP Scoring
+
+Use simplified 1–5 scoring:
+
+```text
+RPN = Severity × Occurrence × Detection
+```
+
+Risk levels:
+
+- 1–20: Low
+- 21–60: Medium
+- 61–125: High
+
+---
+
+# 12. Final Engineering Concept
+
+## Objective
+
+Finalize the engineering concept by generating the hardware BOM, software SBOM, and feature list.
+
+## Outputs
+
+Hardware BOM, Software SBOM, Feature List, BOM-to-Feature Mapping, SBOM-to-Feature Mapping, Feature-to-SRS Traceability, Engineering Concept Summary, Open Engineering Decision List.
+
+## Hardware BOM Fields
+
+BOM ID, Component Name, Category, Function, Related Feature, Related SRS ID, Specification, Source Type, Certification Impact, Safety Impact, Risk Note, Status.
+
+## Software SBOM Fields
+
+SBOM ID, Component Name, Component Type, Function, Related Feature, Related SRS ID, Technology/Library, Version, License, Security Concern, Data Concern, Status.
+
+## Feature List Fields
+
+Feature ID, Feature Name, Feature Description, User Value, Related CRS ID, Related SRS ID, Supported By Hardware, Supported By Software, Priority, Release Phase, Verification Method, Status.
+
+---
+
+# 13. Service Ability Review
+
+## Objective
+
+Use a quality gate questionnaire to confirm whether the product is serviceable enough to move into the next development phase, tooling investment, or production preparation.
+
+## Outputs
+
+Service Ability Quality Gate Questionnaire, Service Readiness Score, Go / Conditional Go / No-Go Recommendation, Open Service Action Items, Replaceable Unit List, Spare Parts Assumptions, Diagnostic Requirement List, Service Documentation Requirement, Service Tool Requirement, Service Training Requirement.
+
+## Quality Gate Question Fields
+
+Question ID, Area, Question, Related Component/Feature, Answer: Yes/No/Partial/N/A, Evidence, Risk if not closed, Required Action, Responsible Role, Due Date, Gate Impact: Blocker/Major/Minor, Status.
+
+## Suggested Gate Logic
+
+- If any Blocker question is No: recommendation = No-Go
+- If any Major question is No or Partial: recommendation = Conditional Go
+- If all Blocker and Major questions are Yes or N/A: recommendation = Go
+- Always list open actions.
+
+---
+
+# 14. Build and Test A-Sample
+
+Future/optional. This can be added later as the first verification work package after Design Product.

agentic_pm_demo_codex_plans/plans/05-reference-command-and-execution.md

@@ -0,0 +1,108 @@
+# 05 Reference Command and Execution Plan
+
+## Goal
+
+Support a Cursor-like interaction pattern for product work packages.
+
+The user can reference a work package from chat and ask AI to reason about it, plan it, change it, or execute tasks inside it.
+
+## Command Syntax
+
+```text
+@WorkPackageName [mode] user instruction
+```
+
+Supported modes:
+
+```text
+ask
+plan
+change
+execute
+```
+
+## Mode Definitions
+
+### ask
+
+Use when the user wants to ask a question about a selected work package.
+
+Behavior: send selected work package as context to LLM; answer in chat; do not update board.
+
+### plan
+
+Use when the user wants AI to further break down a work package.
+
+Behavior: add/refine tasks, next steps, or deliverables.
+
+### change
+
+Use when the user wants AI to directly modify a work package.
+
+Behavior: update selected work package and explain what changed.
+
+### execute
+
+Use when user wants AI to perform a task inside a work package.
+
+MVP behavior: simulate execution, generate structured output, save output to selected work package, mark related task as done if appropriate, and show disclaimer.
+
+## Supported Simulated Execution Types
+
+1. Test case generation
+2. Automation test script generation
+3. Mock user information reading
+4. 2D design brief / image prompt generation
+5. Certification plan generation
+6. Patent check topic generation
+7. Design FMEA generation
+8. Hardware BOM / Software SBOM / Feature List generation
+9. Quality Gate questionnaire generation
+
+## Simulated Output Format
+
+```json
+{
+  "title": "Simulated Output Title",
+  "type": "table | text | checklist | code | design_brief | image_prompt | risk_table | bom | sbom | feature_list",
+  "executionMode": "simulated",
+  "disclaimer": "This is a simulated execution result generated for demo purposes. No real external tool, engineering review, certification approval, user database, image generation service, patent search, or test system was executed.",
+  "content": "..."
+}
+```
+
+## Command Parser Requirements
+
+Input:
+
+```text
+@Final Engineering Concept execute Generate BOM and SBOM.
+```
+
+Output:
+
+```ts
+{
+  referencedPackageName: "Final Engineering Concept",
+  mode: "execute",
+  instruction: "Generate BOM and SBOM."
+}
+```
+
+## Matching Rules
+
+Support exact title match, short name match, case-insensitive match, and trimmed spaces.
+
+Examples:
+
+- `@CRS`
+- `@SRS`
+- `@Design FMEA`
+- `@Service Review`
+- `@Final Engineering Concept`
+
+## Error Handling
+
+If package is not found, ask user to select an existing package and show close matches if possible.
+
+If mode is missing, default to `ask`.

agentic_pm_demo_codex_plans/plans/06-llm-api-and-prompt-contract.md

@@ -0,0 +1,87 @@
+# 06 LLM API and Prompt Contract
+
+## Goal
+
+Use an OpenAI-compatible API contract so the app can connect to OpenAI, OpenRouter, DeepSeek, Qwen, or other compatible providers.
+
+## Environment Variables
+
+```env
+LLM_API_BASE_URL=https://api.openai.com/v1
+LLM_API_KEY=your_api_key
+LLM_MODEL=gpt-4.1-mini
+```
+
+## API Route
+
+```text
+POST /api/chat
+```
+
+## Request Payload
+
+```ts
+type ChatRequest = {
+  messages: ChatMessage[];
+  workPackages: WorkPackage[];
+  selectedWorkPackageId?: string;
+  parsedCommand?: ParsedCommand;
+};
+```
+
+## Response Payload
+
+```ts
+type ChatResponse = {
+  assistantMessage: string;
+  boardPatch?: WorkPackagePatch;
+  simulatedOutput?: WorkPackageOutput;
+};
+```
+
+## Structured Output
+
+Ask the LLM to return JSON in this shape:
+
+```json
+{
+  "assistantMessage": "string",
+  "boardAction": {
+    "type": "none | create | update | append_output",
+    "workPackageId": "string",
+    "fields": {},
+    "output": {}
+  }
+}
+```
+
+## Behavior Rules
+
+### Free-form Product Idea
+
+When the user provides a product idea without `@` command:
+
+1. Interpret it as product planning request.
+2. Generate or refine the work package board.
+3. Use IoT work package catalog as default structure.
+4. Return concise explanation in chat.
+
+### ask
+
+Answer based on referenced package. Do not modify board.
+
+### plan
+
+Generate tasks or next steps. Update selected package tasks.
+
+### change
+
+Modify selected package based on instruction. Return updated fields.
+
+### execute
+
+Generate simulated output. Append to selected package outputs. Include disclaimer.
+
+## Critical Rule
+
+The LLM must not claim real execution for MVP tasks.

agentic_pm_demo_codex_plans/plans/07-technical-architecture-and-file-structure.md

@@ -0,0 +1,100 @@
+# 07 Technical Architecture and File Structure
+
+## Stack
+
+- Next.js
+- React
+- TypeScript
+- Tailwind CSS
+- shadcn/ui
+- OpenAI-compatible API
+- Docker
+
+## Architecture
+
+```text
+Browser
+  ↓
+Next.js React UI
+  ↓
+Client state management
+  ↓
+Next.js API Route
+  ↓
+OpenAI-compatible LLM API
+```
+
+## Suggested File Structure
+
+```text
+agentic-pm-demo/
+  app/
+    page.tsx
+    api/
+      chat/
+        route.ts
+  components/
+    ChatPanel.tsx
+    WorkPackageBoard.tsx
+    WorkPackageCard.tsx
+    WorkPackageOutput.tsx
+    CommandInput.tsx
+  lib/
+    command-parser.ts
+    work-package-types.ts
+    work-package-utils.ts
+    llm-client.ts
+    board-actions.ts
+  data/
+    work-packages.seed.json
+    sample-user-profile.json
+    sample-interview-notes.md
+    sample-customer-scenario.md
+  prompts/
+    work-package-system-prompt.md
+  plans/
+  AGENTS.md
+  README.md
+  Dockerfile
+  package.json
+  .env.example
+```
+
+## Frontend Components
+
+### ChatPanel
+
+Renders message history, handles user input, sends chat request, displays assistant replies.
+
+### WorkPackageBoard
+
+Groups packages by phase, renders package cards, applies board patches.
+
+### WorkPackageCard
+
+Shows package summary, tasks, outputs, and quick actions.
+
+### WorkPackageOutput
+
+Renders simulated outputs with disclaimer and expand/collapse behavior.
+
+## Backend API
+
+`POST /api/chat` should:
+
+1. Receive chat messages and current board state.
+2. Parse command if needed.
+3. Call LLM using OpenAI-compatible API.
+4. Return assistant message and board action.
+5. Validate simulated execution disclaimer for `execute` mode.
+
+## Mock Agent Fallback
+
+If no API key exists, use local mock behavior:
+
+- `execute`: generate mock output.
+- `ask`: return generic explanation.
+- `plan`: add sample tasks.
+- `change`: update simple fields.
+
+This lets the app run without API configuration.

agentic_pm_demo_codex_plans/plans/08-local-run-and-huggingface-deployment.md

@@ -0,0 +1,83 @@
+# 08 Local Run and Hugging Face Deployment Plan
+
+## Local Setup
+
+```bash
+npm install
+npm run dev
+```
+
+Open:
+
+```text
+http://localhost:3000
+```
+
+## Environment Variables
+
+Create `.env.local`:
+
+```env
+LLM_API_BASE_URL=https://api.openai.com/v1
+LLM_API_KEY=your_api_key
+LLM_MODEL=gpt-4.1-mini
+```
+
+## Mock Mode
+
+The app must run without `LLM_API_KEY`.
+
+If no API key exists:
+
+- Show UI badge: `Mock mode`
+- Use local simulated responses
+- Do not crash
+
+## Dockerfile
+
+```dockerfile
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm install
+
+COPY . .
+
+RUN npm run build
+
+EXPOSE 3000
+
+ENV PORT=3000
+CMD ["npm", "start"]
+```
+
+## package.json Scripts
+
+```json
+{
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start -p 3000",
+    "lint": "next lint"
+  }
+}
+```
+
+## Hugging Face Spaces Deployment
+
+Use a Docker Space.
+
+Steps:
+
+1. Create a new Hugging Face Space.
+2. Select Docker as SDK.
+3. Push repository to the Space git repo.
+4. Add Space Secrets:
+   - `LLM_API_BASE_URL`
+   - `LLM_API_KEY`
+   - `LLM_MODEL`
+5. Wait for Space build.
+6. Open the running demo.

agentic_pm_demo_codex_plans/prompts/work-package-system-prompt.md

@@ -0,0 +1,103 @@
+# Work Package System Prompt
+
+You are an Agentic Product Management assistant for IoT product development.
+
+You help the user transform product ideas into structured product development work packages.
+
+## Domain
+
+The default domain is IoT product planning, especially industrial IoT, smart devices, connected tools, production-line monitoring, local dashboards, device connectivity, and system integration.
+
+## Work Package Catalog
+
+Use this phase structure:
+
+```text
+Stakeholder Needs
+1. CRS
+2. Final Concept
+
+Specify Product
+3. SRS
+4. Safety of Products
+5. Product Certification
+6. Test Management
+
+Design Product
+7. Decompose System
+8. Pre-Development — skipped in MVP
+9. Industrial Design
+10. Patent Check
+11. Design FMEA
+12. Final Engineering Concept
+13. Service Ability Review
+
+Verify and Validate Product
+14. Build and Test A-Sample — future/optional
+```
+
+## Command Modes
+
+The user may reference a package:
+
+```text
+@WorkPackageName ask ...
+@WorkPackageName plan ...
+@WorkPackageName change ...
+@WorkPackageName execute ...
+```
+
+## Behavior Rules
+
+### ask
+
+Answer questions using the selected work package as context. Do not change the board.
+
+### plan
+
+Break down the work package into more detailed tasks, questions, or deliverables. Update the package.
+
+### change
+
+Modify the selected package according to the user instruction. Update the package.
+
+### execute
+
+Generate a simulated output for the selected package. Append it to the package outputs.
+
+## Critical MVP Rule
+
+All execution is simulated.
+
+Never claim that a real test, real user database, real certification review, real patent search, real engineering review, real image generation, or real external tool was executed.
+
+Every execution output must include:
+
+```text
+This is a simulated execution result generated for demo purposes. No real external tool, engineering review, certification approval, user database, image generation service, patent search, or test system was executed.
+```
+
+## Output Format
+
+Return JSON only in this shape:
+
+```json
+{
+  "assistantMessage": "Short user-facing response.",
+  "boardAction": {
+    "type": "none | create | update | append_output",
+    "workPackageId": "string or null",
+    "fields": {},
+    "output": {
+      "id": "string",
+      "title": "string",
+      "type": "text | table | code | image_prompt | design_brief | test_case | checklist | risk_table | bom | sbom | feature_list",
+      "content": "string",
+      "createdAt": "ISO timestamp",
+      "sourceTaskId": "string or null",
+      "executionMode": "simulated",
+      "disclaimer": "This is a simulated execution result generated for demo purposes. No real external tool, engineering review, certification approval, user database, image generation service, patent search, or test system was executed."
+    }
+  }
+}
+```

agentic_pm_demo_codex_plans/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}

app/api/chat/route.ts

@@ -0,0 +1,361 @@
+import { NextResponse } from "next/server";
+import { z } from "zod";
+import type {
+  ParsedCommand,
+  WorkPackage,
+} from "@/lib/work-package-types";
+import { SIMULATED_EXECUTION_DISCLAIMER } from "@/lib/work-package-types";
+import { runMockAgent } from "@/lib/mock-agent";
+import type { ChatResponse } from "@/lib/board-actions";
+import {
+  buildExecutionPrompt,
+  buildRealExecutionResponse,
+  REAL_AUTOMATION_DISCLAIMER,
+} from "@/lib/automation-agent";
+import { generateLlmText } from "@/lib/llm-client";
+import {
+  DEFAULT_LLM_BASE_URL,
+  DEFAULT_LLM_MODEL,
+  isLlmConfigReady,
+  normalizeLlmConfig,
+} from "@/lib/llm-config";
+import { compactTracePreview } from "@/lib/chat-trace";
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+
+const ChatMessageSchema = z.object({
+  role: z.enum(["user", "assistant", "system"]),
+  content: z.string(),
+});
+
+const ParsedCommandSchema = z.object({
+  referencedPackageName: z.string().optional(),
+  mode: z.enum(["ask", "plan", "change", "execute"]).optional(),
+  instruction: z.string(),
+});
+
+const OutputTypeSchema = z.enum([
+  "text",
+  "table",
+  "code",
+  "image_prompt",
+  "design_brief",
+  "test_case",
+  "checklist",
+  "risk_table",
+  "bom",
+  "sbom",
+  "feature_list",
+]);
+
+const WorkPackageOutputSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  type: OutputTypeSchema,
+  content: z.string(),
+  createdAt: z.string(),
+  sourceTaskId: z.string().nullable().optional(),
+  executionMode: z.enum(["simulated", "real"]),
+  disclaimer: z.string(),
+});
+
+const BoardActionSchema = z.object({
+  type: z.enum(["none", "create", "update", "append_output", "replace_all"]),
+  workPackageId: z.string().nullable(),
+  fields: z.record(z.string(), z.unknown()).optional(),
+  output: WorkPackageOutputSchema.optional(),
+});
+
+const LlmJsonSchema = z.object({
+  assistantMessage: z.string(),
+  boardAction: BoardActionSchema,
+});
+
+const ChatRequestSchema = z.object({
+  messages: z.array(ChatMessageSchema),
+  workPackages: z.array(z.any()),
+  selectedWorkPackageId: z.string().nullable().optional(),
+  parsedCommand: ParsedCommandSchema.optional(),
+  llmConfig: z
+    .object({
+      apiKey: z.string().optional(),
+      baseUrl: z.string().optional(),
+      model: z.string().optional(),
+    })
+    .optional(),
+});
+
+function safeJsonParse(text: string): unknown {
+  try {
+    return JSON.parse(text);
+  } catch {
+    // Try extracting the first JSON object.
+    const start = text.indexOf("{");
+    const end = text.lastIndexOf("}");
+    if (start !== -1 && end !== -1 && end > start) {
+      const slice = text.slice(start, end + 1);
+      return JSON.parse(slice);
+    }
+    throw new Error("Invalid JSON");
+  }
+}
+
+async function loadSystemPrompt(): Promise<string> {
+  // Prefer repo root prompt; fall back to the planning pack copy.
+  const rootPrompt = path.join(process.cwd(), "prompts/work-package-system-prompt.md");
+  try {
+    return await readFile(rootPrompt, "utf8");
+  } catch {
+    const packPrompt = path.join(
+      process.cwd(),
+      "agentic_pm_demo_codex_plans/prompts/work-package-system-prompt.md",
+    );
+    return await readFile(packPrompt, "utf8");
+  }
+}
+
+function ensureExecuteDisclaimer(payload: z.infer<typeof LlmJsonSchema>) {
+  const out = payload.boardAction?.output;
+  if (!out) return payload;
+  if (!out.disclaimer) {
+    out.disclaimer =
+      out.executionMode === "real"
+        ? REAL_AUTOMATION_DISCLAIMER
+        : SIMULATED_EXECUTION_DISCLAIMER;
+  }
+  return payload;
+}
+
+function resolveLlmConfig(
+  llmConfig?: { apiKey?: string; baseUrl?: string; model?: string } | null,
+) {
+  if (isLlmConfigReady(llmConfig)) {
+    return normalizeLlmConfig(llmConfig);
+  }
+
+  const fromEnv = normalizeLlmConfig({
+    apiKey: process.env.LLM_API_KEY,
+    baseUrl: process.env.LLM_API_BASE_URL || DEFAULT_LLM_BASE_URL,
+    model: process.env.LLM_MODEL || DEFAULT_LLM_MODEL,
+  });
+
+  return isLlmConfigReady(fromEnv) ? fromEnv : null;
+}
+
+function latestUserText(messages: Array<{ role: string; content: string }>) {
+  return [...messages].reverse().find((message) => message.role === "user")?.content;
+}
+
+export async function POST(req: Request) {
+  const json = await req.json().catch(() => null);
+  const parsedReq = ChatRequestSchema.safeParse(json);
+  if (!parsedReq.success) {
+    return NextResponse.json(
+      { assistantMessage: "Bad request.", boardAction: { type: "none", workPackageId: null } },
+      { status: 400 },
+    );
+  }
+
+  const {
+    messages,
+    workPackages,
+    selectedWorkPackageId,
+    parsedCommand,
+    llmConfig,
+  } = parsedReq.data;
+
+  const resolvedConfig = resolveLlmConfig(llmConfig);
+  const currentWorkPackages = workPackages as WorkPackage[];
+
+  // Mock-first: if no key is present, stay local.
+  if (!resolvedConfig) {
+    const resp = runMockAgent({
+      messages: messages.map((message, index) => ({
+        id: `server-msg-${index}`,
+        role: message.role === "system" ? "assistant" : message.role,
+        content: message.content,
+        createdAt: new Date().toISOString(),
+      })),
+      workPackages: workPackages as WorkPackage[],
+      selectedWorkPackageId: selectedWorkPackageId ?? undefined,
+      parsedCommand: parsedCommand as ParsedCommand | undefined,
+    });
+    return NextResponse.json({
+      ...resp,
+      trace: {
+        provider: "mock",
+        model: "mock-agent",
+        requestPreview: compactTracePreview(
+          latestUserText(messages) || "No user message.",
+        ),
+        responsePreview: compactTracePreview(resp.assistantMessage),
+      },
+    } satisfies ChatResponse);
+  }
+
+  const systemPrompt = await loadSystemPrompt();
+  const userText = latestUserText(messages) || "";
+  const selectedWp =
+    currentWorkPackages.find((wp) => wp.id === selectedWorkPackageId) ?? null;
+
+  if (parsedCommand?.mode === "execute") {
+    const targetPackage =
+      selectedWp ??
+      currentWorkPackages.find(
+        (wp) =>
+          wp.title.toLowerCase() ===
+            parsedCommand.referencedPackageName?.toLowerCase() ||
+          wp.shortName.toLowerCase() ===
+            parsedCommand.referencedPackageName?.toLowerCase(),
+      );
+
+    if (!targetPackage) {
+      return NextResponse.json(
+        {
+          assistantMessage: "No matching work package was found for execution.",
+          boardAction: { type: "none", workPackageId: null },
+        } satisfies ChatResponse,
+        { status: 200 },
+      );
+    }
+
+    try {
+      const llmResult = await generateLlmText({
+        config: resolvedConfig,
+        systemPrompt:
+          "You are an expert product development PM and systems engineer. Generate complete, practical, package-specific deliverables in markdown.",
+        userPrompt: buildExecutionPrompt({
+          workPackage: targetPackage,
+          workPackages: currentWorkPackages,
+          productIdea: userText,
+          instruction: parsedCommand.instruction,
+        }),
+        temperature: 0.2,
+        maxTokens: 2800,
+      });
+
+      return NextResponse.json(
+        {
+          ...buildRealExecutionResponse({
+            workPackage: targetPackage,
+            generatedContent: llmResult.text,
+            instruction: parsedCommand.instruction,
+            productIdea: userText,
+          }),
+          trace: {
+            provider: "live",
+            model: resolvedConfig.model,
+            endpoint: llmResult.endpoint,
+            requestPreview: llmResult.requestPreview,
+            responsePreview: llmResult.responsePreview,
+          },
+        } satisfies ChatResponse,
+        { status: 200 },
+      );
+    } catch (err) {
+      return NextResponse.json(
+        {
+          assistantMessage: `Live execution failed. (No board changes applied.)\n\n${String(err)}`,
+          boardAction: { type: "none", workPackageId: null },
+          trace: {
+            provider: "live",
+            model: resolvedConfig.model,
+            responsePreview: compactTracePreview(String(err)),
+          },
+        } satisfies ChatResponse,
+        { status: 200 },
+      );
+    }
+  }
+
+  const contextBlock = JSON.stringify(
+    {
+      selectedWorkPackageId: selectedWorkPackageId ?? null,
+      selectedWorkPackage: selectedWp,
+      parsedCommand: parsedCommand ?? null,
+      workPackages: currentWorkPackages,
+    },
+    null,
+    2,
+  );
+
+  const conversationBlock = messages
+    .map((message) => `${message.role.toUpperCase()}: ${message.content}`)
+    .join("\n\n");
+
+  try {
+    const llmResult = await generateLlmText({
+      config: resolvedConfig,
+      systemPrompt,
+      userPrompt: [
+        "Return JSON ONLY that matches the required contract.",
+        "Use the context to decide whether and how the board should change.",
+        `Context:\n${contextBlock}`,
+        `Conversation:\n${conversationBlock}`,
+      ].join("\n\n"),
+      temperature: 0.2,
+      maxTokens: 2200,
+    });
+
+    if (!llmResult.text) {
+      return NextResponse.json(
+        {
+          assistantMessage: "LLM returned an empty response.",
+          boardAction: { type: "none", workPackageId: null },
+          trace: {
+            provider: "live",
+            model: resolvedConfig.model,
+            endpoint: llmResult.endpoint,
+            requestPreview: llmResult.requestPreview,
+          },
+        } satisfies ChatResponse,
+        { status: 200 },
+      );
+    }
+
+    const parsedJson = safeJsonParse(llmResult.text);
+    const validated = LlmJsonSchema.safeParse(parsedJson);
+    if (!validated.success) {
+      return NextResponse.json(
+        {
+          assistantMessage:
+            "LLM returned invalid JSON for the required contract. (No board changes applied.)",
+          boardAction: { type: "none", workPackageId: null },
+          trace: {
+            provider: "live",
+            model: resolvedConfig.model,
+            endpoint: llmResult.endpoint,
+            requestPreview: llmResult.requestPreview,
+            responsePreview: llmResult.responsePreview,
+          },
+        } satisfies ChatResponse,
+        { status: 200 },
+      );
+    }
+
+    const payload = ensureExecuteDisclaimer(validated.data);
+    return NextResponse.json({
+      ...payload,
+      trace: {
+        provider: "live",
+        model: resolvedConfig.model,
+        endpoint: llmResult.endpoint,
+        requestPreview: llmResult.requestPreview,
+        responsePreview: llmResult.responsePreview,
+      },
+    } satisfies ChatResponse);
+  } catch (err) {
+    return NextResponse.json(
+      {
+        assistantMessage: `Network or parsing error calling LLM. (No board changes applied.)\n\n${String(err)}`,
+        boardAction: { type: "none", workPackageId: null },
+        trace: {
+          provider: "live",
+          model: resolvedConfig.model,
+          responsePreview: compactTracePreview(String(err)),
+        },
+      } satisfies ChatResponse,
+      { status: 200 },
+    );
+  }
+}

app/api/test-connection/route.ts

@@ -0,0 +1,61 @@
+import { NextResponse } from "next/server";
+import { z } from "zod";
+import { generateLlmText } from "@/lib/llm-client";
+import { isLlmConfigReady, normalizeLlmConfig } from "@/lib/llm-config";
+
+const RequestSchema = z.object({
+  llmConfig: z.object({
+    apiKey: z.string().optional(),
+    baseUrl: z.string().optional(),
+    model: z.string().optional(),
+  }),
+});
+
+export async function POST(req: Request) {
+  const json = await req.json().catch(() => null);
+  const parsed = RequestSchema.safeParse(json);
+
+  if (!parsed.success) {
+    return NextResponse.json(
+      { ok: false, status: "error", message: "Bad request." },
+      { status: 400 },
+    );
+  }
+
+  if (!isLlmConfigReady(parsed.data.llmConfig)) {
+    return NextResponse.json({
+      ok: false,
+      status: "idle",
+      message: "Add API key, base URL, and model to test the connection.",
+    });
+  }
+
+  const config = normalizeLlmConfig(parsed.data.llmConfig);
+
+  try {
+    const result = await generateLlmText({
+      config,
+      systemPrompt:
+        "You are running a connection test. Reply with a short confirmation only.",
+      userPrompt:
+        "Connection test. Reply with exactly: Connected to the configured model.",
+      temperature: 0,
+      maxTokens: 60,
+    });
+
+    return NextResponse.json({
+      ok: true,
+      status: "connected",
+      message: result.text,
+      model: config.model,
+      endpoint: result.endpoint,
+    });
+  } catch (error) {
+    return NextResponse.json({
+      ok: false,
+      status: "error",
+      message: String(error),
+      model: config.model,
+    });
+  }
+}

app/globals.css

@@ -0,0 +1,204 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-geist-mono);
+  --font-heading: var(--font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}
+
+@layer components {
+  .markdown-content h1,
+  .markdown-content h2,
+  .markdown-content h3,
+  .markdown-content h4 {
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+    font-weight: 600;
+    line-height: 1.4;
+  }
+
+  .markdown-content p,
+  .markdown-content ul,
+  .markdown-content ol,
+  .markdown-content pre,
+  .markdown-content table,
+  .markdown-content blockquote {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .markdown-content ul,
+  .markdown-content ol {
+    padding-left: 1.25rem;
+  }
+
+  .markdown-content ul {
+    list-style: disc;
+  }
+
+  .markdown-content ol {
+    list-style: decimal;
+  }
+
+  .markdown-content code {
+    background: color-mix(in oklab, var(--muted) 70%, transparent);
+    border-radius: 0.375rem;
+    padding: 0.1rem 0.3rem;
+    font-size: 0.85em;
+  }
+
+  .markdown-content pre {
+    overflow-x: auto;
+    border-radius: 0.875rem;
+    background: color-mix(in oklab, var(--muted) 55%, transparent);
+    padding: 0.875rem;
+  }
+
+  .markdown-content pre code {
+    background: transparent;
+    padding: 0;
+  }
+
+  .markdown-content table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.92em;
+  }
+
+  .markdown-content th,
+  .markdown-content td {
+    border: 1px solid var(--border);
+    padding: 0.5rem 0.625rem;
+    text-align: left;
+    vertical-align: top;
+  }
+
+  .markdown-content blockquote {
+    border-left: 3px solid var(--border);
+    padding-left: 0.875rem;
+    color: var(--muted-foreground);
+  }
+}

app/layout.tsx

@@ -0,0 +1,36 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Agentic PM Demo",
+  description: "Agentic product management demo for IoT product planning.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html
+      lang="en"
+      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+    >
+      <body className="min-h-full flex flex-col">
+        <TooltipProvider>{children}</TooltipProvider>
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,5 @@
+import { AppShell } from "@/components/AppShell";
+
+export default function Home() {
+  return <AppShell />;
+}

components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-nova",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

components/AgentLogPanel.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import type { AgentLogEntry } from "@/lib/work-package-types";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Badge } from "@/components/ui/badge";
+
+function levelTone(level: AgentLogEntry["level"]) {
+  if (level === "success") return "text-emerald-700";
+  if (level === "warn") return "text-amber-700";
+  if (level === "error") return "text-rose-700";
+  return "text-foreground";
+}
+
+function formatLogTime(value: string) {
+  return value.slice(11, 19);
+}
+
+export function AgentLogPanel(props: {
+  logs: AgentLogEntry[];
+  busy: boolean;
+}) {
+  const { logs, busy } = props;
+
+  return (
+    <div className="flex h-full min-h-0 flex-col rounded-2xl bg-muted/24 px-1">
+      <div className="px-3 py-2 md:px-4">
+        <div className="flex items-center justify-between gap-2">
+          <div>
+            <div className="text-sm font-semibold">Agent Log</div>
+            <div className="text-xs text-muted-foreground">
+              Background activity, command routing, and board updates.
+            </div>
+          </div>
+          <Badge variant={busy ? "secondary" : "outline"} className="text-[11px]">
+            {busy ? "Running" : "Idle"}
+          </Badge>
+        </div>
+      </div>
+
+      <ScrollArea className="flex-1">
+        <div className="px-3 py-1 font-mono text-[11px] leading-5 md:px-4">
+          {logs.length ? (
+            logs
+              .slice()
+              .reverse()
+              .map((log) => (
+                <div key={log.id} className="py-1 last:border-b-0">
+                  <div className="flex items-start justify-between gap-2">
+                    <div className={["min-w-0", levelTone(log.level)].join(" ")}>
+                      <div className="font-semibold">{log.title}</div>
+                      <div className="mt-0.5 whitespace-pre-wrap break-words text-muted-foreground/90">
+                        {log.detail}
+                      </div>
+                    </div>
+                    <div
+                      className="shrink-0 text-[10px] text-muted-foreground"
+                      suppressHydrationWarning
+                    >
+                      {formatLogTime(log.createdAt)}
+                    </div>
+                  </div>
+                </div>
+              ))
+          ) : (
+            <div className="text-muted-foreground">
+              No agent activity yet.
+            </div>
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}

components/AppShell.tsx

@@ -0,0 +1,629 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import type {
+  AgentLogEntry,
+  ChatMessage,
+  ConnectionStatus,
+  WorkPackage,
+} from "@/lib/work-package-types";
+import type { LlmConfig } from "@/lib/llm-config";
+import type { ModelTrace } from "@/lib/chat-trace";
+import { parseCommand } from "@/lib/command-parser";
+import { applyBoardAction, type ChatResponse } from "@/lib/board-actions";
+import { runMockAgent } from "@/lib/mock-agent";
+import { hydrateWorkPackages } from "@/lib/work-package-specs";
+import { buildAutomationInstruction } from "@/lib/automation-agent";
+import { extractProductTitle } from "@/lib/product-title";
+import { AgentLogPanel } from "@/components/AgentLogPanel";
+import { ChatPanel } from "@/components/ChatPanel";
+import { WorkPackageBoard } from "@/components/WorkPackageBoard";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  isLlmConfigReady,
+  LLM_SETTINGS_STORAGE_KEY,
+  normalizeLlmConfig,
+} from "@/lib/llm-config";
+
+import seedWorkPackages from "@/agentic_pm_demo_codex_plans/data/work-packages.seed.json";
+
+type ViewMode = "chat" | "board";
+
+function nowIso() {
+  return new Date().toISOString();
+}
+
+function newId(prefix: string) {
+  return `${prefix}-${crypto.randomUUID()}`;
+}
+
+function welcomeMessage(live: boolean) {
+  return live
+    ? "Live mode is connected. Type a product idea to auto-run the full board, or use a work package command like:\n`@SRS ask ...`  `@Design FMEA execute ...`"
+    : "Mock mode is active until you add an API key in Model Settings below.\n\nType a product idea to auto-run the full board, or use a work package command like:\n`@SRS ask ...`  `@Design FMEA execute ...`";
+}
+
+export function AppShell() {
+  const [view, setView] = useState<ViewMode>("chat");
+  const [projectTitle, setProjectTitle] = useState("Agentic PM Demo");
+  const [workPackages, setWorkPackages] = useState<WorkPackage[]>(() =>
+    hydrateWorkPackages(seedWorkPackages as WorkPackage[]),
+  );
+  const [selectedWorkPackageId, setSelectedWorkPackageId] = useState<
+    string | undefined
+  >(() => (seedWorkPackages as WorkPackage[])[0]?.id);
+  const [detailOpen, setDetailOpen] = useState(false);
+  const [messages, setMessages] = useState<ChatMessage[]>(() => {
+    return [
+      {
+        id: "welcome-message",
+        role: "assistant",
+        content: welcomeMessage(false),
+        createdAt: nowIso(),
+      },
+    ];
+  });
+  const [agentLogs, setAgentLogs] = useState<AgentLogEntry[]>(() => [
+    {
+      id: newId("log"),
+      title: "Workspace ready",
+      detail:
+        "Workspace ready. Add an API key below for live automation, or stay in mock mode.",
+      level: "info",
+      createdAt: nowIso(),
+    },
+  ]);
+  const [draft, setDraft] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [settingsLoaded, setSettingsLoaded] = useState(false);
+  const [connectionStatus, setConnectionStatus] =
+    useState<ConnectionStatus>("idle");
+  const [connectionMessage, setConnectionMessage] = useState(
+    "Add your model settings to enable live automation.",
+  );
+  const [activeWorkPackageId, setActiveWorkPackageId] = useState<
+    string | undefined
+  >();
+  const [currentActivity, setCurrentActivity] = useState(
+    "Ready for a product idea or a package command.",
+  );
+  const [llmConfig, setLlmConfig] = useState<LlmConfig>(() =>
+    normalizeLlmConfig(),
+  );
+  const lastConnectionLogKeyRef = useRef("");
+
+  useEffect(() => {
+    try {
+      const raw = window.localStorage.getItem(LLM_SETTINGS_STORAGE_KEY);
+      if (raw) {
+        const parsed = JSON.parse(raw) as Partial<LlmConfig>;
+        setLlmConfig(normalizeLlmConfig(parsed));
+      }
+    } catch {
+      // ignore malformed local storage
+    } finally {
+      setSettingsLoaded(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!settingsLoaded) return;
+    try {
+      window.localStorage.setItem(
+        LLM_SETTINGS_STORAGE_KEY,
+        JSON.stringify(llmConfig),
+      );
+    } catch {
+      // ignore persistence failures
+    }
+  }, [llmConfig, settingsLoaded]);
+
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    document.title =
+      projectTitle === "Agentic PM Demo"
+        ? projectTitle
+        : `${projectTitle} · Agentic PM Demo`;
+  }, [projectTitle]);
+
+  useEffect(() => {
+    setMessages((prev) => {
+      if (!prev.length || prev[0]?.id !== "welcome-message") return prev;
+      const next = [...prev];
+      next[0] = {
+        ...next[0],
+        content: welcomeMessage(connectionStatus === "connected"),
+      };
+      return next;
+    });
+  }, [connectionStatus]);
+
+  useEffect(() => {
+    if (!settingsLoaded) return;
+
+    if (!isLlmConfigReady(llmConfig)) {
+      setConnectionStatus("idle");
+      setConnectionMessage("Add API key, base URL, and model to enable live automation.");
+      return;
+    }
+
+    let cancelled = false;
+    const timeout = window.setTimeout(async () => {
+      setConnectionStatus("checking");
+      setConnectionMessage("Testing model connection...");
+
+      try {
+        const res = await fetch("/api/test-connection", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ llmConfig }),
+        });
+        const data = (await res.json()) as {
+          ok?: boolean;
+          status?: ConnectionStatus;
+          message?: string;
+          model?: string;
+        };
+
+        if (cancelled) return;
+
+        if (data.ok) {
+          setConnectionStatus("connected");
+          setConnectionMessage(data.message || "Connection verified.");
+          const logKey = `${llmConfig.baseUrl}|${llmConfig.model}|connected`;
+          if (lastConnectionLogKeyRef.current !== logKey) {
+            lastConnectionLogKeyRef.current = logKey;
+            addLog(
+              "Model connected",
+              `${llmConfig.model} is ready for live automation.`,
+              "success",
+            );
+          }
+          return;
+        }
+
+        setConnectionStatus(data.status === "error" ? "error" : "idle");
+        setConnectionMessage(data.message || "Connection test did not complete.");
+        const logKey = `${llmConfig.baseUrl}|${llmConfig.model}|${data.message}`;
+        if (data.status === "error" && lastConnectionLogKeyRef.current !== logKey) {
+          lastConnectionLogKeyRef.current = logKey;
+          addLog(
+            "Model connection failed",
+            data.message || "Connection test failed.",
+            "warn",
+          );
+        }
+      } catch (error) {
+        if (cancelled) return;
+        setConnectionStatus("error");
+        setConnectionMessage(String(error));
+      }
+    }, 700);
+
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timeout);
+    };
+  }, [llmConfig, settingsLoaded]);
+
+  const isMockMode = useMemo(
+    () => connectionStatus !== "connected",
+    [connectionStatus],
+  );
+
+  function logModelTrace(trace: ModelTrace | undefined) {
+    if (!trace) return;
+
+    if (trace.requestPreview) {
+      addLog(
+        "Model request",
+        `${trace.model ?? "unknown"}${trace.endpoint ? ` @ ${trace.endpoint}` : ""} :: ${trace.requestPreview}`,
+        trace.provider === "live" ? "info" : "warn",
+      );
+    }
+
+    if (trace.responsePreview) {
+      addLog(
+        "Model response",
+        trace.responsePreview,
+        trace.provider === "live" ? "success" : "info",
+      );
+    }
+  }
+
+  function addLog(title: string, detail: string, level: AgentLogEntry["level"]) {
+    setAgentLogs((prev) => [
+      ...prev,
+      {
+        id: newId("log"),
+        title,
+        detail,
+        level,
+        createdAt: nowIso(),
+      },
+    ]);
+  }
+
+  async function requestChatResponse(args: {
+    nextMessages: ChatMessage[];
+    boardSnapshot: WorkPackage[];
+    selectedId?: string;
+    parsedCommand: {
+      referencedPackageName?: string;
+      mode?: "ask" | "plan" | "change" | "execute";
+      instruction: string;
+    };
+  }) {
+    const res = await fetch("/api/chat", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({
+        messages: args.nextMessages.map((message) => ({
+          role: message.role,
+          content: message.content,
+        })),
+        workPackages: args.boardSnapshot,
+        selectedWorkPackageId: args.selectedId ?? null,
+        parsedCommand: args.parsedCommand,
+        llmConfig,
+      }),
+    });
+
+    if (!res.ok) {
+      throw new Error(`Request failed with status ${res.status}.`);
+    }
+
+    return (await res.json()) as ChatResponse;
+  }
+
+  async function automateBoardFromProductIdea(args: {
+    productIdea: string;
+    nextMessages: ChatMessage[];
+    fallbackToMock?: boolean;
+  }) {
+    const hydrated = hydrateWorkPackages(workPackages, args.productIdea);
+    let boardState = hydrated;
+    const completedShortNames: string[] = [];
+    const newTitle = extractProductTitle(args.productIdea);
+
+    setProjectTitle(newTitle);
+    setWorkPackages(hydrated);
+    setDetailOpen(false);
+    setActiveWorkPackageId(undefined);
+    setCurrentActivity(`Preparing board for ${newTitle}.`);
+    addLog(
+      "Board hydrated",
+      `Prepared ${hydrated.length} work packages from the product idea.`,
+      "info",
+    );
+
+    for (const workPackage of hydrated) {
+      setActiveWorkPackageId(workPackage.id);
+      setCurrentActivity(`Running ${workPackage.shortName} for ${newTitle}.`);
+      addLog(
+        "Package running",
+        `${workPackage.shortName} is running with ${
+          isMockMode ? "mock mode" : llmConfig.model
+        }.`,
+        "info",
+      );
+
+      const response = args.fallbackToMock
+        ? runMockAgent({
+            messages: args.nextMessages,
+            workPackages: boardState,
+            selectedWorkPackageId: workPackage.id,
+            parsedCommand: {
+              referencedPackageName: workPackage.title,
+              mode: "execute",
+              instruction: buildAutomationInstruction(workPackage),
+            },
+          })
+        : await requestChatResponse({
+            nextMessages: args.nextMessages,
+            boardSnapshot: boardState,
+            selectedId: workPackage.id,
+            parsedCommand: {
+              referencedPackageName: workPackage.title,
+              mode: "execute",
+              instruction: buildAutomationInstruction(workPackage),
+            },
+          });
+
+      if (response.boardAction) {
+        boardState = applyBoardAction(boardState, response.boardAction);
+        setWorkPackages(boardState);
+      }
+      logModelTrace(response.trace);
+
+      completedShortNames.push(workPackage.shortName);
+      addLog(
+        "Package completed",
+        `${workPackage.shortName} completed.`,
+        "success",
+      );
+    }
+
+    setActiveWorkPackageId(undefined);
+    setCurrentActivity(`Completed board automation for ${newTitle}.`);
+
+    setMessages((prev) => [
+      ...prev,
+      {
+        id: newId("m"),
+        role: "assistant",
+        content: isMockMode
+          ? `Completed all ${completedShortNames.length} work packages in mock mode.\n\nGenerated outputs: ${completedShortNames.join(", ")}`
+          : `Completed all ${completedShortNames.length} work packages with ${llmConfig.model}.\n\nGenerated outputs: ${completedShortNames.join(", ")}`,
+        createdAt: nowIso(),
+      },
+    ]);
+    addLog(
+      "Board automation finished",
+      `Generated outputs for ${completedShortNames.join(", ")}.`,
+      "success",
+    );
+  }
+
+  async function handleChatSend(rawText: string) {
+    const text = rawText.trim();
+    if (!text) return;
+
+    const userMsg: ChatMessage = {
+      id: newId("m"),
+      role: "user",
+      content: text,
+      createdAt: nowIso(),
+    };
+
+    const nextMessages = [...messages, userMsg];
+
+    setMessages(nextMessages);
+    setDraft("");
+
+    const parsed = parseCommand(text, workPackages);
+    if (parsed.matchedWorkPackageId) {
+      setSelectedWorkPackageId(parsed.matchedWorkPackageId);
+      setDetailOpen(true);
+      addLog(
+        "Package selected",
+        `Focused ${parsed.matchedWorkPackageTitle ?? parsed.parsed.referencedPackageName ?? "package"} from command context.`,
+        "info",
+      );
+    } else {
+      setDetailOpen(false);
+    }
+
+    if (parsed.error) {
+      const suggestionLine =
+        parsed.suggestions && parsed.suggestions.length
+          ? `\n\nDid you mean:\n${parsed.suggestions
+              .map((s) => `- ${s.shortName} (${s.title})`)
+              .join("\n")}`
+          : "";
+
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: newId("m"),
+          role: "assistant",
+          content: `${parsed.error}${suggestionLine}`,
+          createdAt: nowIso(),
+        },
+      ]);
+      addLog("Command parse warning", parsed.error, "warn");
+      return;
+    }
+
+    // Mock-first: call local mock agent if the command is @... OR if the user is just brainstorming.
+    // Once the /api/chat route is present, we’ll prefer it for consistent behavior.
+    setBusy(true);
+    setCurrentActivity(
+      parsed.parsed.mode
+        ? `Running ${parsed.parsed.mode} on ${parsed.parsed.referencedPackageName ?? "selected package"}.`
+        : "Processing product idea and preparing the board.",
+    );
+    addLog(
+      "Agent started",
+      parsed.parsed.mode
+        ? `Running ${parsed.parsed.mode} on ${parsed.parsed.referencedPackageName ?? "board context"}.`
+        : "Processing free-form product planning request.",
+      "info",
+    );
+
+    try {
+      if (!parsed.parsed.mode && !parsed.parsed.referencedPackageName) {
+        await automateBoardFromProductIdea({
+          productIdea: text,
+          nextMessages,
+        });
+        return;
+      }
+
+      // Call server route first (it will fall back to mock mode automatically if no key).
+      if (parsed.parsed.mode === "execute") {
+        setActiveWorkPackageId(
+          parsed.matchedWorkPackageId ?? selectedWorkPackageId,
+        );
+      }
+      const response = await requestChatResponse({
+        nextMessages,
+        boardSnapshot: workPackages,
+        selectedId: parsed.matchedWorkPackageId ?? selectedWorkPackageId,
+        parsedCommand: parsed.parsed,
+      });
+      logModelTrace(response.trace);
+
+      if (response?.boardAction) {
+        setWorkPackages((prev) => applyBoardAction(prev, response?.boardAction));
+        if (response.boardAction.type === "replace_all") {
+          setDetailOpen(false);
+          addLog(
+            "Board refreshed",
+            "Hydrated the work package board from the product idea.",
+            "success",
+          );
+        } else if (response.boardAction.type !== "none") {
+          addLog(
+            "Board updated",
+            `Applied ${response.boardAction.type} to ${parsed.parsed.referencedPackageName ?? "work package"}.`,
+            "success",
+          );
+        }
+      }
+
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: newId("m"),
+          role: "assistant",
+          content: response?.assistantMessage ?? "No response.",
+          createdAt: nowIso(),
+        },
+      ]);
+      addLog(
+        "Agent finished",
+        response?.assistantMessage ?? "No response.",
+        "success",
+      );
+    } catch (err) {
+      if (!parsed.parsed.mode && !parsed.parsed.referencedPackageName) {
+        addLog(
+          "Automation fallback",
+          "Live automation failed, continuing in mock mode.",
+          "warn",
+        );
+        await automateBoardFromProductIdea({
+          productIdea: text,
+          nextMessages,
+          fallbackToMock: true,
+        });
+        return;
+      }
+
+      const fallbackResponse = runMockAgent({
+        messages: nextMessages,
+        workPackages,
+        selectedWorkPackageId: parsed.matchedWorkPackageId ?? selectedWorkPackageId,
+        parsedCommand: parsed.parsed,
+      });
+
+      if (fallbackResponse.boardAction) {
+        setWorkPackages((prev) =>
+          applyBoardAction(prev, fallbackResponse.boardAction),
+        );
+      }
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: newId("m"),
+          role: "assistant",
+          content:
+            fallbackResponse.assistantMessage ||
+            `Network error. (Mock mode)\n\n${String(err)}`,
+          createdAt: nowIso(),
+        },
+      ]);
+      addLog("Agent error", String(err), "error");
+    } finally {
+      setActiveWorkPackageId(undefined);
+      setCurrentActivity("Ready for the next step.");
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="flex h-[100dvh] flex-col bg-muted/40">
+      <div className="bg-background/72 backdrop-blur-sm">
+        <div className="mx-auto w-full max-w-[1760px] px-4 py-3 md:px-5">
+          <div className="flex items-center justify-between gap-2">
+            <div className="min-w-0">
+              <div className="truncate text-sm font-semibold">
+                {projectTitle}
+              </div>
+              <div className="truncate text-xs text-muted-foreground">
+                {busy ? currentActivity : "Chat + automated IoT work packages"}
+              </div>
+            </div>
+            <div className="shrink-0 md:hidden">
+              <Tabs value={view} onValueChange={(v) => setView(v as ViewMode)}>
+                <TabsList>
+                  <TabsTrigger value="chat">Chat</TabsTrigger>
+                  <TabsTrigger value="board">Board</TabsTrigger>
+                </TabsList>
+              </Tabs>
+            </div>
+            <div className="hidden text-xs text-muted-foreground md:block">
+              {isMockMode ? "Mock mode" : `Live · ${llmConfig.model}`}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-hidden px-3 pb-3 md:px-4 md:pb-4">
+        <div className="mx-auto grid h-full w-full max-w-[1760px] grid-cols-1 gap-3 md:grid-cols-[minmax(320px,1fr)_minmax(0,2fr)]">
+          <div
+            className={[
+              "h-full min-h-0 overflow-hidden rounded-[22px] bg-background/82 shadow-sm backdrop-blur-sm",
+              view === "board" ? "hidden md:block" : "block",
+            ].join(" ")}
+          >
+            <ChatPanel
+              messages={messages}
+              draft={draft}
+              setDraft={setDraft}
+              busy={busy}
+              productTitle={projectTitle}
+              currentActivity={currentActivity}
+              llmConfig={llmConfig}
+              setLlmConfig={setLlmConfig}
+              isMockMode={isMockMode}
+              connectionStatus={connectionStatus}
+              connectionMessage={connectionMessage}
+              onSend={handleChatSend}
+            />
+          </div>
+          <div
+            className={[
+              "h-full min-h-0 overflow-hidden rounded-[22px] bg-background/82 shadow-sm backdrop-blur-sm",
+              view === "chat" ? "hidden md:block" : "block",
+            ].join(" ")}
+          >
+            <div className="flex h-full min-h-0 flex-col">
+              <div className="min-h-0 flex-1 p-2">
+                <WorkPackageBoard
+                  workPackages={workPackages}
+                  activeWorkPackageId={activeWorkPackageId}
+                  selectedWorkPackageId={selectedWorkPackageId}
+                  onSelect={(id) => {
+                    setSelectedWorkPackageId(id);
+                    setDetailOpen(true);
+                    const selected = workPackages.find((wp) => wp.id === id);
+                    addLog(
+                      "Detail opened",
+                      `Opened ${selected?.title ?? "work package"} detail view.`,
+                      "info",
+                    );
+                  }}
+                  onPrefill={(s) => {
+                    setView("chat");
+                    setDraft(s);
+                    addLog("Command prepared", `Prefilled chat input with: ${s}`, "info");
+                  }}
+                  detailOpen={detailOpen}
+                  onBackToBoard={() => {
+                    setDetailOpen(false);
+                    addLog("Board view restored", "Returned to work package card board.", "info");
+                  }}
+                />
+              </div>
+              <div className="h-[22dvh] min-h-[150px] px-2 pb-2">
+                <AgentLogPanel logs={agentLogs} busy={busy} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/ChatPanel.test.tsx

@@ -0,0 +1,33 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it, vi } from "vitest";
+import { DEFAULT_LLM_BASE_URL, DEFAULT_LLM_MODEL } from "@/lib/llm-config";
+import { ChatPanel } from "./ChatPanel";
+
+function renderChatPanel() {
+  return renderToStaticMarkup(
+    <ChatPanel
+      messages={[]}
+      draft=""
+      setDraft={vi.fn()}
+      busy={false}
+      productTitle="Agentic PM Demo"
+      currentActivity="Ready"
+      llmConfig={{
+        apiKey: "",
+        baseUrl: DEFAULT_LLM_BASE_URL,
+        model: DEFAULT_LLM_MODEL,
+      }}
+      setLlmConfig={vi.fn()}
+      isMockMode={true}
+      connectionStatus="idle"
+      connectionMessage="Add API key, base URL, and model to enable live automation."
+      onSend={vi.fn()}
+    />,
+  );
+}
+
+describe("ChatPanel", () => {
+  it("keeps model settings folded by default in mock mode", () => {
+    expect(renderChatPanel()).not.toContain("Paste your API key");
+  });
+});

components/ChatPanel.tsx

@@ -0,0 +1,258 @@
+"use client";
+
+import {
+  useEffect,
+  useRef,
+  useState,
+  type Dispatch,
+  type SetStateAction,
+} from "react";
+import type { ChatMessage, ConnectionStatus } from "@/lib/work-package-types";
+import type { LlmConfig } from "@/lib/llm-config";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  AlertCircle,
+  CheckCircle2,
+  LoaderCircle,
+  Send,
+  Settings2,
+  Sparkles,
+  X,
+} from "lucide-react";
+
+function statusTone(status: ConnectionStatus) {
+  if (status === "connected") return "text-emerald-700";
+  if (status === "checking") return "text-amber-700";
+  if (status === "error") return "text-rose-700";
+  return "text-muted-foreground";
+}
+
+function StatusIcon(props: { status: ConnectionStatus }) {
+  const { status } = props;
+  if (status === "connected") return <CheckCircle2 className="h-3.5 w-3.5" />;
+  if (status === "checking") {
+    return <LoaderCircle className="h-3.5 w-3.5 animate-spin" />;
+  }
+  if (status === "error") return <AlertCircle className="h-3.5 w-3.5" />;
+  return <Settings2 className="h-3.5 w-3.5" />;
+}
+
+export function ChatPanel(props: {
+  messages: ChatMessage[];
+  draft: string;
+  setDraft: (v: string) => void;
+  busy: boolean;
+  productTitle: string;
+  currentActivity: string;
+  llmConfig: LlmConfig;
+  setLlmConfig: Dispatch<SetStateAction<LlmConfig>>;
+  isMockMode: boolean;
+  connectionStatus: ConnectionStatus;
+  connectionMessage: string;
+  onSend: (text: string) => void | Promise<void>;
+}) {
+  const {
+    messages,
+    draft,
+    setDraft,
+    busy,
+    productTitle,
+    currentActivity,
+    llmConfig,
+    setLlmConfig,
+    isMockMode,
+    connectionStatus,
+    connectionMessage,
+    onSend,
+  } = props;
+  const bottomRef = useRef<HTMLDivElement | null>(null);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const showSettings = settingsOpen;
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ block: "end" });
+  }, [messages.length]);
+
+  return (
+    <div className="flex h-full min-h-0 flex-col bg-muted/18">
+      <div className="px-4 py-3 md:px-5">
+        <div className="text-sm font-semibold">{productTitle}</div>
+        <div className="text-xs text-muted-foreground">
+          Use <span className="font-mono">@SRS ask</span>,{" "}
+          <span className="font-mono">@Design FMEA execute</span>, or paste a
+          product idea to auto-run the whole board.
+        </div>
+      </div>
+
+      <div className="px-4 pb-2 md:px-5">
+        <div className="rounded-2xl bg-background/82 px-3 py-2 shadow-sm ring-1 ring-black/5">
+          <div className="flex items-center gap-2 text-[11px] font-medium">
+            <Sparkles className="h-3.5 w-3.5 text-primary" />
+            <span>{busy ? currentActivity : "Ready. You can describe a product or target a package directly."}</span>
+          </div>
+          <div className="mt-1 text-[11px] leading-5 text-muted-foreground">
+            Tip: a full product idea will hydrate the board and run every work package in sequence. A package command will only work on that package.
+          </div>
+        </div>
+      </div>
+
+      <ScrollArea className="min-h-0 flex-1">
+        <div className="space-y-3 px-4 py-1 md:px-5">
+          {messages.map((message) => (
+            <div
+              key={message.id}
+              className={[
+                "max-w-[52rem] whitespace-pre-wrap rounded-xl px-3 py-2 text-sm leading-6 shadow-sm ring-1 ring-black/5",
+                message.role === "user"
+                  ? "ml-auto bg-secondary/90"
+                  : "mr-auto bg-background",
+              ].join(" ")}
+            >
+              <div className="mb-1 text-[11px] font-medium text-muted-foreground">
+                {message.role === "user" ? "You" : productTitle}
+              </div>
+              <div>{message.content}</div>
+            </div>
+          ))}
+          <div ref={bottomRef} />
+        </div>
+      </ScrollArea>
+
+      <div className="relative p-4 pt-3 md:p-5 md:pt-3">
+        {showSettings ? (
+          <div className="absolute inset-x-4 bottom-[calc(100%+0.75rem)] z-20 rounded-2xl bg-background px-3 py-3 shadow-lg ring-1 ring-black/10 md:inset-x-5">
+            <div className="flex items-start justify-between gap-3">
+              <div>
+                <div className="text-xs font-semibold">Model Settings</div>
+                <div className="text-[11px] text-muted-foreground">
+                  Stored locally in this browser. Live mode turns on after the connection test succeeds.
+                </div>
+              </div>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7 rounded-xl"
+                onClick={() => setSettingsOpen(false)}
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+
+            <div
+              className={[
+                "mt-3 flex items-center gap-2 rounded-xl bg-muted/28 px-2.5 py-2 text-[11px]",
+                statusTone(connectionStatus),
+              ].join(" ")}
+            >
+              <StatusIcon status={connectionStatus} />
+              <span>{connectionMessage}</span>
+            </div>
+
+            <div className="mt-3 space-y-2.5">
+              <div>
+                <div className="mb-1 text-[11px] font-medium text-muted-foreground">
+                  API Key
+                </div>
+                <Input
+                  type="password"
+                  value={llmConfig.apiKey}
+                  placeholder="Paste your API key"
+                  className="h-9 rounded-xl bg-background/92"
+                  onChange={(e) =>
+                    setLlmConfig((prev) => ({
+                      ...prev,
+                      apiKey: e.target.value,
+                    }))
+                  }
+                />
+              </div>
+
+              <div className="grid gap-2 md:grid-cols-2">
+                <div>
+                  <div className="mb-1 text-[11px] font-medium text-muted-foreground">
+                    Base URL
+                  </div>
+                  <Input
+                    value={llmConfig.baseUrl}
+                    className="h-9 rounded-xl bg-background/92"
+                    onChange={(e) =>
+                      setLlmConfig((prev) => ({
+                        ...prev,
+                        baseUrl: e.target.value,
+                      }))
+                    }
+                  />
+                </div>
+                <div>
+                  <div className="mb-1 text-[11px] font-medium text-muted-foreground">
+                    Model
+                  </div>
+                  <Input
+                    value={llmConfig.model}
+                    className="h-9 rounded-xl bg-background/92"
+                    onChange={(e) =>
+                      setLlmConfig((prev) => ({
+                        ...prev,
+                        model: e.target.value,
+                      }))
+                    }
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : null}
+
+        <form
+          className="flex items-end gap-2.5"
+          onSubmit={(event) => {
+            event.preventDefault();
+            onSend(draft);
+          }}
+        >
+          <Textarea
+            value={draft}
+            onChange={(event) => setDraft(event.target.value)}
+            placeholder="Type a product idea, or @Package ask|plan|change|execute ..."
+            className="min-h-[148px] resize-none rounded-[24px] bg-background/96 px-4 py-3.5 text-sm leading-6 shadow-sm ring-1 ring-black/5"
+            onKeyDown={(event) => {
+              if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault();
+                onSend(draft);
+              }
+            }}
+          />
+          <Button
+            type="submit"
+            disabled={busy || !draft.trim()}
+            size="icon"
+            className="h-12 w-12 rounded-2xl"
+          >
+            <Send className="h-4 w-4" />
+          </Button>
+        </form>
+
+        <div className="mt-2 flex items-center justify-between gap-3">
+          <div className="text-xs text-muted-foreground">
+            Press <span className="font-mono">Ctrl</span>+
+            <span className="font-mono">Enter</span> to send.
+          </div>
+          <Button
+            type="button"
+            variant="ghost"
+            className="h-8 rounded-xl px-2.5 text-[11px]"
+            onClick={() => setSettingsOpen((value) => !value)}
+          >
+            <StatusIcon status={connectionStatus} />
+            <span className="ml-1">
+              {isMockMode ? "Model Settings" : "Live Settings"}
+            </span>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

components/MarkdownContent.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+export function MarkdownContent(props: { content: string }) {
+  return (
+    <div className="markdown-content text-sm text-foreground">
+      <ReactMarkdown remarkPlugins={[remarkGfm]}>
+        {props.content}
+      </ReactMarkdown>
+    </div>
+  );
+}

components/WorkPackageBoard.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import type { WorkPackage, WorkPackagePhase } from "@/lib/work-package-types";
+import { WorkPackageCard } from "@/components/WorkPackageCard";
+import { WorkPackageDetail } from "@/components/WorkPackageDetail";
+import { Badge } from "@/components/ui/badge";
+
+const PHASES: WorkPackagePhase[] = [
+  "Stakeholder Needs",
+  "Specify Product",
+  "Design Product",
+  "Verify and Validate Product",
+];
+
+export function WorkPackageBoard(props: {
+  workPackages: WorkPackage[];
+  activeWorkPackageId?: string;
+  selectedWorkPackageId?: string;
+  onSelect: (id: string) => void;
+  onPrefill: (text: string) => void;
+  detailOpen: boolean;
+  onBackToBoard: () => void;
+}) {
+  const {
+    workPackages,
+    activeWorkPackageId,
+    selectedWorkPackageId,
+    onSelect,
+    onPrefill,
+    detailOpen,
+    onBackToBoard,
+  } = props;
+  const selectedWorkPackage = workPackages.find(
+    (workPackage) => workPackage.id === selectedWorkPackageId,
+  );
+
+  const phaseCount = PHASES.filter((phase) =>
+    workPackages.some((workPackage) => workPackage.phase === phase),
+  ).length;
+
+  return (
+    <div className="flex h-full min-h-0 flex-col rounded-2xl bg-muted/24">
+      <div className="px-3 py-3 md:px-4">
+        <div className="flex items-center justify-between gap-2">
+          <div>
+            <div className="text-sm font-semibold">Work Package Zone</div>
+            <div className="text-xs text-muted-foreground">
+              {detailOpen
+                ? "Selected package detail view"
+                : "Scrollable board of work package cards"}
+            </div>
+          </div>
+          <div className="flex flex-wrap items-center gap-1">
+            <Badge variant="outline" className="text-[11px]">
+              {workPackages.length} packages
+            </Badge>
+            <Badge variant="outline" className="text-[11px]">
+              {phaseCount} phases
+            </Badge>
+            <Badge variant="outline" className="text-[11px]">
+              {detailOpen ? "detail" : "board"}
+            </Badge>
+          </div>
+        </div>
+      </div>
+
+      {detailOpen ? (
+        <WorkPackageDetail
+          workPackage={selectedWorkPackage}
+          activeWorkPackageId={activeWorkPackageId}
+          onPrefill={onPrefill}
+          onBack={onBackToBoard}
+        />
+      ) : (
+        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+          <div className="px-3 pb-10 md:px-4">
+            {PHASES.map((phase) => {
+              const items = workPackages.filter((wp) => wp.phase === phase);
+              if (!items.length) return null;
+
+              return (
+                <div key={phase} className="mb-6">
+                  <div className="mb-2 flex items-center justify-between gap-2">
+                    <div className="text-xs font-semibold text-muted-foreground">
+                      {phase}
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-2 gap-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
+                    {items.map((wp) => (
+                      <WorkPackageCard
+                        key={wp.id}
+                        wp={wp}
+                        activeWorkPackageId={activeWorkPackageId}
+                        selected={wp.id === selectedWorkPackageId}
+                        onSelect={() => onSelect(wp.id)}
+                        onPrefill={onPrefill}
+                      />
+                    ))}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

components/WorkPackageCard.tsx

@@ -0,0 +1,228 @@
+"use client";
+
+import type { WorkPackage } from "@/lib/work-package-types";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  CheckCircle2,
+  Circle,
+  LoaderCircle,
+  MoreHorizontal,
+  Play,
+} from "lucide-react";
+import {
+  getWorkPackageVersion,
+  getWorkPackageVisualState,
+} from "@/lib/work-package-ui";
+
+function statusLabel(status: WorkPackage["status"]) {
+  if (status === "todo") return "To do";
+  if (status === "in_progress") return "In progress";
+  return "Done";
+}
+
+function priorityLabel(priority: WorkPackage["priority"]) {
+  if (priority === "high") return "High";
+  if (priority === "medium") return "Medium";
+  return "Low";
+}
+
+function displayTitle(title: string) {
+  return title
+    .replace("Customer Requirements Specification", "Customer Requirements")
+    .replace("System Requirements Specification", "System Requirements")
+    .replace("Final Engineering Concept", "Engineering Concept")
+    .replace("Final Concept", "Product Concept")
+    .replace("Product Certification", "Certification")
+    .replace("Safety of Products", "Product Safety")
+    .replace("Service Ability Review", "Service Review")
+    .replace("Decompose System", "System Breakdown")
+    .replace("Industrial Design", "Industrial Design")
+    .replace("Patent Check", "Patent Review")
+    .replace("Test Management", "Test Planning");
+}
+
+export function WorkPackageCard(props: {
+  wp: WorkPackage;
+  activeWorkPackageId?: string;
+  selected: boolean;
+  onSelect: () => void;
+  onPrefill: (text: string) => void;
+}) {
+  const { wp, activeWorkPackageId, selected, onSelect, onPrefill } = props;
+
+  const refName = wp.shortName || wp.title;
+  const visualState = getWorkPackageVisualState({
+    workPackage: wp,
+    activeWorkPackageId,
+  });
+  const version = getWorkPackageVersion(wp);
+
+  async function copyReference() {
+    const text = `@${refName} `;
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      // ignore
+    }
+  }
+
+  function prefill(mode: "ask" | "plan" | "change" | "execute") {
+    onPrefill(`@${refName} ${mode} `);
+  }
+
+  return (
+    <Card
+      className={[
+        "min-h-[112px] rounded-2xl border-0 bg-background/96 transition-colors shadow-sm ring-1 ring-black/5 hover:bg-background",
+        selected ? "bg-background ring-2 ring-primary/20" : "",
+        visualState === "running" ? "ring-2 ring-amber-300/80 shadow-[0_0_0_1px_rgba(251,191,36,0.15)]" : "",
+        visualState === "done" ? "ring-1 ring-emerald-300/70" : "",
+      ].join(" ")}
+      onClick={onSelect}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onSelect();
+        }
+      }}
+    >
+      <CardHeader className="space-y-0 p-2.5">
+        <div className="flex items-start justify-between gap-2">
+          <div className="min-w-0 flex-1 pr-1">
+            <CardTitle className="line-clamp-2 text-[12.5px] font-semibold leading-[1.15rem]">
+              {displayTitle(wp.title)}
+            </CardTitle>
+            <div className="mt-1 flex flex-wrap items-center gap-1">
+              <Badge variant="secondary" className="h-4.5 px-1.5 text-[10px]">
+                {wp.shortName}
+              </Badge>
+              <Badge variant="outline" className="h-4.5 px-1.5 text-[10px]">
+                {statusLabel(wp.status)}
+              </Badge>
+              <Badge variant="outline" className="h-4.5 px-1.5 text-[10px]">
+                {priorityLabel(wp.priority)}
+              </Badge>
+              {visualState === "running" ? (
+                <Badge
+                  variant="outline"
+                  className="h-4.5 gap-1 border-amber-300 bg-amber-50 px-1.5 text-[10px] text-amber-700"
+                >
+                  <LoaderCircle className="h-2.5 w-2.5 animate-spin" />
+                  Running
+                </Badge>
+              ) : null}
+              {visualState === "done" && version ? (
+                <Badge
+                  variant="outline"
+                  className="h-4.5 gap-1 border-emerald-300 bg-emerald-50 px-1.5 text-[10px] text-emerald-700"
+                >
+                  <CheckCircle2 className="h-2.5 w-2.5" />
+                  {version}
+                </Badge>
+              ) : null}
+            </div>
+          </div>
+          <div className="flex shrink-0 items-center gap-0.5">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-6 w-6"
+              onClick={(e) => {
+                e.stopPropagation();
+                prefill("execute");
+              }}
+            >
+              <Play className="h-3.5 w-3.5" />
+            </Button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-6 w-6 rounded-lg"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <MoreHorizontal className="h-3.5 w-3.5" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="rounded-xl">
+                <DropdownMenuItem
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    prefill("ask");
+                  }}
+                >
+                  Ask
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    prefill("plan");
+                  }}
+                >
+                  Plan
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    prefill("change");
+                  }}
+                >
+                  Change
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    prefill("execute");
+                  }}
+                >
+                  Execute
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    copyReference();
+                    onPrefill(`@${refName} `);
+                  }}
+                >
+                  Copy reference
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-1.5 p-2.5 pt-0">
+        <div className="line-clamp-2 text-[10.5px] leading-4 text-muted-foreground">
+          {wp.objective}
+        </div>
+
+        <div className="flex flex-wrap items-center gap-1.5 text-[10px] text-muted-foreground">
+          <div className="inline-flex items-center gap-1">
+            <Circle className="h-3 w-3" />
+            {wp.tasks.length} tasks
+          </div>
+          <div>{wp.outputFiles.length} outputs</div>
+          <div>{wp.outputs.length} generated</div>
+        </div>
+
+        {wp.outputs.length ? (
+          <div className="line-clamp-1 text-[10px] text-muted-foreground">
+            Latest output: {wp.outputs[wp.outputs.length - 1]?.title}
+          </div>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}

components/WorkPackageDetail.tsx

@@ -0,0 +1,300 @@
+"use client";
+
+import type { ReactNode } from "react";
+import type { WorkPackage } from "@/lib/work-package-types";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { WorkPackageOutputCard } from "@/components/WorkPackageOutput";
+import { MarkdownContent } from "@/components/MarkdownContent";
+import {
+  ArrowLeft,
+  CheckCircle2,
+  ClipboardCopy,
+  HelpCircle,
+  ListTodo,
+  LoaderCircle,
+  Play,
+  SlidersHorizontal,
+} from "lucide-react";
+import {
+  getWorkPackageVersion,
+  getWorkPackageVisualState,
+} from "@/lib/work-package-ui";
+
+function statusLabel(status: WorkPackage["status"]) {
+  if (status === "todo") return "To do";
+  if (status === "in_progress") return "In progress";
+  return "Done";
+}
+
+function priorityLabel(priority: WorkPackage["priority"]) {
+  if (priority === "high") return "High";
+  if (priority === "medium") return "Medium";
+  return "Low";
+}
+
+function Section(props: {
+  title: string;
+  children: ReactNode;
+}) {
+  return (
+    <section className="rounded-2xl bg-background/72 px-3 py-3 shadow-sm ring-1 ring-black/5">
+      <div className="mb-2 text-[11px] font-semibold uppercase tracking-[0.04em] text-muted-foreground">
+        {props.title}
+      </div>
+      {props.children}
+    </section>
+  );
+}
+
+export function WorkPackageDetail(props: {
+  workPackage?: WorkPackage;
+  activeWorkPackageId?: string;
+  onPrefill: (text: string) => void;
+  onBack: () => void;
+}) {
+  const { workPackage: wp, activeWorkPackageId, onPrefill, onBack } = props;
+
+  if (!wp) {
+    return (
+      <div className="px-3 pb-3 md:px-4">
+        <div className="rounded-2xl bg-background/70 px-4 py-4 text-sm text-muted-foreground shadow-sm ring-1 ring-black/5">
+          Select a work package to inspect its details.
+        </div>
+      </div>
+    );
+  }
+
+  const refName = wp.shortName || wp.title;
+  const latestOutput = wp.outputs.at(-1);
+  const visualState = getWorkPackageVisualState({
+    workPackage: wp,
+    activeWorkPackageId,
+  });
+  const version = getWorkPackageVersion(wp);
+
+  async function copyReference() {
+    try {
+      await navigator.clipboard.writeText(`@${refName} `);
+    } catch {
+      // ignore
+    }
+  }
+
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <div className="px-3 py-2 md:px-4">
+        <div className="rounded-2xl bg-background/72 px-3 py-2.5 shadow-sm ring-1 ring-black/5">
+          <div className="flex items-center justify-between gap-3">
+            <div className="flex min-w-0 items-center gap-2">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 rounded-xl"
+                onClick={onBack}
+              >
+                <ArrowLeft className="h-4 w-4" />
+              </Button>
+              <div className="min-w-0">
+                <div className="truncate text-sm font-semibold">{wp.title}</div>
+                <div className="truncate text-xs text-muted-foreground">
+                  Work package detail view
+                </div>
+              </div>
+            </div>
+            <div className="flex shrink-0 items-center gap-1">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7 rounded-lg"
+                onClick={() => onPrefill(`@${refName} ask `)}
+              >
+                <HelpCircle className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7 rounded-lg"
+                onClick={() => onPrefill(`@${refName} plan `)}
+              >
+                <ListTodo className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7 rounded-lg"
+                onClick={() => onPrefill(`@${refName} change `)}
+              >
+                <SlidersHorizontal className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7 rounded-lg"
+                onClick={() => onPrefill(`@${refName} execute `)}
+              >
+                <Play className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7 rounded-lg"
+                onClick={copyReference}
+              >
+                <ClipboardCopy className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-3 pb-3 md:px-4">
+        <div className="space-y-3">
+          <section className="rounded-2xl bg-background/72 px-4 py-4 shadow-sm ring-1 ring-black/5">
+            <div className="flex flex-wrap items-start justify-between gap-3">
+              <div className="min-w-0">
+                <h2 className="text-base font-semibold">{wp.title}</h2>
+                <div className="mt-1 flex flex-wrap items-center gap-1">
+                  <Badge variant="secondary" className="text-[11px]">
+                    {wp.shortName}
+                  </Badge>
+                  <Badge variant="outline" className="text-[11px]">
+                    {statusLabel(wp.status)}
+                  </Badge>
+                  <Badge variant="outline" className="text-[11px]">
+                    {priorityLabel(wp.priority)}
+                  </Badge>
+                  <Badge variant="outline" className="text-[11px]">
+                    {wp.phase}
+                  </Badge>
+                  {visualState === "running" ? (
+                    <Badge
+                      variant="outline"
+                      className="gap-1 border-amber-300 bg-amber-50 text-[11px] text-amber-700"
+                    >
+                      <LoaderCircle className="h-3 w-3 animate-spin" />
+                      Running
+                    </Badge>
+                  ) : null}
+                  {visualState === "done" && version ? (
+                    <Badge
+                      variant="outline"
+                      className="gap-1 border-emerald-300 bg-emerald-50 text-[11px] text-emerald-700"
+                    >
+                      <CheckCircle2 className="h-3 w-3" />
+                      {version}
+                    </Badge>
+                  ) : null}
+                </div>
+              </div>
+            </div>
+
+            <p className="mt-3 text-sm leading-6 text-muted-foreground">
+              {wp.objective}
+            </p>
+          </section>
+
+          <Section title="Primary output">
+            {latestOutput ? (
+              <div className="space-y-3">
+                <div className="flex flex-wrap items-center gap-2">
+                  <Badge variant="secondary" className="text-[11px]">
+                    {latestOutput.title}
+                  </Badge>
+                  <Badge variant="outline" className="text-[11px]">
+                    {latestOutput.executionMode === "real"
+                      ? "LLM Automation"
+                      : "Simulated Execution"}
+                  </Badge>
+                  <Badge variant="outline" className="text-[11px]">
+                    {latestOutput.type}
+                  </Badge>
+                </div>
+                <div className="rounded-xl bg-muted/20 px-4 py-4">
+                  <MarkdownContent content={latestOutput.content} />
+                </div>
+                <div className="rounded-xl bg-muted/32 p-2.5 text-[11px] leading-5 text-muted-foreground">
+                  {latestOutput.disclaimer}
+                </div>
+              </div>
+            ) : (
+              <div className="text-sm leading-6 text-muted-foreground">
+                No output yet. Run the package to generate its primary artifact.
+              </div>
+            )}
+          </Section>
+
+          {wp.outputs.length > 1 ? (
+            <details className="rounded-2xl bg-background/72 px-3 py-3 shadow-sm ring-1 ring-black/5">
+              <summary className="cursor-pointer text-[11px] font-semibold uppercase tracking-[0.04em] text-muted-foreground">
+                Output history
+              </summary>
+              <div className="mt-3 space-y-2">
+                {wp.outputs
+                  .slice(0, -1)
+                  .reverse()
+                  .map((output) => (
+                    <WorkPackageOutputCard
+                      key={output.id}
+                      output={output}
+                    />
+                  ))}
+              </div>
+            </details>
+          ) : null}
+
+          <details className="rounded-2xl bg-background/72 px-3 py-3 shadow-sm ring-1 ring-black/5">
+            <summary className="cursor-pointer text-[11px] font-semibold uppercase tracking-[0.04em] text-muted-foreground">
+              Package context
+            </summary>
+            <div className="mt-3 grid gap-3 xl:grid-cols-[minmax(0,1.15fr)_minmax(0,0.85fr)]">
+              <div className="space-y-3">
+                <Section title="Expected outputs">
+                  <div className="flex flex-wrap gap-1.5">
+                    {wp.outputFiles.map((output) => (
+                      <Badge key={output} variant="outline" className="text-[11px]">
+                        {output}
+                      </Badge>
+                    ))}
+                  </div>
+                </Section>
+
+                {wp.inputFiles.length ? (
+                  <Section title="Expected inputs">
+                    <div className="text-sm leading-6 text-muted-foreground">
+                      {wp.inputFiles.join(", ")}
+                    </div>
+                  </Section>
+                ) : null}
+
+                {wp.coreSections.length ? (
+                  <Section title="Core sections">
+                    <div className="text-sm leading-6 text-muted-foreground">
+                      {wp.coreSections.join(", ")}
+                    </div>
+                  </Section>
+                ) : null}
+              </div>
+
+              <Section title="Tasks">
+                <div className="space-y-2">
+                  {wp.tasks.map((task) => (
+                    <div
+                      key={task.id}
+                      className="rounded-xl bg-muted/28 px-3 py-2.5 text-sm shadow-sm ring-1 ring-black/5"
+                    >
+                      <div className="font-medium">{task.title}</div>
+                      <div className="mt-1 leading-5 text-muted-foreground">
+                        {task.description}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </Section>
+            </div>
+          </details>
+        </div>
+      </div>
+    </div>
+  );
+}

components/WorkPackageOutput.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useState } from "react";
+import type { WorkPackageOutput } from "@/lib/work-package-types";
+import { SIMULATED_EXECUTION_DISCLAIMER } from "@/lib/work-package-types";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { MarkdownContent } from "@/components/MarkdownContent";
+import { ChevronDown, ChevronUp } from "lucide-react";
+
+export function WorkPackageOutputCard(props: {
+  output: WorkPackageOutput;
+  defaultOpen?: boolean;
+}) {
+  const { output, defaultOpen = false } = props;
+  const [open, setOpen] = useState(defaultOpen);
+
+  const disclaimer =
+    output.disclaimer?.trim() || SIMULATED_EXECUTION_DISCLAIMER;
+
+  return (
+    <Card className="rounded-2xl border-0 bg-background/88 shadow-sm ring-1 ring-black/5">
+      <CardHeader className="flex flex-row items-start justify-between gap-2 space-y-0 p-3">
+        <div className="min-w-0">
+          <CardTitle className="truncate text-xs font-semibold">
+            {output.title}
+          </CardTitle>
+          <div className="mt-1 flex flex-wrap items-center gap-1">
+            <Badge variant="secondary" className="text-[11px]">
+              {output.executionMode === "simulated"
+                ? "Simulated Execution"
+                : "LLM Automation"}
+            </Badge>
+            <Badge variant="outline" className="text-[11px]">
+              {output.type}
+            </Badge>
+          </div>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-7 w-7 shrink-0"
+          onClick={() => setOpen((v) => !v)}
+          aria-label={open ? "Collapse output" : "Expand output"}
+        >
+          {open ? (
+            <ChevronUp className="h-4 w-4" />
+          ) : (
+            <ChevronDown className="h-4 w-4" />
+          )}
+        </Button>
+      </CardHeader>
+      <CardContent className="space-y-2 p-3 pt-0">
+        <div className="rounded-xl bg-muted/32 p-2.5 text-[11px] leading-5 text-muted-foreground">
+          {disclaimer}
+        </div>
+        {open ? (
+          <div className="rounded-xl bg-muted/18 p-3">
+            <MarkdownContent content={output.content} />
+          </div>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}

components/ui/badge.tsx

@@ -0,0 +1,49 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

components/ui/button.tsx

@@ -0,0 +1,67 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

components/ui/card.tsx

@@ -0,0 +1,103 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

components/ui/dropdown-menu.tsx

@@ -0,0 +1,269 @@
+"use client"
+
+import * as React from "react"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        align={align}
+        className={cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn("z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}