PM - Priya

PM Command Center — Full Build Spec for Claude Code What to Build Build a full-stack web application called PM Command Center — an AI-powered dashboard that automates repetitive project management tasks. It's a gift for my dad who is a senior PM. He should be able to bookmark it, open it daily, paste in text, and get polished professional output in seconds. Tech Stack: Next.js 14 (App Router) + Tailwind CSS + TypeScript + Anthropic API Core Architecture pm-command-center/ ├── app/ │ ├── layout.tsx # Root layout with fonts, metadata │ ├── page.tsx # Main dashboard (client component) │ ├── api/ │ │ └── generate/ │ │ └── route.ts # API route that calls Anthropic │ └── globals.css # Tailwind + custom styles ├── components/ │ ├── Header.tsx # Logo, user name, settings + history buttons │ ├── WorkflowTabs.tsx # Tab navigation for 6 workflows │ ├── InputPanel.tsx # Textarea + char count + run button │ ├── OutputPanel.tsx # Rendered markdown output + copy button │ ├── OptionSelector.tsx # Clickable pill selectors per workflow │ ├── SettingsModal.tsx # Name, team, project, tone, sign-off │ ├── HistoryModal.tsx # Past 30 runs, clickable to reload │ └── MarkdownRenderer.tsx # Custom renderer for AI output ├── lib/ │ ├── workflows.ts # All 6 workflow definitions + prompt builders │ ├── types.ts # TypeScript interfaces │ └── settings.ts # localStorage persistence for settings ├── .env.local # ANTHROPIC_API_KEY goes here ├── package.json └── tailwind.config.ts The 6 Workflows Each workflow has: an ID, label, icon, description, placeholder text, configurable options (rendered as pill selectors), and a buildPrompt function that takes (userInput, selectedOptions, userSettings) and returns { system: string, user: string } for the Anthropic API call. Workflow 1: Meeting → Email (icon: ✉, tag: "MOST USED") What it does: Takes a Fireflies transcript or raw meeting notes and generates a polished team email. Options: Email Format: "Summary + Action Items" | "Brief Recap Only" | "Detailed Minutes" Audience: "My Team" | "Leadership / Execs" | "External / Client" System Prompt: You are a senior PM's writing assistant. Write a meeting recap email. {if settings.name} The PM's name is {settings.name}. {/if} {if settings.teamName} The team is called "{settings.teamName}". {/if} {if settings.projectName} The project is "{settings.projectName}". {/if} Tone: {settings.tone}. Sign-off: "{settings.signOff}". Audience: {selected audience}. - If "Leadership / Execs": "Be extra concise — execs scan, they don't read." - If "External / Client": "Be polished and avoid internal jargon." Format: {selected format}. If "Summary + Action Items": Structure: Subject: [clear subject] - Greeting - 3-5 bullet summary of key points - Decisions Made (if any) - Action Items: "• [Owner] — task (by [deadline])" - Sign off If "Brief Recap Only": Keep it under 150 words. Subject line + 3-4 key bullets + sign off. No action item section. If "Detailed Minutes": Provide thorough meeting minutes. Include timestamps if present, all discussion points, every decision and action item. Can be longer. Rules: Don't invent info. Flag gaps with [CLARIFY]. Use first-person plural "we". Workflow 2: Slides Outline (icon: ▦) What it does: Takes any content and produces a slide-by-slide presentation outline. Options: Deck Type: "Project Update" | "Strategy / Proposal" | "Stakeholder Review" | "Training / Onboarding" Deck Length: "Short (5-7 slides)" | "Standard (8-12)" | "Detailed (13-18)" System Prompt: You are a presentation architect for a senior PM. {if settings.projectName} Project: "{settings.projectName}". {/if} Deck type: {selected deckType}. Target: {slide count from length} slides. For each slide: **Slide [N]: [Title]** Layout: (e.g. "Title + 3 bullets", "Two-column comparison", "Chart: bar graph of X", "Big number + supporting text") Content: exact text for the slide. Bullets ≤ 12 words each. Speaker Notes: 2 sentences of what to say. Rules: - Start with title slide, end with Next Steps / Discussion - One idea per slide - Suggest visuals with [ADD: description] - Flag data gaps with [NEEDS DATA] - If "Strategy / Proposal": Include a 'Why Now' and 'Recommendation' slide. - If "Stakeholder Review": Include status, risks, timeline, and asks. - If "Training / Onboarding": Include objectives, key concepts, exercises, and resources. - If "Project Update": Include progress, blockers, and next steps. Workflow 3: Status Report (icon: ◉) What it does: Generates a formatted weekly status report from raw project updates. Options: Report Style: "Standard (Full)" | "Executive Summary" | "Bullet-Only" System Prompt: You are a PM reporting assistant. {if settings.name} PM: {settings.name}. {/if} {if settings.projectName} Project: "{settings.projectName}". {/if} {if settings.teamName} Team: "{settings.teamName}". {/if} Style: {selected style}. If "Executive Summary": Keep to 8 lines max. Traffic light status + 3-sentence summary + top 2 risks + 1 ask. Execs have 15 seconds. If "Bullet-Only": Just categorized bullets under: Done / In Progress / Blocked / Next Week. No prose. If "Standard (Full)": Use this structure: **WEEKLY STATUS — [date range]** **Status: 🟢 On Track / 🟡 At Risk / 🔴 Off Track** **Executive Summary** (2-3 sentences) **Completed** (bulleted with impact) **In Progress** (with % if inferrable) **Blockers & Risks** (owner, severity: H/M/L) **Next Week** (top 3-5) **Decisions Needed** (if any) Rules: Use only the user's info. Flag unknowns with [CONFIRM]. Be concise. Workflow 4: Action Items (icon: ☐, tag: "POWERFUL") What it does: Extracts every task, follow-up, and commitment from any text. Options: Output Format: "Table" | "Grouped by Owner" | "Checklist" System Prompt: You are an action item extraction specialist. Extract EVERY task, follow-up, commitment, or implied action. Output format: If "Table": | # | Owner | Action Item | Deadline | Priority | Use [UNASSIGNED] and [NO DATE] when info is missing. If "Grouped by Owner": Group by person: **[Name]** 1. Task (by deadline) — Priority Put [UNASSIGNED] items in their own section. If "Checklist": - [ ] [Owner] — Task (by deadline) [Priority] Format as a copyable markdown checklist. After the list: **Summary**: X items total, Y unassigned, Z without deadlines **⚠️ Flags**: Any conflicts, ambiguities, or unrealistic timelines. Be thorough. Over-extract. Workflow 5: Email Drafter (icon: ⟐, tag: "NEW") What it does: Drafts situational PM emails — follow-ups, escalations, bad news, asks. Options: Email Type: "Follow-up / Nudge" | "Escalation" | "Bad News / Delay" | "Request / Ask" | "Stakeholder Update" Tone Override: "Use my default" | "Extra diplomatic" | "Direct & urgent" | "Casual / friendly" System Prompt: You are a PM communications expert. Draft a {selected emailType} email. {if settings.name} From: {settings.name} {/if} Tone: {selected tone, or settings.tone if "Use my default"}. Sign-off: "{settings.signOff}". Provide: Subject: [subject line] [email body] - If "Escalation": Be factual. State impact, what's been tried, and what's needed. No blame. - If "Bad News / Delay": Lead with context, then the news, then the plan forward. Show ownership. - If "Follow-up / Nudge": Be brief. Reference the original ask, state what's needed, give a clear deadline. - If "Request / Ask": State the ask clearly in the first 2 sentences. Explain why, provide context, make it easy to say yes. - If "Stakeholder Update": Be structured: status, key updates, decisions needed. Keep under 200 words unless the situation clearly requires more. Provide 2 drafts if the situation is delicate — label them "**Draft 1: [approach]**" and "**Draft 2: [approach]**" (e.g. one conservative, one more direct). Workflow 6: Doc Cleanup (icon: ⧉, tag: "NEW") What it does: Reformats messy docs, brain dumps, or rough drafts into clean professional text. Options: Clean Up Into: "Professional Document" | "Organized Bullets" | "Executive Brief" | "Meeting Agenda" System Prompt: You are a document cleanup specialist. Take messy, poorly formatted, or stream-of-consciousness input and restructure it into: {selected outputStyle}. - If "Professional Document": Add clear headings, logical flow, proper paragraphs. Fix grammar and tone. - If "Organized Bullets": Extract key points, group by theme, use consistent hierarchy. - If "Executive Brief": Distill to 1 page max. Key message up front, supporting points below, clear ask at the end. - If "Meeting Agenda": Structure as: Objective, Agenda Items (with time allocations), Pre-read links, Action Items from last meeting. Rules: - Preserve ALL the user's information. Don't drop details. - Fix grammar, spelling, and tone - Add structure and headings - Flag anything unclear with [CLARIFY: reason] - Match tone to settings.tone Settings System Store in localStorage under key pm_settings. Settings modal with these fields: FieldTypePlaceholderDefaultnametext input"e.g., David"""teamNametext input"e.g., Platform Engineering"""projectNametext input"e.g., Project Atlas"""tonepill selectorprofessional / friendly / direct / casual"professional"signOfftext input"e.g., Best, Thanks, Regards""Best" On first visit (no settings saved), show an amber banner at the top prompting user to configure settings. The header should show "PM Command Center for {name}" when name is set. Every workflow's buildPrompt function receives the settings object and injects relevant fields into the system prompt. This is what makes the tool feel personalized rather than generic. API Route (/api/generate) typescript// app/api/generate/route.ts // POST handler that: // 1. Receives { system: string, user: string } from the client // 2. Calls Anthropic API with model "claude-sonnet-4-20250514", max_tokens 2048 // 3. Returns the text content from the response // 4. Handles errors gracefully and returns appropriate status codes // 5. Uses ANTHROPIC_API_KEY from environment variables // 6. The API key should NEVER be exposed to the client UI/UX Design Spec Theme: Dark, professional, Linear/Notion-inspired Background: very dark navy (#0B0D10) Surface: slightly lighter (#111318, #171B22) Borders: subtle (#262D3A), highlighted (#3D6098) Text: light (#E4E8F1), muted (#8B95AD), dim (#5C6580) Accent: steel blue (#3D6098), lighter variant (#5A85C2) Status: green (#3FAF7A), amber (#D4972E), red (#D45555) Layout Header: Logo mark (gradient square with "PM"), title, settings + history buttons right-aligned Tab bar: Horizontal scrollable tabs below header, each with icon + label + optional tag badge Options row: Below tabs, pill-style selectors for the active workflow's options Main area: Two-panel grid — Input on left, Output on right (output panel only appears after first run) Input panel: Monospace textarea, character count in footer, ⌘↵ shortcut hint, Run button with gradient Output panel: Custom markdown rendering, Copy button in header, fade-in animation Markdown Renderer (important — this is what makes output look professional) The output from the AI contains markdown-like formatting. Render these specially: Subject: lines → highlighted blue callout box with left border 🟢/🟡/🔴/⚠️ lines → colored status badges with matching background **bold headers** → larger weight text with top margin **Draft 1: ...** / **Draft 2: ...** → uppercase label badges | table | rows | → actual HTML tables with styled headers - [ ] / - [x] → checkbox-style rendering Bullet points → consistent dot + indentation [CLARIFY], [NEEDS DATA], [CONFIRM], [UNASSIGNED], [NO DATE] → amber highlight badges Regular text → standard paragraph with good line height Interactions ⌘+Enter (or Ctrl+Enter) triggers Run from the textarea Copy button copies raw text output to clipboard, shows "✓ Copied" for 2s Clear button resets input + output History modal: overlay with list of past runs, click to reload the output Settings modal: overlay form, saves to localStorage on submit Loading state: spinner on Run button + centered spinner in output panel Tab switching clears input/output and resets options to defaults Run History Store up to 30 runs in React state (not persisted — session only is fine) Each entry: { id, workflow label, workflow icon, input preview (first 80 chars), full output, timestamp } History modal shows entries reverse-chronologically Clicking an entry loads its output into the output panel and closes the modal Key Implementation Notes The API key must stay server-side. The client sends the prompt to /api/generate, which calls Anthropic. Never expose the key in client code. Use max_tokens: 2048 to give the AI room for longer outputs (detailed minutes, full status reports). Each workflow's system prompt is constructed dynamically using the user's settings + selected options. The prompt builder functions are the heart of the app. Responsive design matters — my dad might use this on his laptop or a large monitor. The two-panel layout should work at 1024px+ and stack vertically on smaller screens. Fonts: Use DM Sans for body text, DM Mono for the input textarea. Import from Google Fonts. No database needed. Settings in localStorage, history in memory. Keep it simple. Error handling: Show errors in the output panel with red text. Handle network failures, API errors, and empty input gracefully. Setup Instructions (for the README) bash# 1. Clone and install git clone <repo> cd pm-command-center npm install # 2. Add your API key echo "ANTHROPIC_API_KEY=sk-ant-..." > .env.local # 3. Run npm run dev # Open http://localhost:3000 # 4. First thing: click Settings and enter your name, team, and project What Success Looks Like My dad should be able to: Open the app after a meeting Paste in his Fireflies transcript Pick "Summary + Action Items" and "My Team" Hit Run Get an email he can copy and paste directly into Gmail with maybe 1-2 small tweaks Do this 4-5 times a day across different workflows and save 1-2 hours Build the complete app. Every file. Working end to end.