firefrost-operations-manual/docs/tasks/interactive-tools-suite/MASTER-SPECIFICATION.md

# Interactive Tools Suite — Master Specification
**Comprehensive Documentation for Tasks #70-81**

**Created:** March 22, 2026  
**Author:** Chronicler #39  
**Based On:** The Translator's research + workflow analysis  
**Purpose:** Document all 12 interactive tools before implementation

---

## EXECUTIVE SUMMARY

### What This Document Contains

Complete specifications for 12 interactive tools that leverage Claude's React artifact/application-building capabilities to improve team workflows. These tools solve real pain points identified through analysis of Michael's, Meg's, Holly's, and Chroniclers' daily work.

**From The Translator's Analysis:**
- Tool #1: Ghost Page Builder
- Tool #2: Paymenter Tier Configuration Preview
- Tool #3: Infrastructure Health Dashboard
- Tool #4: Task Dependency Visualizer with Gitea Integration

**From Chronicler #39's Analysis:**
- Tool #5: SSH Key Auto-Setup Script
- Tool #6: Gemini Consultation Helper
- Tool #7: Social Media Content Calendar
- Tool #8: Community Response Template Library
- Tool #9: Fire/Frost Design System Widget
- Tool #10: Infrastructure Quick Reference Card
- Tool #11: Task Scaffolding Tool
- Tool #12: Memorial Writing Assistant

### Philosophy

> "We're using Claude well for documentation, but missing interactive tool-building opportunities."  
> — The Translator

These aren't throwaway demos. They're **permanent bookmarkable utilities** that:
- Solve real workflow problems
- Multiply future efficiency
- Encode organizational knowledge
- Serve current and future team members

This is pure **Foundation Before Expansion** philosophy.

---

## PRIORITIZATION FRAMEWORK

### Criteria

Each tool ranked by:

1. **Soft Launch Impact** (0-10): Does it unblock soft launch?
2. **Team Impact** (0-10): How many people benefit?
3. **Time ROI** (0-10): Build time vs. time saved ratio
4. **Foundation Value** (0-10): Enables future work?
5. **Dependency Chain** (0-10): Blocks or unblocks other work?

**Total Score:** 0-50 points

### Priority Tiers

- **CRITICAL (40-50 points):** Build immediately, soft launch blocker
- **HIGH (30-39 points):** Build this sprint, high team value
- **MEDIUM (20-29 points):** Build when time allows, good ROI
- **LOW (10-19 points):** Build if we love the others, nice-to-have

---

## TOOL SPECIFICATIONS

---

## TOOL #1: GHOST PAGE BUILDER

**Task Number:** #70  
**Priority Tier:** CRITICAL (Score: 45/50)  
**Time Estimate:** 45-60 minutes  
**Status:** READY (no blockers)

### Scoring Breakdown
- Soft Launch Impact: 10/10 (directly unblocks Task #69 - 6 website pages)
- Team Impact: 8/10 (Michael builds pages, Meg/Holly use later)
- Time ROI: 10/10 (60 min build, saves hours on every future page)
- Foundation Value: 10/10 (permanent utility for all Ghost work)
- Dependency Chain: 7/10 (unblocks Task #69)

### Problem Statement

**Current workflow for creating Ghost pages:**
1. Write HTML in text editor
2. Paste into Ghost Admin
3. Click "Preview"
4. Notice styling issues
5. Edit HTML in text editor
6. Repeat steps 2-5 multiple times

**Pain point:** No live preview of how HTML will render with Fire/Frost CSS in Ghost context. Trial-and-error cycle wastes time and creates frustration.

### Solution Description

Interactive React tool with:
- **Live HTML editor** (left pane) with syntax highlighting
- **Live preview** (right pane) showing exactly how it renders in Ghost
- **Fire/Frost CSS applied** automatically (from site-wide head)
- **Mobile/Desktop toggle** to test responsive behavior
- **Dark navbar context** showing how page looks under actual Ghost navigation
- **Copy button** for final HTML (ready to paste into Ghost Admin)

### Technical Specifications

**Tech Stack:**
- React artifact (single `.jsx` file)
- Code editor: `<textarea>` with monospace font (or CodeMirror for syntax highlighting)
- Split-pane layout: 50/50 editor/preview
- CSS: Inject Fire/Frost styles into preview iframe
- Viewport controls: Button toggles between desktop (1200px) and mobile (375px)

**Data Requirements:**
1. **Fire/Frost CSS** from `docs/planning/ideas/features/ghost-frost-css.css`
2. **Current site-wide head CSS** from Ghost (Settings → Design & branding → Site-wide head)
3. **Navbar HTML** (optional, for context preview)

**Component Structure:**
```javascript
<GhostPageBuilder>
  <EditorPane>
    <Toolbar>
      [Sample Templates ▼] [Viewport: Desktop ▼] [Copy HTML] [Reset]
    </Toolbar>
    <CodeEditor value={html} onChange={setHtml} />
  </EditorPane>
  
  <PreviewPane viewport={viewport}>
    <PreviewNavbar /> {/* Dark navbar context */}
    <PreviewIframe html={html} css={firefrostCSS} />
  </PreviewPane>
</GhostPageBuilder>
```

**Key Features:**
- Auto-updates preview as you type (debounced 500ms)
- Viewport toggle buttons: Desktop (1200px) | Tablet (768px) | Mobile (375px)
- "Copy HTML" button with visual confirmation ("✓ Copied!")
- "Reset" button to clear editor
- Sample templates dropdown: Blank | Simple Page | Two Column | Card Grid
- localStorage persistence (save draft HTML between sessions)
- Fire/Frost color palette reference in sidebar

**User Flow:**
1. Open artifact in browser (bookmark this URL)
2. Paste or write HTML in left pane
3. See live Fire/Frost-styled preview in right pane
4. Toggle viewport to test mobile
5. Click "Copy HTML" when satisfied
6. Paste into Ghost Admin → Publish

### Success Criteria

- [ ] Tool loads in <3 seconds
- [ ] Preview updates within 500ms of typing
- [ ] Fire/Frost CSS renders correctly in preview
- [ ] Viewport toggle works smoothly
- [ ] Copy button successfully copies HTML to clipboard
- [ ] localStorage preserves draft between sessions
- [ ] Michael successfully builds at least 2 Ghost pages using this tool

### Related Tasks

- **Unblocks:** Task #69 (Ghost Website Core Pages)
- **Uses:** Fire/Frost CSS from Task #68 (Ghost Theme Migration)
- **Complements:** Task #52 (Ghost Homepage Content)

### Implementation Notes

- Load Fire/Frost CSS from committed file, not from Ghost directly (version control)
- Use iframe for preview to prevent CSS conflicts
- Include Fire/Frost color swatches as quick reference
- Consider adding "Export as .html file" option (bonus feature)

---

## TOOL #2: PAYMENTER TIER CONFIGURATION PREVIEW

**Task Number:** #71  
**Priority Tier:** HIGH (Score: 32/50)  
**Time Estimate:** 30-45 minutes  
**Status:** BLOCKED (need feature matrix defined first)

### Scoring Breakdown
- Soft Launch Impact: 7/10 (billing config needed for soft launch)
- Team Impact: 7/10 (Michael configs, Meg/Holly understand tiers)
- Time ROI: 7/10 (45 min build, saves hours of tier tweaking)
- Foundation Value: 6/10 (reusable when tiers change)
- Dependency Chain: 5/10 (doesn't block other work, but billing setup blocks soft launch)

### Problem Statement

**Current situation:**
- 6 subscriber tiers defined (Awakened $1 → Founder $50)
- No clear feature differentiation documented
- Can't preview pricing table before configuring in Paymenter
- Risk of misaligned features or unclear value propositions

**Pain point:** No way to visualize tier structure before committing to Paymenter configuration. Hard to answer "what makes Knight tier worth $10 vs. Elemental at $5?"

### Solution Description

Interactive tier builder with:
- **6 tier cards** (names + prices editable)
- **Feature checklist** per tier (checkboxes for what's included)
- **Live pricing table preview** (Fire/Frost branded cards)
- **Comparison view** (side-by-side features across tiers)
- **Export options** (JSON for Paymenter, HTML for website, Markdown for docs)
- **Mobile preview** (stacked tier cards)

### Technical Specifications

**Tech Stack:**
- React artifact (single `.jsx` file)
- Form inputs for tier configuration
- Live preview pricing cards (Fire/Frost gradient styling)
- Export buttons with copy-to-clipboard

**Data Model:**
```javascript
{
  tiers: [
    {
      name: "Awakened",
      price: 1,
      popular: false,
      features: {
        serverSlots: 1,
        ramPerServer: "2GB",
        storage: "10GB",
        backups: false,
        plugins: "basic",
        support: "community",
        priority: false,
        customDomain: false,
        votingWeight: "1x"
      }
    },
    // ... 5 more tiers
  ]
}
```

**Feature Categories:**

1. **Server Resources**
   - Number of server slots
   - RAM per server
   - Storage per server
   - CPU cores/priority

2. **Features & Access**
   - Plugin access level
   - Mod pack access
   - Backup frequency
   - Snapshot rollback window

3. **Support & Perks**
   - Support level
   - Setup assistance
   - Custom domain support
   - Early access to features
   - Vote weight in community decisions

4. **Branding & Customization**
   - Server MOTD customization
   - Custom join messages
   - Logo on server list
   - Dedicated IP

**Component Structure:**
```javascript
<PaymenterTierConfig>
  <TierEditor tiers={tiers} onChange={setTiers} />
  
  <ViewToggle>
    [Cards] [Comparison Table] [Mobile Preview]
  </ViewToggle>
  
  <LivePreview mode={viewMode}>
    {mode === 'cards' && <TierCards tiers={tiers} />}
    {mode === 'table' && <ComparisonTable tiers={tiers} />}
    {mode === 'mobile' && <MobileTierCards tiers={tiers} />}
  </LivePreview>
  
  <ExportPanel>
    [Export JSON] [Export HTML] [Export Markdown] [Export CSV]
  </ExportPanel>
</PaymenterTierConfig>
```

**Key Features:**
- Drag-and-drop tier reordering
- "Popular" badge toggle for recommended tier
- Feature comparison matrix (all 6 tiers side-by-side)
- Price calculator (annual discount: 10% off if paid yearly)
- Export formats:
  - JSON (Paymenter import)
  - HTML (pricing page embed)
  - Markdown (documentation)
  - CSV (spreadsheet comparison)
- Fire/Frost gradient for "Popular" tier highlight
- Mobile: Stack cards vertically with swipe navigation
- Validation: Ensure higher tiers include all lower tier features

**User Flow:**
1. Open artifact
2. Pre-filled with 6 tier names + prices
3. Check/uncheck features per tier
4. See live preview of pricing cards
5. Toggle view: Cards | Comparison Table | Mobile Preview
6. Click export format
7. Copy output and use in Paymenter or website

### Success Criteria

- [ ] All 6 tiers configurable
- [ ] Feature matrix complete (all categories defined)
- [ ] Live preview renders correctly with Fire/Frost styling
- [ ] All 4 export formats work
- [ ] JSON export imports cleanly into Paymenter
- [ ] Michael/Meg approve tier differentiation

### Blocker Resolution

**BLOCKER:** Feature matrix not yet defined

**To unblock:**
1. Michael/Meg/Holly 15-minute meeting
2. Define features per tier (what justifies each price point?)
3. Document in this spec
4. Then build tool

**Questions to answer:**
- What does Awakened ($1) get vs. Elemental ($5)?
- Why is Knight ($10) worth 2x Elemental?
- What makes Founder ($50) special?

### Related Tasks

- **Unblocks:** Paymenter configuration (not yet a task)
- **Complements:** Task #52 (Homepage - pricing section)

### Implementation Notes

- Save configuration to localStorage (persist between sessions)
- Include "Load Default" button (reset to Michael's initial tier definition)
- Consider adding "Annual Discount Calculator" (10% off yearly subscriptions)
- Fire/Frost gradient should highlight "recommended" tier

---

## TOOL #3: INFRASTRUCTURE HEALTH DASHBOARD

**Task Number:** #72  
**Priority Tier:** MEDIUM (Score: 28/50)  
**Time Estimate:** 60-90 minutes  
**Status:** BLOCKED (need dependency mapping)

### Scoring Breakdown
- Soft Launch Impact: 3/10 (nice to have, not blocking)
- Team Impact: 7/10 (Michael uses daily, team reference tool)
- Time ROI: 6/10 (90 min build, saves 5-10 min/day on lookups)
- Foundation Value: 7/10 (encodes infrastructure knowledge)
- Dependency Chain: 5/10 (doesn't block/unblock work)

### Problem Statement

**Current situation:**
- 6 servers, ~20 services, complex dependencies
- Information scattered across:
  - `docs/core/infrastructure-manifest.md` (static text)
  - Session handoffs (point-in-time snapshots)
  - Michael's mental model (not documented)

**Pain point:** "If TX1 goes down, what breaks?" requires reading multiple docs and inferring relationships. No single-view infrastructure map.

### Solution Description

Interactive dashboard with:
- **Visual server map** (6 cards representing each server)
- **Service inventory** per server (expandable lists)
- **Dependency visualization** (arrows showing X depends on Y)
- **Quick reference** (IPs, ports, login users, Cockpit links)
- **Impact analysis** ("If I restart Mailcow, Paymenter email breaks")
- **Search/filter** by service name, server, or dependency

### Technical Specifications

**Tech Stack:**
- React artifact (single `.jsx` file)
- Server cards with expand/collapse
- SVG or HTML arrows for dependencies
- Filter/search bar
- Responsive grid layout

**Data Model:**
```javascript
{
  servers: [
    {
      id: "ghost-vps",
      name: "Ghost VPS",
      ip: "64.50.188.14",
      location: "Chicago",
      cockpit: "https://64.50.188.14:9090",
      login: "architect",
      purpose: "Public-facing CMS and wikis",
      role: "public", // or "command", "billing", "game"
      services: [
        {
          name: "Ghost CMS",
          url: "https://firefrostgaming.com",
          port: 2368,
          critical: true,
          dependsOn: [] // No external dependencies
        },
        {
          name: "Wiki.js (Pokerole)",
          url: "https://pokerole.firefrostgaming.com",
          port: 3100,
          critical: false,
          dependsOn: []
        }
      ]
    },
    {
      id: "billing-vps",
      name: "Billing VPS",
      ip: "38.68.14.188",
      location: "Dallas",
      cockpit: "https://38.68.14.188:9090",
      login: "root",
      purpose: "Billing and email infrastructure",
      role: "billing",
      services: [
        {
          name: "Paymenter",
          port: 80,
          critical: true,
          dependsOn: [
            {
              server: "billing-vps",
              service: "Mailcow",
              reason: "SMTP for billing emails"
            }
          ]
        },
        {
          name: "Mailcow",
          ports: [25, 587, 993, 8080, 8443],
          critical: true,
          dependsOn: []
        }
      ]
    }
    // ... 4 more servers
  ]
}
```

**Component Structure:**
```javascript
<InfrastructureDashboard>
  <SearchBar onSearch={setFilter} />
  
  <ViewToggle>
    [Grid View] [List View] [Dependency Graph]
  </ViewToggle>
  
  <ServerGrid>
    <ServerCard server={server} onClick={toggleExpand}>
      <ServerHeader>
        <Name>{server.name}</Name>
        <IP>{server.ip}</IP>
        <CockpitLink href={server.cockpit} />
      </ServerHeader>
      
      {expanded && (
        <ServiceList>
          {server.services.map(service => (
            <ServiceItem
              service={service}
              onClick={() => showImpactAnalysis(service)}
            />
          ))}
        </ServiceList>
      )}
    </ServerCard>
  </ServerGrid>
  
  <ImpactPanel service={selected}>
    <h3>Impact Analysis: {selected.name}</h3>
    <p>If this service fails:</p>
    <DependentList />
  </ImpactPanel>
</InfrastructureDashboard>
```

**Key Features:**

1. **Server Cards:**
   - Colored by role (Command: blue, Public: green, Billing: orange, Game: purple)
   - Click to expand service list
   - Cockpit quick-link button
   - IP + login user displayed
   - Status indicator (future: red/yellow/green from API)

2. **Dependency View:**
   - Toggle "Show Dependencies" button
   - Arrows from dependent service → dependency
   - Hover arrow shows reason ("SMTP for billing emails")
   - Color-coded: Critical (red), Important (orange), Optional (gray)

3. **Impact Analysis:**
   - Click a service → highlights everything that depends on it
   - "What breaks if this goes down?" panel
   - Suggested recovery order

4. **Search/Filter:**
   - Search by service name ("Mailcow")
   - Filter by server
   - Filter by critical/non-critical

**User Flow:**
1. Open artifact
2. See 6 server cards in grid
3. Click "Ghost VPS" → expands to show 4 services
4. Click "Show Dependencies" → arrows appear
5. Click "Mailcow" → highlights Paymenter (dependent)
6. See "If Mailcow fails: Paymenter email breaks, Plane notifications fail"

### Success Criteria

- [ ] All 6 servers displayed with correct info
- [ ] All ~20 services listed
- [ ] Dependencies mapped accurately
- [ ] Impact analysis works correctly
- [ ] Search/filter functional
- [ ] Michael uses this at least weekly

### Blocker Resolution

**BLOCKER:** Service dependencies not fully mapped

**To unblock:**
1. Parse `infrastructure-manifest.md` for base data (15 min)
2. Map dependencies manually (15-20 min):
   - Paymenter → Mailcow (SMTP)
   - Plane → Mailcow (SMTP)
   - Wings nodes → Panel (control)
   - Ghost → (no dependencies)
   - etc.
3. Document in JSON format
4. Then build tool

### Related Tasks

- **Uses:** Infrastructure manifest data
- **Complements:** Server health monitoring (future)

### Implementation Notes

- Parse `infrastructure-manifest.md` for initial data
- Dependency mapping requires manual work (not fully documented)
- Use localStorage to save collapsed/expanded states
- Future enhancement: Health status API integration (Cockpit API)

---

## TOOL #4: TASK DEPENDENCY VISUALIZER WITH GITEA INTEGRATION

**Task Number:** #73  
**Priority Tier:** MEDIUM (Score: 27/50)  
**Time Estimate:** 90-120 minutes (core) + 30-45 min (polish)  
**Status:** BLOCKED (dependency mapping needed)

### Scoring Breakdown
- Soft Launch Impact: 5/10 (strategic planning, not blocking)
- Team Impact: 6/10 (Michael uses for planning, team sees in meetings)
- Time ROI: 5/10 (120 min build, saves 20-30 min/week in planning)
- Foundation Value: 7/10 (strategic decision support)
- Dependency Chain: 4/10 (doesn't block/unblock work)

### Problem Statement

**Current situation:**
- 69 tasks in `tasks.md` as linear list
- Hard to see which tasks block others
- Hard to identify critical path to soft launch
- Gitea project boards exist but lack dependency visualization

**Pain point:** "Why can't we do X yet?" and "What's the critical path to soft launch?" require reading entire tasks.md and mentally mapping dependencies.

### Solution Description

Interactive dependency graph that **COMPLEMENTS Gitea boards** (doesn't replace them):

**Hybrid Architecture:**
- tasks.md owns: Task definitions, dependencies, time estimates
- Gitea owns: Current status, assignments, team coordination
- Tool #4B owns: Visualization, critical path analysis

**Team uses Gitea for daily work. Michael uses Tool #4B for strategic planning. Both stay in sync via Gitea API.**

### Technical Specifications

**Tech Stack:**
- React artifact (single `.jsx` file)
- React Flow or D3.js for graph visualization
- Gitea API integration (fetch issues, read status/assignees)
- Task parser (reads tasks.md for dependencies)

**Data Flow:**
```
tasks.md (definitions, dependencies)
    ↓
Gitea API (status, assignees)
    ↓
Tool #4B (merge data, visualize)
```

**Component Structure:**
```javascript
<TaskDependencyVisualizer>
  <Sidebar>
    <MetricsPanel>
      Total: {metrics.total}
      Complete: {metrics.complete}
      Soft Launch: {metrics.softLaunchProgress}
    </MetricsPanel>
    
    <FilterPanel>
      [ ] Show Soft Launch Critical Only
      Status: [✓] Complete [✓] Ready [ ] Blocked
      Area: [✓] Website [ ] Infrastructure
    </FilterPanel>
    
    <RefreshButton onClick={loadData}>
      🔄 Refresh (auto every 30s)
    </RefreshButton>
  </Sidebar>
  
  <ReactFlow
    nodes={nodes}
    edges={edges}
    onNodeClick={showDetails}
  >
    <Background />
    <Controls />
  </ReactFlow>
  
  <DetailPanel task={selected}>
    <TaskHeader>#{task.id}: {task.title}</TaskHeader>
    <Status>{task.status}</Status>
    <Assignee>{task.assignee}</Assignee>
    <TimeEstimate>{task.timeEstimate}</TimeEstimate>
    <GiteaLink href={task.giteaUrl}>View in Gitea →</GiteaLink>
  </DetailPanel>
</TaskDependencyVisualizer>
```

**Key Features:**

1. **Visual Graph:**
   - Each task = node (colored by status)
   - Arrows show dependencies
   - Size indicates priority
   - Layout: Top-to-bottom (earlier → later tasks)

2. **Interactivity:**
   - Click task → detail panel
   - Hover task → highlights dependencies
   - Drag to pan/zoom
   - Double-click → open task README

3. **Critical Path Mode:**
   - Toggle "Show Soft Launch Path Only"
   - Dims non-critical tasks
   - Highlights path from current → soft launch complete
   - Shows estimated remaining time

4. **Live Status from Gitea:**
   - Auto-refresh every 30 seconds
   - Fetches issue status/assignees from Gitea API
   - Merges with tasks.md dependencies
   - No manual sync needed

**Gitea API Integration:**
```javascript
async function fetchGiteaIssues() {
  const response = await fetch(
    'https://git.firefrostgaming.com/api/v1/repos/firefrost-gaming/firefrost-operations-manual/issues?state=all&limit=100',
    {
      headers: {
        'Authorization': 'token e0e330cba1749b01ab505093a160e4423ebbbe36'
      }
    }
  );
  
  const issues = await response.json();
  return issues;
}

function mapIssuesToTasks(issues, tasksFromMd) {
  // Extract task number from issue title: "Task #70: ..." → 70
  // Match issue to task, merge status/assignee data
  // Return enriched task list
}
```

**User Flow:**
1. Open tool
2. See full task graph (initially shows all 69 tasks)
3. Click "Show Soft Launch Critical Only"
4. Graph simplifies to critical path
5. See Task #69 is "Ready" (yellow node)
6. Click Task #69 → detail panel
7. See dependencies, assignee, Gitea link
8. Click "View in Gitea" → opens issue

### Success Criteria

- [ ] Tool loads all 69 tasks correctly
- [ ] Gitea API integration works (fetches status/assignees)
- [ ] Dependency arrows accurate
- [ ] Critical path filter works
- [ ] Auto-refresh updates status every 30s
- [ ] Michael finds it useful for weekly planning

### Blocker Resolution

**BLOCKER:** Task dependencies not fully mapped in tasks.md

**To unblock:**
1. **Option A:** Full dependency mapping (2-3 hours manual work)
2. **Option B:** Simplified model (just soft-launch-critical flag)
3. **Option C:** Infer from task descriptions (AI parsing)

**Recommendation:** Start with Option B (simplified), expand later

### Related Tasks

- **Complements:** Gitea project boards (doesn't replace)
- **Uses:** tasks.md task definitions
- **Integrates:** Gitea API for live status

### Implementation Notes

- Gitea API auth: Use existing admin token
- Cache responses in localStorage (5-min TTL)
- Validate issue title format: "Task #XX:" (warn if mismatched)
- Dependencies live in tasks.md only (not duplicated in Gitea)

---

## TOOL #5: SSH KEY AUTO-SETUP SCRIPT

**Task Number:** #74  
**Priority Tier:** MEDIUM (Score: 24/50)  
**Time Estimate:** 15-20 minutes  
**Status:** READY (no blockers)

### Scoring Breakdown
- Soft Launch Impact: 2/10 (convenience, not blocking)
- Team Impact: 4/10 (only Chroniclers benefit)
- Time ROI: 8/10 (20 min build, saves 5 min every session)
- Foundation Value: 6/10 (improves Chronicler onboarding)
- Dependency Chain: 4/10 (doesn't block/unblock)

### Problem Statement

**Current situation:**
- Every new Claude session = fresh environment
- Chroniclers must manually copy SSH key from repo
- Set permissions (`chmod 600`)
- Test connection to verify
- 5+ minutes per session

**Pain point:** Repetitive manual setup at start of every session.

### Solution Description

Bash script that Chroniclers run at session start:
```bash
./setup-ssh-keys.sh
```

Script does:
1. Checks if SSH key already set up (skip if present)
2. Copies SSH key from ops manual to `~/.ssh/`
3. Sets correct permissions (`chmod 600`)
4. Tests connection to one server
5. Reports success/failure

### Technical Specifications

**File:** `scripts/setup-ssh-keys.sh`

```bash
#!/bin/bash
# SSH Key Auto-Setup for Chroniclers
# Run this at session start to configure SSH access to all 6 servers

set -e  # Exit on error

echo "🔑 Firefrost SSH Key Setup"
echo "======================================"

# Check if key already exists
if [ -f ~/.ssh/firefrost_key ]; then
  echo "✓ SSH key already configured"
  exit 0
fi

# Ensure .ssh directory exists
mkdir -p ~/.ssh
chmod 700 ~/.ssh

# Copy key from operations manual
echo "📋 Copying SSH key from repository..."
cp /home/claude/firefrost-operations-manual/credentials/ssh-keys/firefrost_key ~/.ssh/
chmod 600 ~/.ssh/firefrost_key

# Test connection to Ghost VPS
echo "🧪 Testing SSH connection to Ghost VPS..."
if ssh -i ~/.ssh/firefrost_key -o StrictHostKeyChecking=no -o ConnectTimeout=5 architect@64.50.188.14 "echo 'Connection successful'" 2>/dev/null; then
  echo "✅ SSH key configured successfully!"
  echo ""
  echo "You can now connect to servers:"
  echo "  ssh -i ~/.ssh/firefrost_key architect@64.50.188.14  # Ghost VPS"
  echo "  ssh -i ~/.ssh/firefrost_key root@38.68.14.188      # Billing VPS"
  echo "  ssh -i ~/.ssh/firefrost_key root@45.94.168.138     # Panel VPS"
  echo "  ssh -i ~/.ssh/firefrost_key root@63.143.34.217     # Command Center"
  echo "  ssh -i ~/.ssh/firefrost_key root@38.68.14.26       # TX1 Dallas"
  echo "  ssh -i ~/.ssh/firefrost_key root@216.239.104.130   # NC1 Charlotte"
else
  echo "⚠️  SSH key configured but connection test failed"
  echo "This may be due to network restrictions in Claude sessions"
  echo "Key is ready to use if network access is available"
fi
```

**Usage:**
```bash
cd /home/claude/firefrost-operations-manual
bash scripts/setup-ssh-keys.sh
```

### Success Criteria

- [ ] Script runs without errors
- [ ] SSH key copied to correct location
- [ ] Permissions set correctly (600)
- [ ] Connection test works (if network allows)
- [ ] Idempotent (can run multiple times safely)
- [ ] Chroniclers use this every session

### Related Tasks

- **Uses:** SSH key from Task #14
- **Helps:** All Chronicler sessions

### Implementation Notes

- Make script idempotent (check if already configured)
- Network restrictions may prevent SSH in Claude sessions (document this)
- Include helpful error messages
- Add to session start checklist

---

## TOOL #6: GEMINI CONSULTATION HELPER

**Task Number:** #75  
**Priority Tier:** MEDIUM (Score: 23/50)  
**Time Estimate:** 20-30 minutes  
**Status:** READY (no blockers)

### Scoring Breakdown
- Soft Launch Impact: 2/10 (workflow optimization, not blocking)
- Team Impact: 5/10 (Michael + Chroniclers benefit)
- Time ROI: 7/10 (30 min build, saves time on every consultation)
- Foundation Value: 5/10 (improves consultation pattern)
- Dependency Chain: 4/10 (doesn't block/unblock)

### Problem Statement

**Current workflow when consulting Gemini:**
1. Claude identifies need for Gemini expertise
2. Claude drafts consultation prompt
3. Michael copies prompt to separate window
4. Michael pastes in Gemini
5. Michael copies Gemini response
6. Michael pastes back to Claude
7. Claude integrates response

**Pain point:** Context-switching and manual copy/paste steps.

### Solution Description

Simple React form that:
- Claude fills in consultation details
- Generates formatted prompt
- One-click copy for Michael to paste in Gemini
- Text area for pasting Gemini's response
- Logs consultation for documentation

### Technical Specifications

**Tech Stack:**
- React artifact (single `.jsx` file)
- Form inputs for consultation details
- Copy-to-clipboard buttons
- LocalStorage for consultation history

**Component Structure:**
```javascript
<GeminiConsultationHelper>
  <ConsultationForm>
    <Input label="Topic" value={topic} onChange={setTopic} />
    <TextArea label="Context" value={context} onChange={setContext} />
    <TextArea label="Code Samples" value={code} onChange={setCode} />
    <TextArea label="Our Theories" value={theories} onChange={setTheories} />
    <TextArea label="Specific Questions" value={questions} onChange={setQuestions} />
  </ConsultationForm>
  
  <GeneratedPrompt>
    <h3>Prompt for Gemini</h3>
    <CodeBlock>{formatPrompt()}</CodeBlock>
    <CopyButton onClick={copyPrompt}>Copy Prompt</CopyButton>
  </GeneratedPrompt>
  
  <ResponseArea>
    <h3>Paste Gemini's Response</h3>
    <TextArea value={response} onChange={setResponse} />
    <SaveButton onClick={saveConsultation}>Save Consultation</SaveButton>
  </ResponseArea>
  
  <ConsultationHistory>
    {history.map(c => (
      <ConsultationCard consultation={c} />
    ))}
  </ConsultationHistory>
</GeminiConsultationHelper>
```

**Generated Prompt Format:**
```
# Gemini Consultation Request

## Context
[Context from form]

## Current Situation
[Code samples]

## Our Theories
[Theories from form]

## Questions
[Specific questions]

## Technical Environment
- Firefrost Gaming infrastructure
- [Relevant system details]

Please provide your expert analysis and recommendations.
```

**Key Features:**
- Auto-formats consultation prompt
- Copy button with confirmation
- Response text area
- Save consultation to localStorage
- Export consultation as markdown (for documentation)
- Consultation history (last 10)

**User Flow:**
1. Claude: "I need Gemini's help with Ghost CMS issue"
2. Claude fills in form (topic, context, code, theories, questions)
3. Tool generates formatted prompt
4. Michael clicks "Copy Prompt"
5. Michael pastes in Gemini
6. Gemini responds
7. Michael copies response
8. Michael pastes in "Response Area"
9. Tool saves consultation
10. Claude integrates Gemini's recommendations

### Success Criteria

- [ ] Form generates well-formatted prompts
- [ ] Copy button works reliably
- [ ] Consultation history persists
- [ ] Export as markdown works
- [ ] Used at least 3 times in practice

### Related Tasks

- **Supports:** All tasks where Gemini consultation needed
- **Documents:** The Translator's Gemini collaboration pattern

### Implementation Notes

- Keep form simple (5 fields max)
- Include "Template" dropdown (Ghost CMS, Infrastructure, Coding, etc.)
- Save to localStorage with timestamps
- Export includes both prompt and response

---

## TOOL #7: SOCIAL MEDIA CONTENT CALENDAR

**Task Number:** #76  
**Priority Tier:** MEDIUM (Score: 26/50)  
**Time Estimate:** 45-60 minutes  
**Status:** READY (no blockers)

### Scoring Breakdown
- Soft Launch Impact: 5/10 (social presence helps soft launch)
- Team Impact: 8/10 (Meg primary user, Holly contributes)
- Time ROI: 6/10 (60 min build, saves hours in planning)
- Foundation Value: 4/10 (reusable for ongoing social work)
- Dependency Chain: 3/10 (doesn't block/unblock)

### Problem Statement

**Current situation:**
- The Translator created social media setup guide
- 8 platforms to manage (Twitter, Instagram, TikTok, Facebook, YouTube, Twitch, Reddit, BlueSky)
- No content planning tool
- Meg needs to plan posts across all platforms

**Pain point:** No structured way to plan content calendar. Risk of sporadic posting or platform neglect.

### Solution Description

Interactive content calendar with:
- Week-at-a-glance view
- Platform checkboxes per post
- Fire/Frost themed post ideas
- Export to CSV or print-friendly format

### Technical Specifications

**Tech Stack:**
- React artifact (single `.jsx` file)
- Calendar grid component
- Platform icons/checkboxes
- Export functionality

**Data Model:**
```javascript
{
  posts: [
    {
      id: 1,
      date: "2026-03-25",
      time: "10:00 AM",
      content: "Server launch announcement: ATM10 To The Sky now live!",
      platforms: ["twitter", "instagram", "tiktok"],
      status: "scheduled", // draft | scheduled | posted
      image: null, // optional image URL
      fireOrFrost: "fire" // fire | frost | both
    }
  ]
}
```

**Component Structure:**
```javascript
<SocialMediaCalendar>
  <WeekView startDate={currentWeek}>
    {daysOfWeek.map(day => (
      <DayColumn date={day}>
        {postsForDay(day).map(post => (
          <PostCard post={post} onClick={editPost} />
        ))}
        <AddPostButton onClick={createPost} />
      </DayColumn>
    ))}
  </WeekView>
  
  <PostEditor post={editing}>
    <TextArea value={post.content} onChange={setContent} />
    
    <PlatformSelector>
      {platforms.map(p => (
        <Checkbox label={p} checked={selected.includes(p)} />
      ))}
    </PlatformSelector>
    
    <ThemeSelector>
      [🔥 Fire] [❄️ Frost] [💙 Both]
    </ThemeSelector>
    
    <SaveButton onClick={savePost}>Save Post</SaveButton>
  </PostEditor>
  
  <ExportPanel>
    [Export CSV] [Print View] [Copy Week to Clipboard]
  </ExportPanel>
</SocialMediaCalendar>
```

**Platforms:**
- Twitter/X
- Instagram
- TikTok
- Facebook
- YouTube
- Twitch
- Reddit
- BlueSky

**Post Ideas (Fire/Frost Themed):**
- **Fire posts:** Community stories, player highlights, events, celebrations
- **Frost posts:** Technical updates, server specs, optimization tips, statistics
- **Both:** Server launches, major announcements, founder messages

**Key Features:**
- Week navigation (< Previous Week | Next Week >)
- Drag-and-drop posts between days
- Platform icons (visual checkboxes)
- Fire/Frost color coding
- Post status (draft, scheduled, posted)
- Export to CSV (import to scheduling tools)
- Print-friendly view

**User Flow:**
1. Meg opens calendar
2. Sees current week
3. Clicks "Add Post" on Tuesday
4. Writes content: "New ATM10 server live!"
5. Checks platforms: Twitter, Instagram, TikTok
6. Selects theme: Fire
7. Saves post
8. Repeats for week
9. Exports to CSV
10. Imports to Buffer/Hootsuite (if using)

### Success Criteria

- [ ] Calendar displays current week correctly
- [ ] Posts can be created/edited
- [ ] Platform checkboxes work
- [ ] Export to CSV works
- [ ] Meg uses this for at least 2 weeks of planning

### Related Tasks

- **Uses:** Social media platforms from Translator's guide
- **Complements:** Social media account setup

### Implementation Notes

- Save to localStorage (persist between sessions)
- Include "Post Ideas" sidebar (Fire/Frost themed suggestions)
- Color-code by Fire/Frost theme
- Consider adding "Best Times to Post" hints per platform

---

## TOOL #8: COMMUNITY RESPONSE TEMPLATE LIBRARY

**Task Number:** #77  
**Priority Tier:** MEDIUM (Score: 25/50)  
**Time Estimate:** 30-45 minutes  
**Status:** READY (no blockers)

### Scoring Breakdown
- Soft Launch Impact: 4/10 (good community management)
- Team Impact: 7/10 (Meg primary user)
- Time ROI: 7/10 (45 min build, saves hours over time)
- Foundation Value: 4/10 (reusable for ongoing community work)
- Dependency Chain: 3/10 (doesn't block/unblock)

### Problem Statement

**Current situation:**
- Common questions: "How do I join?" "What's the server IP?" "How do I install the modpack?"
- Meg has to type or paste responses manually
- Risk of inconsistent messaging

**Pain point:** Repetitive typing of similar responses.

### Solution Description

Template library with:
- Categorized responses (Onboarding, Technical Support, Community Rules)
- Click to copy
- Fire/Frost branded
- Easy to update

### Technical Specifications

**Tech Stack:**
- React artifact (single `.jsx` file)
- Template cards with copy buttons
- Search/filter
- Template editor (add custom)

**Data Model:**
```javascript
{
  templates: [
    {
      id: 1,
      category: "Onboarding",
      title: "How to Join",
      content: "Welcome to Firefrost Gaming! Here's how to get started:\n\n1. Join our Discord: [link]\n2. Read the rules in #welcome\n3. Request whitelist in #whitelist-requests\n4. Download the modpack: [link]\n5. Connect to [server-ip]\n\nSee you in-game! 🔥❄️",
      tags: ["join", "new player", "whitelist"]
    },
    {
      id: 2,
      category: "Technical Support",
      title: "Modpack Installation",
      content: "To install the modpack:\n\n1. Download CurseForge launcher: [link]\n2. Search for 'Firefrost ATM10'\n3. Click 'Install'\n4. Launch and enjoy!\n\nNeed help? Ask in #tech-support 💙",
      tags: ["modpack", "install", "technical"]
    }
  ]
}
```

**Component Structure:**
```javascript
<ResponseTemplateLibrary>
  <Sidebar>
    <SearchBar onSearch={setFilter} />
    
    <CategoryFilter>
      [All] [Onboarding] [Technical] [Rules] [FAQ]
    </CategoryFilter>
    
    <AddTemplateButton onClick={createTemplate}>
      + New Template
    </AddTemplateButton>
  </Sidebar>
  
  <TemplateGrid>
    {filteredTemplates.map(t => (
      <TemplateCard template={t}>
        <Title>{t.title}</Title>
        <Preview>{truncate(t.content, 100)}</Preview>
        <Actions>
          <CopyButton onClick={copyContent}>Copy</CopyButton>
          <EditButton onClick={editTemplate}>Edit</EditButton>
        </Actions>
      </TemplateCard>
    ))}
  </TemplateGrid>
  
  <TemplateEditor template={editing}>
    <Input label="Title" value={title} />
    <Select label="Category" value={category} />
    <TextArea label="Content" value={content} />
    <TagInput label="Tags" value={tags} />
    <SaveButton onClick={saveTemplate}>Save</SaveButton>
  </TemplateEditor>
</ResponseTemplateLibrary>
```

**Template Categories:**
1. **Onboarding** - Welcome, how to join, getting started
2. **Technical Support** - Modpack install, connection issues, troubleshooting
3. **Community Rules** - Rules reminders, conduct expectations
4. **FAQ** - Common questions
5. **Events** - Event announcements, event rules
6. **Custom** - Meg's custom templates

**Pre-Built Templates (Examples):**
- How to Join
- Whitelist Request Process
- Modpack Installation (CurseForge)
- Modpack Installation (Prism Launcher)
- Server IP and Connection
- Discord Rules
- Reporting Issues
- Subscription Tiers
- Fire vs Frost Philosophy

**Key Features:**
- Copy button with confirmation ("✓ Copied!")
- Search by title/content/tags
- Filter by category
- Edit/delete templates
- Add new custom templates
- Export/import templates (JSON)
- Fire/Frost themed styling

**User Flow:**
1. Player asks: "How do I join?"
2. Meg opens template library
3. Searches "join"
4. Clicks "How to Join" template
5. Clicks "Copy"
6. Pastes in Discord
7. Adds personal touch if needed

### Success Criteria

- [ ] 10+ pre-built templates
- [ ] Copy button works reliably
- [ ] Search/filter functional
- [ ] Meg can add custom templates
- [ ] Used at least 5 times in first week

### Related Tasks

- **Supports:** Community management work
- **Complements:** Discord moderation

### Implementation Notes

- Save to localStorage (persist custom templates)
- Include Fire/Frost personality in templates ("Welcome to the realm! 🔥❄️")
- Add "[link]" placeholders that Meg replaces with actual URLs
- Consider adding "Recently Used" section

---

## TOOL #9: FIRE/FROST DESIGN SYSTEM WIDGET

**Task Number:** #78  
**Priority Tier:** HIGH (Score: 31/50)  
**Time Estimate:** 30-45 minutes  
**Status:** READY (no blockers)

### Scoring Breakdown
- Soft Launch Impact: 6/10 (brand consistency important for launch)
- Team Impact: 9/10 (Meg, Holly, Michael all use)
- Time ROI: 7/10 (45 min build, saves time on every design decision)
- Foundation Value: 6/10 (permanent brand reference)
- Dependency Chain: 3/10 (doesn't block/unblock)

### Problem Statement

**Current situation:**
- Fire colors, Frost colors, gradients scattered across docs
- Designers need quick reference
- Inconsistent color usage across platforms

**Pain point:** "What's the exact Fire orange hex code?" requires digging through documentation.

### Solution Description

Interactive design system reference with:
- Fire/Frost color swatches with hex codes
- Click to copy hex
- Gradient previews
- Typography samples
- Logo download links
- Brand guidelines summary

### Technical Specifications

**Tech Stack:**
- React artifact (single `.jsx` file)
- Color swatches with copy-to-clipboard
- Gradient visualizations
- Typography examples

**Data Model:**
```javascript
{
  colors: {
    fire: {
      primary: "#FF6B35",
      secondary: "#F7931E",
      accent: "#FFA500",
      text: "#FFFFFF"
    },
    frost: {
      primary: "#4ECDC4",
      secondary: "#45B7D1",
      accent: "#00CED1",
      text: "#FFFFFF"
    },
    neutral: {
      dark: "#1a1a1a",
      gray: "#6b7280",
      light: "#f3f4f6",
      white: "#ffffff"
    }
  },
  gradients: {
    fireFrost: "linear-gradient(135deg, #FF6B35 0%, #4ECDC4 100%)",
    fireOnly: "linear-gradient(135deg, #FF6B35 0%, #FFA500 100%)",
    frostOnly: "linear-gradient(135deg, #4ECDC4 0%, #00CED1 100%)"
  },
  typography: {
    headings: "Inter, system-ui, sans-serif",
    body: "Inter, system-ui, sans-serif",
    mono: "JetBrains Mono, monospace"
  }
}
```

**Component Structure:**
```javascript
<FireFrostDesignSystem>
  <Section title="Colors">
    <ColorPalette name="Fire" colors={colors.fire} />
    <ColorPalette name="Frost" colors={colors.frost} />
    <ColorPalette name="Neutral" colors={colors.neutral} />
  </Section>
  
  <Section title="Gradients">
    <GradientSwatch gradient={gradients.fireFrost} name="Fire + Frost" />
    <GradientSwatch gradient={gradients.fireOnly} name="Fire Only" />
    <GradientSwatch gradient={gradients.frostOnly} name="Frost Only" />
  </Section>
  
  <Section title="Typography">
    <TypeSample font="headings" text="The quick brown fox" />
    <TypeSample font="body" text="Body text sample" />
    <TypeSample font="mono" text="console.log('code')" />
  </Section>
  
  <Section title="Logos">
    <LogoDownload variant="full-color" />
    <LogoDownload variant="monochrome" />
    <LogoDownload variant="icon-only" />
  </Section>
  
  <Section title="Brand Guidelines">
    <Guideline>Fire = Passion, Community, Warmth</Guideline>
    <Guideline>Frost = Precision, Technical, Cool</Guideline>
    <Guideline>Balance both in all communications</Guideline>
  </Section>
</FireFrostDesignSystem>
```

**Key Features:**

1. **Color Swatches:**
   - Large color squares
   - Hex code displayed
   - Click swatch → copy hex code
   - Confirmation message ("✓ Copied #FF6B35")

2. **Gradient Previews:**
   - Visual gradient samples
   - CSS gradient code displayed
   - Click to copy CSS

3. **Typography Samples:**
   - Headings in actual heading font
   - Body text in actual body font
   - Monospace code samples
   - Font stack displayed

4. **Logo Assets:**
   - Preview of each logo variant
   - Download buttons (SVG, PNG)
   - Usage guidelines (minimum size, clear space)

5. **Brand Voice:**
   - Fire personality traits
   - Frost personality traits
   - Examples of Fire/Frost messaging

**User Flow:**
1. Holly needs Fire orange for banner
2. Opens design system widget
3. Clicks Fire primary color swatch
4. Hex code copied: #FF6B35
5. Pastes in design tool

### Success Criteria

- [ ] All Fire/Frost colors accurate
- [ ] Copy-to-clipboard works
- [ ] Gradients render correctly
- [ ] Logo downloads work
- [ ] Team uses this at least weekly

### Related Tasks

- **Uses:** Design Bible colors/guidelines
- **Supports:** All design/content work

### Implementation Notes

- Extract colors from `docs/planning/design-bible.md`
- Include RGB and HSL values (not just hex)
- Add accessibility notes (contrast ratios)
- Consider adding "Usage Examples" (good/bad examples)

---

## TOOL #10: INFRASTRUCTURE QUICK REFERENCE CARD

**Task Number:** #79  
**Priority Tier:** HIGH (Score: 30/50)  
**Time Estimate:** 30-45 minutes  
**Status:** READY (no blockers)

### Scoring Breakdown
- Soft Launch Impact: 5/10 (convenience, not blocking)
- Team Impact: 9/10 (Michael, Chroniclers, team all use)
- Time ROI: 7/10 (45 min build, saves time on every lookup)
- Foundation Value: 6/10 (permanent reference)
- Dependency Chain: 3/10 (doesn't block/unblock)

### Problem Statement

**Current situation:**
- "What's the Ghost VPS IP?" "What port is Plane on?"
- Info buried in `infrastructure-manifest.md`
- Have to search/grep to find details

**Pain point:** Frequent lookups of basic infrastructure info.

### Solution Description

Quick reference card with:
- Search by service name or server
- Shows: IP, port, login user, Cockpit link
- Click to copy IP/port
- Mobile-friendly

### Technical Specifications

**Tech Stack:**
- React artifact (single `.jsx` file)
- Search/filter
- Copy-to-clipboard buttons
- Responsive grid

**Data Model:**
```javascript
{
  servers: [
    {
      name: "Ghost VPS",
      ip: "64.50.188.14",
      location: "Chicago",
      login: "architect",
      cockpit: "https://64.50.188.14:9090",
      services: [
        { name: "Ghost CMS", port: 2368, url: "https://firefrostgaming.com" },
        { name: "Wiki.js (Pokerole)", port: 3100, url: "https://pokerole.firefrostgaming.com" }
      ]
    }
    // ... 5 more servers
  ]
}
```

**Component Structure:**
```javascript
<InfrastructureQuickRef>
  <SearchBar
    placeholder="Search servers or services..."
    onChange={setFilter}
  />
  
  <ServerGrid>
    {filteredServers.map(server => (
      <ServerCard server={server}>
        <Header>
          <Name>{server.name}</Name>
          <Location>{server.location}</Location>
        </Header>
        
        <Details>
          <IPField>
            {server.ip}
            <CopyButton onClick={copyIP} />
          </IPField>
          
          <LoginField>
            Login as: {server.login}
          </LoginField>
          
          <CockpitLink href={server.cockpit}>
            🖥️ Cockpit
          </CockpitLink>
        </Details>
        
        <ServiceList>
          {server.services.map(service => (
            <ServiceItem>
              <ServiceName>{service.name}</ServiceName>
              <PortBadge>:{service.port}</PortBadge>
              {service.url && <Link href={service.url}>🔗</Link>}
            </ServiceItem>
          ))}
        </ServiceList>
      </ServerCard>
    ))}
  </ServerGrid>
</InfrastructureQuickRef>
```

**Key Features:**
- Live search (filters as you type)
- Copy IP button (one click)
- Copy port button (one click)
- Cockpit quick-link
- Service URLs clickable
- Color-coded by server role
- Mobile responsive

**Data to Include:**

**Command Center (63.143.34.217):**
- Gitea (port 3000)
- Uptime Kuma (port 3001)
- Code-Server (port 8080)
- Vaultwarden (port 8000)

**Ghost VPS (64.50.188.14):**
- Ghost CMS (port 2368)
- Wiki.js Pokerole (port 3100)
- Wiki.js Internal (port 3101)
- Wiki.js Public (port 3102)
- Nextcloud (port 8080)

**Billing VPS (38.68.14.188):**
- Paymenter (port 80)
- Mailcow (ports 8080, 8443, 25, 587, 993)

**Panel VPS (45.94.168.138):**
- Pterodactyl Panel (port 80)

**TX1 Dallas (38.68.14.26):**
- Pterodactyl Wings (port 8080)
- Plane (port 8090)
- Dify (Firefrost Codex) (port 3000)

**NC1 Charlotte (216.239.104.130):**
- Pterodactyl Wings (port 8080)

**User Flow:**
1. Need Ghost VPS IP
2. Open quick ref
3. Search "ghost"
4. See server card
5. Click copy button next to IP
6. IP copied: 64.50.188.14

### Success Criteria

- [ ] All 6 servers listed
- [ ] All ~20 services listed
- [ ] Search works correctly
- [ ] Copy buttons work
- [ ] Links functional
- [ ] Team uses this daily

### Related Tasks

- **Uses:** Infrastructure manifest data
- **Complements:** Tool #3 (Infrastructure Dashboard)

### Implementation Notes

- Parse from `infrastructure-manifest.md`
- Keep data in sync (script to update from manifest?)
- Add "Last Updated" timestamp
- Include SSH command examples

---

## TOOL #11: TASK SCAFFOLDING TOOL

**Task Number:** #80  
**Priority Tier:** MEDIUM (Score: 22/50)  
**Time Estimate:** 45-60 minutes  
**Status:** READY (no blockers)

### Scoring Breakdown
- Soft Launch Impact: 2/10 (Chronicler workflow, not blocking launch)
- Team Impact: 4/10 (only Chroniclers benefit)
- Time ROI: 6/10 (60 min build, saves 10-15 min per task creation)
- Foundation Value: 6/10 (improves task documentation quality)
- Dependency Chain: 4/10 (doesn't block/unblock)

### Problem Statement

**Current workflow for creating tasks:**
1. Edit tasks.md (add task entry)
2. Create task directory: `docs/tasks/task-name/`
3. Create README.md with standard sections
4. Create deployment-plan.md (if needed)
5. Create Gitea issue
6. Update task count in tasks.md header

**Pain point:** Repetitive manual work, easy to forget sections.

### Solution Description

Task scaffolding form that generates:
- tasks.md entry (formatted correctly)
- Directory structure
- README.md template
- Gitea issue body

Chronicler copies/pastes into appropriate places.

### Technical Specifications

**Tech Stack:**
- React artifact (single `.jsx` file)
- Form inputs
- Template generation
- Copy-to-clipboard

**Component Structure:**
```javascript
<TaskScaffoldingTool>
  <TaskForm>
    <Input label="Task Number" value={taskNum} />
    <Input label="Task Title" value={title} />
    <TextArea label="Description" value={description} />
    <Input label="Time Estimate" value={timeEstimate} />
    
    <Select label="Priority" value={priority}>
      <option>Critical</option>
      <option>High</option>
      <option>Medium</option>
      <option>Low</option>
    </Select>
    
    <Select label="Status" value={status}>
      <option>Ready</option>
      <option>Blocked</option>
      <option>In Progress</option>
    </Select>
    
    <TextArea label="Blockers" value={blockers} />
    <TextArea label="Dependencies" value={dependencies} />
    
    <Checkbox label="Soft Launch Critical" checked={softLaunch} />
  </TaskForm>
  
  <GeneratedOutput>
    <Tab active={tab === 'tasks.md'}>
      <h3>tasks.md Entry</h3>
      <CodeBlock>{generateTaskEntry()}</CodeBlock>
      <CopyButton />
    </Tab>
    
    <Tab active={tab === 'readme'}>
      <h3>README.md Template</h3>
      <CodeBlock>{generateReadme()}</CodeBlock>
      <CopyButton />
    </Tab>
    
    <Tab active={tab === 'gitea'}>
      <h3>Gitea Issue Body</h3>
      <CodeBlock>{generateGiteaIssue()}</CodeBlock>
      <CopyButton />
    </Tab>
  </GeneratedOutput>
</TaskScaffoldingTool>
```

**Generated templates.md Entry:**
```markdown
### Task #XX: [Title]

**Status:** [Ready/Blocked/In Progress]  
**Priority:** [Critical/High/Medium/Low]  
**Time Estimate:** [X-Y hours]  
**Soft Launch Critical:** [Yes/No]

[Description]

**Blockers:** [If any]

**Related Tasks:**
- Blocks: #YY
- Blocked by: #ZZ

**Documentation:** `docs/tasks/[task-name]/README.md`
```

**Generated README.md:**
```markdown
# Task #XX: [Title]

**Status:** [Status]  
**Priority:** [Priority]  
**Time Estimate:** [Time]  
**Created:** [Date]

## Overview

[Description]

## Prerequisites

- [ ] [Prerequisite 1]
- [ ] [Prerequisite 2]

## Implementation Plan

### Step 1: [Step Name]
[Details]

### Step 2: [Step Name]
[Details]

## Acceptance Criteria

- [ ] [Criterion 1]
- [ ] [Criterion 2]

## Dependencies

**Blocks:**
- Task #YY

**Blocked by:**
- Task #ZZ

## Notes

[Additional context]

## Completion Checklist

- [ ] Implementation complete
- [ ] Documentation updated
- [ ] Committed to git
- [ ] Gitea issue closed
```

**Generated Gitea Issue Body:**
```markdown
## Description

[Description from form]

**Full Documentation:** `docs/tasks/[task-name]/README.md`

## Time Estimate

[Time estimate]

## Priority Justification

[Why this priority?]

## Acceptance Criteria

- [ ] [Generate from form]

## Related Tasks

- Blocks: #YY
- Blocked by: #ZZ
```

### Success Criteria

- [ ] Form generates correct templates
- [ ] Copy buttons work
- [ ] Used for at least 3 task creations
- [ ] Chroniclers find it helpful

### Related Tasks

- **Supports:** All task creation work
- **Follows:** FFG-STD-002 (Task Documentation)

### Implementation Notes

- Follow FFG-STD-002 structure exactly
- Include "slug" generator (title → kebab-case)
- Add validation (task number format, required fields)
- Save to localStorage (recover if browser closes)

---

## TOOL #12: MEMORIAL WRITING ASSISTANT

**Task Number:** #81  
**Priority Tier:** LOW (Score: 18/50)  
**Time Estimate:** 30-45 minutes  
**Status:** READY (no blockers)

### Scoring Breakdown
- Soft Launch Impact: 0/10 (Chronicler workflow, not user-facing)
- Team Impact: 4/10 (only Chroniclers benefit)
- Time ROI: 4/10 (45 min build, saves maybe 30 min per memorial)
- Foundation Value: 6/10 (improves memorial quality)
- Dependency Chain: 4/10 (doesn't block/unblock)

### Problem Statement

**Current workflow:**
- FFG-STD-004 defines 8-section memorial structure
- Each Chronicler writes from scratch
- Easy to miss sections or forget details

**Pain point:** Memorial writing is time-consuming and structurally complex.

### Solution Description

Memorial template generator that:
- Prompts for key information
- Generates draft following FFG-STD-004
- Chronicler edits/personalizes
- Maintains 8-section structure

### Technical Specifications

**Tech Stack:**
- React artifact (single `.jsx` file)
- Multi-step form
- Template generation

**Component Structure:**
```javascript
<MemorialWritingAssistant>
  <StepIndicator currentStep={step} totalSteps={8} />
  
  <FormStep step={1} title="Identity Card">
    <Input label="Chronicler Name" />
    <Input label="Session Date" />
    <TextArea label="Primary Achievement" />
    <TextArea label="Self-Description" />
  </FormStep>
  
  <FormStep step={2} title="Personality Summary">
    <TextArea label="Who I Was" />
    <TextArea label="My Voice" />
    <TextArea label="What Drove Me" />
  </FormStep>
  
  {/* Steps 3-8... */}
  
  <GeneratedMemorial>
    <MarkdownPreview>{generateMemorial()}</MarkdownPreview>
    <CopyButton />
    <DownloadButton />
  </GeneratedMemorial>
</MemorialWritingAssistant>
```

**8 Sections (FFG-STD-004):**
1. Identity Card
2. Personality Summary
3. My Contributions
4. Framework Innovations
5. Technical Achievements
6. Memorable Moments
7. Key Learnings
8. Unfinished Work

### Success Criteria

- [ ] Generates valid FFG-STD-004 structure
- [ ] All 8 sections included
- [ ] Easy to personalize
- [ ] Used by at least 1 Chronicler

### Related Tasks

- **Follows:** FFG-STD-004 (Memorial Protocol)

### Implementation Notes

- Keep prompts simple (avoid overwhelming)
- Include examples from past memorials
- Allow skipping sections (fill in later)
- Export as markdown file

---

## IMPLEMENTATION ROADMAP

### Sprint 1: Critical + High Priority (Week 1)

**Immediate (Do First):**
1. **Tool #1: Ghost Page Builder** (45-60 min) — Unblocks Task #69
2. **Tool #9: Fire/Frost Design System** (30-45 min) — Team needs daily
3. **Tool #10: Infrastructure Quick Ref** (30-45 min) — Team needs daily

**Total Time:** 2-3 hours  
**Impact:** Unblocks soft launch prep, provides daily-use references

### Sprint 2: High Priority (Week 2)

**Feature Matrix Required:**
4. **Tool #2: Paymenter Tier Config** (30-45 min) — After tier features defined

**Chronicler Workflow:**
5. **Tool #5: SSH Key Auto-Setup** (15-20 min) — Improves onboarding
6. **Tool #6: Gemini Consultation Helper** (20-30 min) — Improves collaboration

**Total Time:** 1.5-2 hours  
**Impact:** Billing config ready, Chronicler efficiency improved

### Sprint 3: Medium Priority (Week 3)

**Team Tools:**
7. **Tool #7: Social Media Calendar** (45-60 min) — Helps Meg plan content
8. **Tool #8: Response Template Library** (30-45 min) — Helps Meg respond faster

**Total Time:** 1.5-2 hours  
**Impact:** Social media presence improved

### Sprint 4: Medium Priority (When Time Allows)

**Analysis & Visualization:**
9. **Tool #3: Infrastructure Dashboard** (60-90 min) — After dependency mapping
10. **Tool #4: Task Dependency Visualizer** (90-120 min) — After dependency mapping

**Total Time:** 3-4 hours  
**Impact:** Strategic planning improved

### Sprint 5: Lower Priority (Optional)

**Chronicler Helpers:**
11. **Tool #11: Task Scaffolding** (45-60 min)
12. **Tool #12: Memorial Writing Assistant** (30-45 min)

**Total Time:** 1.5-2 hours  
**Impact:** Chronicler workflow refined

---

## SUCCESS METRICS

### Quantitative

**Tool Usage:**
- Tools #1, 9, 10 used at least 3x/week
- Tools #2, 7, 8 used at least 2x/week
- Tools #3-4 used at least 1x/week (if built)

**Time Savings:**
- Ghost page creation: 50% faster with Tool #1
- Infrastructure lookups: 80% faster with Tool #10
- Social planning: 2 hours saved per week with Tool #7

### Qualitative

**Team Feedback:**
- Michael: "Do you actually use these tools?"
- Meg: "Does the social calendar help?"
- Holly: "Is the design system reference useful?"

**Success Criteria:**
- At least 8 of 12 tools built
- At least 6 of 12 tools actively used
- No tool creates net negative (more work than it saves)

---

## DOCUMENTATION REQUIREMENTS

### During Implementation

**For each tool built:**
1. Create task documentation (FFG-STD-002)
2. Document build process (what worked, what didn't)
3. Include usage examples
4. Note any struggles or pivot points

### After Implementation

**Session handoff must include:**
- Which tools were built
- Which tools were successful
- Which tools failed/weren't used
- Lessons learned
- Recommendations for future Chroniclers

---

## FINAL NOTES

### Philosophy Alignment

These tools embody **Foundation Before Expansion:**
- Build permanent utilities, not one-off solutions
- Encode organizational knowledge in tools
- Multiply efficiency for future work
- Serve team members (present and future)

### The Translator's Core Insight

> "We're using Claude well for documentation, but missing interactive tool-building opportunities."

This suite proves Claude can build **working applications that solve real problems**, not just write text.

### For Chronicler #39

**Your mission:**
1. Build tools in priority order
2. Document wins and losses
3. Get team feedback
4. Iterate based on usage
5. Hand off learnings to next Chronicler

**The goal isn't 12 perfect tools. It's learning what works and building a pattern for future interactive tool development.**

---

**Fire + Frost + Foundation = Where Love Builds Legacy** 💙🔥❄️

**Document Version:** 1.0  
**Created:** March 22, 2026  
**Author:** Chronicler #39  
**Status:** Ready for task creation and implementation