generate-system-map
Generates a personalized automation workflow map: a standalone HTML microsite with an interactive SVG mind map, schedule tab, and a feedback/issue-flagging system that outputs copy-ready fix prompts.
What gets produced
A single system-map.html file. Open it in any browser, no server needed. Three tabs:
- Workflow Map: radial SVG mind map: center hub → dept nodes → leaf skill nodes. Layout auto-adapts: 1–8 departments supported with coordinate tables for each count.
- Schedule: table of every task's timing, frequency, and trigger source
- Feedback: flag issues on any node, then generate organized fix prompts per skill/file
When to run
Run this when someone on the team wants their own copy of the workflow map customized for their system. The output file can be shared or opened locally.
Execution steps
1. Discover the system
Read these in parallel:
~/.claude/skills/: list all skill directories, then read each SKILL.md to understand what each skill does, its trigger type, and any timing info. In each SKILL.md, look for the DEPLOYMENT / trigger line that names the skill's trig_* routine ID and its timing (e.g. "weekday 8am ET via cloud routine trig_01...").~/.claude/CLAUDE.md if it exists: project name, company name, system overview~/CLAUDE.md if it exists: same- Live cloud routines: load the
RemoteTrigger tool via ToolSearch (query select:RemoteTrigger), then list the live routines to get each one's trig_* ID and cron schedule. This is the source of truth for what actually fires and when, cross-check it against the timing each SKILL.md claims.
- Local LaunchAgents: run
ls ~/Library/LaunchAgents/com.<yourname>.* to find any local scheduled agents (e.g. the inventory LaunchAgent). Read each plist for its StartCalendarInterval timing and the script it runs.
2. Organize into departments
Group the discovered skills into departments based on what makes sense for their system. Do not force exactly 4, use however many naturally emerge (1–8 is the supported range). Better to have the right number of groups than to artificially merge or split things.
Grouping heuristics:
- Skills that fire on a timer/server schedule → one scheduler dept
- Skills in the same workflow (review → approve → notify) → one dept
- Skills using the same external service (all Slack skills, all email skills) → consider grouping
- Skills that are sub-skills or helpers called by others → can be a "Utilities" dept or merged into the parent dept
Each dept should have 1–6 leaf nodes. If a dept would have 7+, split it. If two depts each have 1 skill, consider merging them.
Identify for each skill:
- Trigger type:
auto (fired by a cloud routine trig_* or a local LaunchAgent), external (Zapier/webhook), manual (user clicks), queued (deferred)
- Timing: exact time / frequency / days if auto; "on demand" / "real-time" if not
- Files involved: skill file path + any data files it reads/writes
3. Ask only if needed
If after reading all files you cannot determine:
- The company/team name → ask: "What's your company or team name for the map title?"
- The central hub name → ask: "What do you call your main dashboard or control panel?"
- How to group a skill → make a reasonable call and note it in the generated file as a comment
Do NOT ask for info you can derive from reading files.
4. Determine output path
If the user specified a path (e.g. --path ~/Desktop/system-map.html), use that.
Otherwise write to ./system-map.html in the current working directory.
5. Generate the HTML
Write a complete system-map.html using the template below, substituting all [PLACEHOLDER] values with the real discovered content.
HTML template
The full file structure to generate. Replace every [PLACEHOLDER] with real content. Keep all CSS, JS logic, and modal infrastructure exactly as-is, only change data/content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>[COMPANY_NAME]: Workflow Map</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f8fafc; overflow: hidden; }
#tabbar { position: fixed; top: 0; left: 0; right: 0; height: 46px; z-index: 300; background: white; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; padding: 0 20px; gap: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.logo { font-size: 13px; font-weight: 800; color: #0f172a; margin-right: 10px; }
.tab-btn { padding: 6px 14px; border-radius: 8px; border: none; background: none; font-size: 13px; font-weight: 600; color: #64748b; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: background .1s, color .1s; }
.tab-btn:hover { background: #f1f5f9; color: #0f172a; }
.tab-btn.active { background: #4f46e5; color: white; }
.fb-badge { display: none; background: #ef4444; color: white; font-size: 10px; font-weight: 700; border-radius: 10px; padding: 1px 6px; line-height: 1.4; }
.tab-btn.active .fb-badge { background: rgba(255,255,255,0.3); }
.view { display: none; position: fixed; top: 46px; left: 0; right: 0; bottom: 0; }
.view.active { display: block; }
#map-view { overflow: auto; cursor: grab; user-select: none; }
#map-view:active { cursor: grabbing; }
#schedule-view, #feedback-view { overflow-y: auto; background: #f8fafc; }
svg { display: block; }
.dept-node, .leaf-node, .center-node { cursor: pointer; }
.dept-node rect, .leaf-node rect { transition: filter 0.15s; }
.dept-node:hover rect, .leaf-node:hover rect { filter: brightness(0.93) drop-shadow(0 3px 8px rgba(0,0,0,0.15)); }
.center-node:hover rect { filter: brightness(1.08) drop-shadow(0 4px 12px rgba(79,70,229,0.4)); }
.comment-btn { opacity: 0; transition: opacity .15s; cursor: pointer; }
.dept-node:hover .comment-btn, .leaf-node:hover .comment-btn, .center-node:hover .comment-btn { opacity: 1; }
.comment-btn circle { transition: fill .12s; }
.comment-btn:hover circle { fill: #e0e7ff !important; }
.sched-wrap { max-width: 860px; margin: 0 auto; padding: 32px 24px 80px; }
.sched-pg-title { font-size: 20px; font-weight: 800; color: #0f172a; margin-bottom: 4px; }
.sched-pg-sub { font-size: 13px; color: #64748b; margin-bottom: 16px; }
.sched-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
.sched-sum-pill { padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; }
.sched-sec-hdr { font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #94a3b8; margin: 28px 0 10px 2px; }
.sched-row { background: white; border-radius: 12px; border: 1px solid #e2e8f0; padding: 14px 18px; margin-bottom: 8px; display: flex; align-items: center; gap: 14px; transition: border-color .12s, box-shadow .12s; }
.sched-row:hover { border-color: #c7d2fe; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.sched-icon { font-size: 22px; flex-shrink: 0; width: 34px; text-align: center; }
.sched-info { flex: 1; min-width: 0; }
.sched-name { font-size: 14px; font-weight: 700; color: #0f172a; }
.sched-desc { font-size: 11px; color: #64748b; margin-top: 2px; line-height: 1.5; }
.sched-trig { font-size: 10px; color: #b0bec5; margin-top: 5px; font-family: ui-monospace, monospace; }
.sched-mid { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.sbadge { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.bd-auto { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.bd-external { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.bd-manual { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.bd-queued { background: #ede9fe; color: #5b21b6; border: 1px solid #ddd6fe; }
.bd-subskill { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.sched-timing { flex-shrink: 0; width: 165px; text-align: right; }
.sched-time-main { font-size: 13px; font-weight: 700; color: #0f172a; line-height: 1.3; }
.sched-time-freq { font-size: 10px; color: #64748b; margin-top: 3px; }
.sched-time-days { font-size: 10px; color: #94a3b8; margin-top: 1px; }
.sched-cmt-btn { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; border: 1px solid #e2e8f0; background: white; color: #94a3b8; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .12s; }
.sched-cmt-btn:hover { background: #ede9fe; border-color: #a5b4fc; color: #4f46e5; }
.fb-wrap { max-width: 860px; margin: 0 auto; padding: 32px 24px 80px; }
.fb-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.fb-title { font-size: 20px; font-weight: 800; color: #0f172a; }
.fb-sub { font-size: 13px; color: #64748b; margin-top: 2px; }
.btn-generate { padding: 10px 20px; border-radius: 10px; border: none; background: #4f46e5; color: white; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .12s; white-space: nowrap; }
.btn-generate:hover { background: #4338ca; }
.btn-generate:disabled { background: #cbd5e1; cursor: default; }
.fb-empty { text-align: center; padding: 60px 20px; color: #94a3b8; border: 2px dashed #e2e8f0; border-radius: 16px; background: white; }
.fb-empty-icon { font-size: 40px; margin-bottom: 12px; }
.fb-empty-title { font-size: 15px; font-weight: 700; color: #64748b; margin-bottom: 6px; }
.fb-empty-hint { font-size: 12px; line-height: 1.6; }
.fb-group-hdr { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #94a3b8; margin: 24px 0 8px 2px; }
.fb-card { background: white; border-radius: 12px; border: 1px solid #e2e8f0; padding: 14px 16px; margin-bottom: 8px; display: flex; align-items: flex-start; gap: 12px; }
.fb-card-left { flex: 1; }
.fb-node-name { font-size: 13px; font-weight: 700; color: #0f172a; }
.fb-cat { font-size: 10px; color: #94a3b8; margin-top: 1px; }
.fb-comment { font-size: 12px; color: #374151; margin-top: 8px; line-height: 1.6; background: #f8fafc; border-radius: 8px; padding: 8px 10px; border: 1px solid #f1f5f9; }
.fb-time { font-size: 10px; color: #94a3b8; margin-top: 6px; }
.fb-del { background: none; border: none; color: #cbd5e1; font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 6px; flex-shrink: 0; margin-top: -2px; }
.fb-del:hover { background: #fef2f2; color: #ef4444; }
#comment-modal { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(15,23,42,0.4); backdrop-filter: blur(4px); align-items: center; justify-content: center; }
#comment-modal.open { display: flex; }
#comment-card { background: white; border-radius: 16px; padding: 24px; width: 420px; max-width: 92vw; box-shadow: 0 20px 60px rgba(0,0,0,0.2); animation: pop .15s ease; }
.comment-card-hdr { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.comment-node-badge { font-size: 12px; font-weight: 700; color: #4f46e5; background: #ede9fe; padding: 3px 10px; border-radius: 6px; display: inline-block; margin-bottom: 4px; }
.comment-card-title { font-size: 15px; font-weight: 800; color: #0f172a; }
.comment-card-sub { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.comment-x { background: none; border: none; color: #94a3b8; font-size: 20px; cursor: pointer; padding: 0 4px; line-height: 1; border-radius: 6px; }
.comment-x:hover { background: #f1f5f9; color: #0f172a; }
#comment-text { width: 100%; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; font-size: 13px; font-family: inherit; resize: vertical; outline: none; color: #0f172a; transition: border-color .12s; }
#comment-text:focus { border-color: #a5b4fc; }
.comment-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.btn-secondary { padding: 8px 16px; border-radius: 8px; border: 1px solid #e2e8f0; background: white; font-size: 13px; font-weight: 600; color: #64748b; cursor: pointer; }
.btn-secondary:hover { background: #f8fafc; }
.btn-primary { padding: 8px 18px; border-radius: 8px; border: none; background: #4f46e5; color: white; font-size: 13px; font-weight: 700; cursor: pointer; }
.btn-primary:hover { background: #4338ca; }
#prompt-modal { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(15,23,42,0.5); backdrop-filter: blur(6px); align-items: flex-start; justify-content: center; padding: 30px 20px; overflow-y: auto; }
#prompt-modal.open { display: flex; }
#prompt-card { background: #0f172a; border-radius: 18px; padding: 0; width: 760px; max-width: 96vw; box-shadow: 0 30px 80px rgba(0,0,0,0.4); animation: pop .18s ease; flex-shrink: 0; }
.prompt-card-hdr { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.prompt-card-title { font-size: 16px; font-weight: 800; color: white; }
.prompt-card-sub { font-size: 11px; color: #64748b; margin-top: 2px; }
.prompt-hdr-btns { display: flex; gap: 8px; align-items: center; }
.btn-copy-all { padding: 7px 14px; border-radius: 8px; border: none; background: #4f46e5; color: white; font-size: 12px; font-weight: 700; cursor: pointer; }
.btn-copy-all:hover { background: #4338ca; }
.prompt-x { background: none; border: none; color: #64748b; font-size: 20px; cursor: pointer; padding: 0 4px; line-height: 1; border-radius: 6px; }
.prompt-x:hover { color: white; }
.prompt-list { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
.prompt-block { background: #1e293b; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.07); }
.prompt-block-hdr { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #334155; border-bottom: 1px solid rgba(255,255,255,0.07); }
.prompt-block-label { font-size: 12px; font-weight: 700; color: #e2e8f0; }
.prompt-block-meta { font-size: 10px; color: #94a3b8; }
.btn-copy { padding: 4px 12px; border-radius: 6px; border: none; background: rgba(255,255,255,0.1); color: #e2e8f0; font-size: 11px; font-weight: 600; cursor: pointer; }
.btn-copy:hover { background: rgba(255,255,255,0.18); }
.prompt-text { padding: 16px; font-size: 12px; font-family: ui-monospace, monospace; color: #94a3b8; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.prompt-text .hi { color: #e2e8f0; font-weight: 600; }
.prompt-text .issue { color: #fbbf24; }
.prompt-text .file { color: #6ee7b7; }
#modal { display: none; position: fixed; inset: 0; z-index: 400; background: rgba(15,23,42,0.45); backdrop-filter: blur(6px); align-items: center; justify-content: center; }
#modal.open { display: flex; }
#card { background: #fff; border-radius: 18px; padding: 0; width: 520px; max-width: 92vw; max-height: 82vh; overflow-y: auto; box-shadow: 0 24px 80px rgba(0,0,0,0.22); animation: pop .18s ease; }
@keyframes pop { from { transform:scale(.93);opacity:0 } to { transform:scale(1);opacity:1 } }
.card-head { padding: 22px 22px 16px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: flex-start; gap: 12px; }
.card-icon { font-size: 32px; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.card-text { flex: 1; }
.card-title { font-size: 18px; font-weight: 800; color: #0f172a; line-height: 1.2; }
.card-sub { font-size: 11px; color: #94a3b8; margin-top: 3px; }
.card-close { background: none; border: none; color: #94a3b8; font-size: 22px; cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 6px; flex-shrink: 0; }
.card-close:hover { background: #f1f5f9; color: #0f172a; }
.card-body { padding: 18px 22px 22px; }
.card-flag { margin: 0 22px 16px; padding: 8px 12px; border-radius: 8px; border: 1px solid #e2e8f0; background: #f8fafc; display: flex; align-items: center; justify-content: space-between; }
.card-flag-txt { font-size: 11px; color: #94a3b8; }
.card-flag-btn { padding: 4px 12px; border-radius: 6px; border: 1px solid #e2e8f0; background: white; font-size: 11px; font-weight: 600; color: #64748b; cursor: pointer; }
.card-flag-btn:hover { background: #fef2f2; border-color: #fca5a5; color: #ef4444; }
.step { display: flex; gap: 12px; margin-bottom: 10px; padding: 12px; background: #f8fafc; border-radius: 10px; border: 1px solid #e2e8f0; }
.step-ic { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.step-title { font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 3px; }
.step-desc { font-size: 11px; color: #64748b; line-height: 1.6; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 20px; font-size: 10px; font-weight: 600; margin: 1px 2px 0; }
.svc { background: #ede9fe; color: #5b21b6; }
.out { background: #dcfce7; color: #166534; }
.fil { background: #f0fdf4; color: #166534; font-family: monospace; font-size: 9px; }
.wrn { background: #fef3c7; color: #92400e; }
</style>
</head>
<body>
<div id="tabbar">
<span class="logo">[LOGO_EMOJI] [COMPANY_NAME]</span>
<button class="tab-btn active" Workflow Map</button>
<button class="tab-btn" Schedule</button>
<button class="tab-btn" Feedback <span class="fb-badge" id="fb-badge"></span></button>
</div>
<!-- MAP VIEW -->
<div id="map-view" class="view active">
<svg id="svg" viewBox="0 0 1440 900" width="1440" height="900" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="dots" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
<circle cx="1.5" cy="1.5" r="1.2" fill="#cbd5e1" opacity="0.55"/>
</pattern>
<filter id="sh"><feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#00000018"/></filter>
<marker id="arr" markerWidth="7" markerHeight="5" refX="5" refY="2.5" orient="auto">
<polygon points="0 0,7 2.5,0 5" fill="#94a3b8"/>
</marker>
</defs>
<rect width="1440" height="900" fill="#f8fafc"/>
<rect width="1440" height="900" fill="url(#dots)"/>
<text x="720" y="36" text-anchor="middle" font-size="13" font-weight="700" fill="#1e293b" font-family="-apple-system,sans-serif">[COMPANY_NAME]: Automation Workflow</text>
<text x="720" y="54" text-anchor="middle" font-size="10" fill="#94a3b8" font-family="-apple-system,sans-serif">click any node to explore · hover to flag an issue</text>
<!-- [GENERATE ALL CONNECTOR LINES HERE] -->
<!-- [GENERATE ALL TRIGGER LABELS HERE] -->
<!-- [GENERATE CENTER NODE] -->
<!-- [GENERATE 4 DEPT NODES] -->
<!-- [GENERATE ALL LEAF NODES] -->
<!-- legend -->
<rect x="490" y="848" width="460" height="42" rx="10" fill="white" stroke="#e2e8f0" stroke-width="1"/>
<circle cx="514" cy="864" r="5" fill="#4f46e5"/>
<text x="526" y="868" font-size="9" fill="#64748b" font-family="-apple-system,sans-serif">hub</text>
<circle cx="556" cy="864" r="5" fill="#fef3c7" stroke="#d97706" stroke-width="1.5"/>
<text x="568" y="868" font-size="9" fill="#64748b" font-family="-apple-system,sans-serif">dept</text>
<circle cx="605" cy="864" r="5" fill="#fffbeb" stroke="#fcd34d" stroke-width="1.5"/>
<text x="617" y="868" font-size="9" fill="#64748b" font-family="-apple-system,sans-serif">skill</text>
<text x="720" y="880" text-anchor="middle" font-size="9" fill="#94a3b8" font-family="-apple-system,sans-serif">hover a node → click + to flag an issue · click node to explore · Esc closes any panel</text>
</svg>
</div>
<!-- SCHEDULE VIEW -->
<div id="schedule-view" class="view">
<div class="sched-wrap" id="sched-content"></div>
</div>
<!-- FEEDBACK VIEW -->
<div id="feedback-view" class="view">
<div class="fb-wrap" id="fb-content"></div>
</div>
<!-- COMMENT FORM MODAL -->
<div id="comment-modal"
<div id="comment-card">
<div class="comment-card-hdr">
<div>
<div class="comment-node-badge" id="comment-node-badge"></div>
<div class="comment-card-title">Report an issue</div>
<div class="comment-card-sub">Be specific: what's broken, slow, unclear, or wrong?</div>
</div>
<button class="comment-x"
</div>
<textarea id="comment-text" rows="4" placeholder="Describe the issue or improvement..."></textarea>
<div class="comment-actions">
<button class="btn-secondary"
<button class="btn-primary" Issue</button>
</div>
</div>
</div>
<!-- PROMPT OUTPUT MODAL -->
<div id="prompt-modal"
<div id="prompt-card">
<div class="prompt-card-hdr">
<div>
<div class="prompt-card-title">🛠 Fix Prompts</div>
<div class="prompt-card-sub" id="prompt-card-sub"></div>
</div>
<div class="prompt-hdr-btns">
<button class="btn-copy-all" All</button>
<button class="prompt-x"
</div>
</div>
<div class="prompt-list" id="prompt-list"></div>
</div>
</div>
<!-- DETAIL MODAL -->
<div id="modal"
<div id="card">
<div class="card-head">
<div id="ci" class="card-icon"></div>
<div class="card-text">
<div id="ct" class="card-title"></div>
<div id="cs" class="card-sub"></div>
</div>
<button class="card-close"
</div>
<div class="card-flag">
<span class="card-flag-txt">Something broken or unclear in this skill?</span>
<button class="card-flag-btn" Flag Issue</button>
</div>
<div id="cb" class="card-body"></div>
</div>
</div>
<script>
function switchTab(name) {
document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
document.getElementById(name + '-view').classList.add('active');
event.currentTarget.classList.add('active');
if (name === 'feedback') renderFeedback();
}
// ── SKILL_MAP: update these with your real file paths ─────
// Format: 'node-id': { skill: 'skill-name', files: ['path/to/skill', 'path/to/data'] }
const SKILL_MAP = {
// [GENERATE SKILL_MAP ENTRIES FROM DISCOVERED SKILLS]
// Example:
// 'my-skill': { skill: 'my-skill-name', files: ['~/.claude/skills/my-skill/SKILL.md'] },
};
let _commentTarget = null;
function getComments() {
try { return JSON.parse(localStorage.getItem('system-feedback') || '[]'); } catch { return []; }
}
function saveComments(items) {
localStorage.setItem('system-feedback', JSON.stringify(items));
updateBadge();
}
function updateBadge() {
const n = getComments().length;
const b = document.getElementById('fb-badge');
b.textContent = n || '';
b.style.display = n ? 'inline-block' : 'none';
}
function openComment(nodeId, nodeName, category) {
_commentTarget = { nodeId, nodeName: nodeName.replace(/&/g, '&'), category };
document.getElementById('comment-node-badge').textContent = nodeName.replace(/&/g, '&');
document.getElementById('comment-text').value = '';
document.getElementById('comment-modal').classList.add('open');
setTimeout(() => document.getElementById('comment-text').focus(), 80);
}
function closeComment() {
document.getElementById('comment-modal').classList.remove('open');
_commentTarget = null;
}
function submitComment() {
const txt = document.getElementById('comment-text').value.trim();
if (!txt || !_commentTarget) return;
const items = getComments();
items.push({ id: Date.now().toString(), nodeId: _commentTarget.nodeId, nodeName: _commentTarget.nodeName, category: _commentTarget.category, comment: txt, timestamp: new Date().toISOString() });
saveComments(items);
closeComment();
const b = document.getElementById('fb-badge');
b.style.background = '#22c55e';
setTimeout(() => { b.style.background = ''; }, 800);
}
let _currentModalId = null, _currentModalName = null;
function flagFromModal() {
if (!_currentModalId) return;
closeModal();
const mapping = SKILL_MAP[_currentModalId];
const category = mapping ? mapping.skill : _currentModalId;
openComment(_currentModalId, _currentModalName || _currentModalId, category);
}
function renderFeedback() {
const items = getComments();
const wrap = document.getElementById('fb-content');
const canGenerate = items.length > 0;
let html = `<div class="fb-header"><div><div class="fb-title">💬 Feedback</div><div class="fb-sub">${items.length} issue${items.length !== 1 ? 's' : ''} reported${items.length ? ', ready to generate fix prompts' : ''}</div></div><button class="btn-generate" ${canGenerate ? '' : 'disabled'}>✨ Generate Fix Prompts</button></div>`;
if (items.length === 0) {
html += `<div class="fb-empty"><div class="fb-empty-icon">🐛</div><div class="fb-empty-title">No issues reported yet</div><div class="fb-empty-hint">Hover over any node on the Workflow Map and click the <strong>+</strong> button.<br>Or use the <strong>📝</strong> buttons on the Schedule tab.</div></div>`;
} else {
const groups = {};
for (const item of items) { const g = item.category || 'General'; if (!groups[g]) groups[g] = []; groups[g].push(item); }
for (const [groupName, groupItems] of Object.entries(groups)) {
html += `<div class="fb-group-hdr">${groupName}</div>`;
for (const item of groupItems) {
html += `<div class="fb-card"><div class="fb-card-left"><div class="fb-node-name">${item.nodeName}</div><div class="fb-cat">${SKILL_MAP[item.nodeId] ? SKILL_MAP[item.nodeId].skill : item.category}</div><div class="fb-comment">${item.comment.replace(/</g,'<').replace(/>/g,'>')}</div><div class="fb-time">Submitted ${timeAgo(item.timestamp)}</div></div><button class="fb-del" title="Delete">×</button></div>`;
}
}
}
wrap.innerHTML = html;
}
function deleteComment(id) { saveComments(getComments().filter(i => i.id !== id)); renderFeedback(); }
function timeAgo(iso) {
const diff = Date.now() - new Date(iso).getTime(), m = Math.floor(diff / 60000);
if (m < 1) return 'just now'; if (m < 60) return `${m} min ago`;
const h = Math.floor(m / 60); if (h < 24) return `${h}h ago`; return `${Math.floor(h/24)}d ago`;
}
let _allPromptsText = '';
function generatePrompts() {
const items = getComments(); if (!items.length) return;
const groups = {};
for (const item of items) {
const mapping = SKILL_MAP[item.nodeId] || { skill: item.category || 'general', files: [] };
const key = mapping.skill;
if (!groups[key]) groups[key] = { skill: mapping.skill, filesSet: new Set(mapping.files), items: [] };
mapping.files.forEach(f => groups[key].filesSet.add(f));
groups[key].items.push(item);
}
const groupList = Object.values(groups);
let allText = '', html = '';
groupList.forEach((g, i) => {
const fileLines = Array.from(g.filesSet).map(f => ` • ${f}`).join('\n');
const issueLines = g.items.map(it => ` • [${it.nodeName}] ${it.comment}`).join('\n');
const promptText = `Working directory: [YOUR_PROJECT_DIR]\n\nSkill(s): ${g.skill}\n\nFiles to review:\n${fileLines}\n\nIssues to fix:\n${issueLines}\n\nRead each file above, identify the root cause of every reported issue, fix the code, and output a brief summary of what you changed and why.`;
allText += `\n\n${'─'.repeat(60)}\nPROMPT ${i+1} / ${groupList.length} · ${g.skill}\n${'─'.repeat(60)}\n\n${promptText}`;
html += `<div class="prompt-block"><div class="prompt-block-hdr"><div><div class="prompt-block-label">Prompt ${i+1} / ${groupList.length} · ${g.skill}</div><div class="prompt-block-meta">${g.items.length} issue${g.items.length!==1?'s':''} · ${g.filesSet.size} file${g.filesSet.size!==1?'s':''}</div></div><button class="btn-copy" class="prompt-text">${formatPromptHtml(promptText)}</div></div>`;
});
_allPromptsText = allText.trim();
document.getElementById('prompt-card-sub').textContent = `${groupList.length} prompt${groupList.length!==1?'s':''} · ${items.length} total issue${items.length!==1?'s':''}`;
document.getElementById('prompt-list').innerHTML = html;
document.getElementById('prompt-modal').classList.add('open');
}
function formatPromptHtml(text) {
return text.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>')
.replace(/(Working directory:|Skill\(s\):|Files to review:|Issues to fix:|Read each file.*)/g, '<span class="hi">$1</span>')
.replace(/( • ~[^\n]+)/g, '<span class="file">$1</span>')
.replace(/( • \[[^\]]+\][^\n]*)/g, '<span class="issue">$1</span>');
}
function copyPrompt(idx) {
const blocks = document.querySelectorAll('.prompt-text');
if (blocks[idx]) { navigator.clipboard.writeText(blocks[idx].innerText).then(() => { const btn = document.querySelectorAll('.btn-copy')[idx]; btn.textContent = 'Copied!'; setTimeout(() => btn.textContent = 'Copy', 1500); }); }
}
function copyAllPrompts() {
navigator.clipboard.writeText(_allPromptsText).then(() => { const btn = document.querySelector('.btn-copy-all'); btn.textContent = 'Copied!'; setTimeout(() => btn.textContent = 'Copy All', 1500); });
}
function closePrompts() { document.getElementById('prompt-modal').classList.remove('open'); }
// ── SCHEDULE DATA: fill in your tasks ────────────────────
// Each section groups tasks by trigger type.
// Fields: id, icon, name, dept, deptClass, type, typeClass, time, freq, days, desc, trig
const SCHED = [
// [GENERATE SCHED SECTIONS FROM DISCOVERED SKILLS]
// Example auto-scheduler section:
// { section: '⏱ Auto-Scheduled', items: [
// { id:'my-skill', icon:'⏰', name:'My Skill', dept:'Auto-Scheduler', deptClass:'bd-dept-auto',
// type:'⏱ auto', typeClass:'bd-auto', time:'8:00 AM', freq:'Once daily', days:'Mon–Fri',
// desc:'What this skill does.', trig:'cloud routine trig_01... (or LaunchAgent com.<yourname>....)' },
// ]},
];
function buildSchedule() {
const wrap = document.getElementById('sched-content');
const allItems = SCHED.flatMap(s => s.items);
const auto = allItems.filter(i => i.typeClass === 'bd-auto').length;
const ext = allItems.filter(i => i.typeClass === 'bd-external').length;
const man = allItems.filter(i => i.typeClass === 'bd-manual').length;
const que = allItems.filter(i => i.typeClass === 'bd-queued').length;
let html = `<div class="sched-pg-title">📅 Schedule</div>
<div class="sched-pg-sub">Every task in the system. When it fires, how often, and what triggers it.</div>
<div class="sched-summary">
${auto ? `<span class="sched-sum-pill bd-auto">${auto} auto-scheduled</span>` : ''}
${ext ? `<span class="sched-sum-pill bd-external">${ext} external trigger${ext!==1?'s':''}</span>` : ''}
${man ? `<span class="sched-sum-pill bd-manual">${man} manual</span>` : ''}
${que ? `<span class="sched-sum-pill bd-queued">${que} queued</span>` : ''}
</div>`;
for (const section of SCHED) {
html += `<div class="sched-sec-hdr">${section.section}</div>`;
for (const t of section.items) {
html += `<div class="sched-row">
<div class="sched-icon">${t.icon}</div>
<div class="sched-info">
<div class="sched-name">${t.name}</div>
<div class="sched-desc">${t.desc}</div>
<div class="sched-trig">${t.trig}</div>
</div>
<div class="sched-mid">
<span class="sbadge ${t.deptClass}">${t.dept}</span>
<span class="sbadge ${t.typeClass}">${t.type}</span>
</div>
<div class="sched-timing">
<div class="sched-time-main">${t.time}</div>
<div class="sched-time-freq">${t.freq}</div>
<div class="sched-time-days">${t.days}</div>
</div>
<button class="sched-cmt-btn" title="Flag issue">📝</button>
</div>`;
}
}
wrap.innerHTML = html;
}
buildSchedule();
updateBadge();
// ── DETAIL MODAL DATA ─────────────────────────────────────
// One entry per node id. icon, title, sub, body (HTML using .step/.step-ic/.step-title/.step-desc/.pill classes)
const M = {
// [GENERATE MODAL ENTRIES FROM DISCOVERED SKILLS]
// Example:
// 'my-skill': { icon: '⚙️', title: 'My Skill', sub: 'What it does in one line',
// body: `<div class="step"><div class="step-ic">1️⃣</div><div><div class="step-title">Step one</div><div class="step-desc">Detail here.<br><span class="pill svc">External Service</span></div></div></div>` },
};
function showModal(id) {
const d = M[id]; if (!d) return;
_currentModalId = id; _currentModalName = d.title;
document.getElementById('ci').textContent = d.icon;
document.getElementById('ct').textContent = d.title;
document.getElementById('cs').textContent = d.sub;
document.getElementById('cb').innerHTML = d.body;
document.getElementById('modal').classList.add('open');
}
function closeModal() { document.getElementById('modal').classList.remove('open'); }
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') { closeModal(); closeComment(); closePrompts(); }
});
updateBadge();
</script>
</body>
</html>
SVG layout reference: flexible by dept count
viewBox="0 0 1440 900". Center hub at x=618 y=420 w=204 h=80 rx=18 (indigo #4f46e5, white text). Center point: 720,460.
First, count your departments. Then pick the matching layout:
1 department
Single dept centered below the hub.
- Dept: x=560 y=600 w=200 h=52
- Leaves: spread horizontally below dept, x=360/530/700/870 y=720 (up to 4), or stack vertically
2 departments
One on each side, vertically centered with the hub.
- Left dept: x=280 y=434
- Right dept: x=980 y=434
- Leaves left: x=70 y=(dept_cy - N*38 + 19)… stacked, spacing 76px
- Leaves right: x=1195 y=same pattern
- Connectors: left dept right edge → center left edge (618,460); right dept left edge → center right edge (822,460)
3 departments
Two on top, one on the bottom.
- Top-left dept: x=290 y=230
- Top-right dept: x=990 y=230
- Bottom-center dept: x=560 y=660 w=200
- Leaves top-left: x=80, stacked y=130,210,290,370
- Leaves top-right: x=1205, stacked y=130,200,270,340,410
- Leaves bottom: x=380,540,700,860 y=780 (horizontal row below dept)
- Connectors: top-left right edge → center left (618,440); top-right left edge → center right (822,440); bottom-center top edge → center bottom (720,500)
4 departments (the default)
Two on each side.
- Top-left: x=290 y=250
- Top-right: x=990 y=250
- Bottom-left: x=290 y=618
- Bottom-right: x=990 y=618
- Leaves top-left: x=80 y=150,250,350,450
- Leaves top-right: x=1205 y=132,202,272,342,412
- Leaves bottom-left: x=80 y=528,608,688,768
- Leaves bottom-right: x=1205 y=528,608,688
- Connectors: top depts → center sides at y≈440; bottom depts → center sides at y≈470
5 departments
Two top, two bottom, one center-right (or center-left).
- Top-left: x=290 y=160
- Top-right: x=990 y=160
- Center-left: x=100 y=440 w=170 (smaller dept)
- Bottom-left: x=290 y=700
- Bottom-right: x=990 y=700
- Leaves top-left: x=80 y=60,140,220 (3 max, tight)
- Leaves top-right: x=1205 y=60,130,200,270
- Leaves center-left: x=-30… shift left, use x=0 for leaves, dept at x=190
- Dept: x=190 y=434; leaves: x=10 y=380,460,540
- Leaves bottom-left: x=80 y=780,840 (2–3, tight)
- Leaves bottom-right: x=1205 y=780,840
- Adjust viewBox to "0 0 1440 950" if content reaches near bottom
6 departments
Three on each side, stacked vertically.
- Left-top: x=290 y=140
- Left-mid: x=290 y=390
- Left-bot: x=290 y=640
- Right-top: x=990 y=140
- Right-mid: x=990 y=390
- Right-bot: x=990 y=640
- Leaves left-top: x=80 y=80,150,220
- Leaves left-mid: x=80 y=340,410,480
- Leaves left-bot: x=80 y=580,650,720,790
- Leaves right-top: x=1205 y=80,150,220
- Leaves right-mid: x=1205 y=340,410,480
- Leaves right-bot: x=1205 y=580,650,720
- Connectors: each dept's edge nearest center connects to center hub edge, roughly at the dept's vertical midpoint
7 departments
Three left, three right, one bottom-center.
- Left 3: x=290 y=140/370/600
- Right 3: x=990 y=140/370/600
- Bottom-center: x=560 y=760 w=200
- Leaves: same pattern as 6-dept but compress vertical spacing to 60px per leaf
- Bottom dept leaves: 2–3 nodes spread horizontally below it
- Use viewBox="0 0 1440 980"
8 departments
Four on each side.
- Left: x=290 y=110/290/480/670
- Right: x=990 y=110/290/480/670
- Each dept gets max 2–3 leaf nodes (space is tight)
- Compress leaf spacing to 55px
- Use viewBox="0 0 1440 980"
- Consider reducing leaf node height to 40 (rx=8) to fit
Node dimensions
| Node type |
width |
height |
rx |
font-size title |
font-size sub |
| Center hub |
204 |
80 |
18 |
17 |
10 |
| Dept node |
160 |
52 |
13 |
13 |
9.5 |
| Leaf node |
155 |
46 |
10 |
11 |
9 |
For 7–8 depts with many leaves, shrink leaf to w=145 h=40 rx=8.
Department color palette
Assign colors in this order (reuse if >8 depts):
- Amber: fill=#fef3c7 stroke=#d97706 text=#78350f sub=#a16207, leaf fill=#fffbeb leaf-stroke=#fcd34d leaf-text=#78350f leaf-sub=#a16207
- Green: fill=#d1fae5 stroke=#059669 text=#064e3b sub=#065f46, leaf fill=#ecfdf5 leaf-stroke=#6ee7b7 leaf-text=#064e3b leaf-sub=#047857
- Pink: fill=#fce7f3 stroke=#db2777 text=#831843 sub=#9d174d, leaf fill=#fff1f2 leaf-stroke=#fca5a5 leaf-text=#9f1239 leaf-sub=#be123c
- Blue: fill=#e0f2fe stroke=#0284c7 text=#0c4a6e sub=#075985, leaf fill=#f0f9ff leaf-stroke=#7dd3fc leaf-text=#0c4a6e leaf-sub=#0369a1
- Violet: fill=#ede9fe stroke=#7c3aed text=#3b0764 sub=#5b21b6, leaf fill=#f5f3ff leaf-stroke=#c4b5fd leaf-text=#3b0764 leaf-sub=#6d28d9
- Orange: fill=#ffedd5 stroke=#ea580c text=#431407 sub=#9a3412, leaf fill=#fff7ed leaf-stroke=#fdba74 leaf-text=#431407 leaf-sub=#c2410c
- Teal: fill=#ccfbf1 stroke=#0d9488 text=#042f2e sub=#0f766e, leaf fill=#f0fdfa leaf-stroke=#5eead4 leaf-text=#042f2e leaf-sub=#0f766e
- Rose: fill=#ffe4e6 stroke=#e11d48 text=#4c0519 sub=#881337, leaf fill=#fff1f2 leaf-stroke=#fda4af leaf-text=#4c0519 leaf-sub=#be123c
Connector rules
Dept → center (stroke=#cbd5e1 stroke-width=2.5 stroke-linecap=round):
- Left-side dept: connect dept's right edge midpoint → center's left edge (x=618) at matching y
- Right-side dept: connect dept's left edge midpoint → center's right edge (x=822) at matching y
- Bottom-center dept: connect dept's top edge midpoint → center's bottom edge (y=500) at x=720
- For 6+ depts on same side: connect to the center edge at the dept's own vertical midpoint
Leaf → dept (stroke = dept's stroke color, stroke-width=1.8 stroke-linecap=round):
- Left-column leaves: leaf right edge (x=235) → dept left edge (x=290) at leaf's cy
- Right-column leaves: leaf left edge (x=1205) → dept right edge (x=1150) at leaf's cy
- Bottom-row leaves: leaf top edge → dept bottom edge
Comment + button on every node
Every <g class="dept-node">, <g class="leaf-node">, and <g class="center-node"> must have a nested <g class="comment-btn"> as its last child:
<g class="comment-btn" Name','Dept Name')">
<circle cx="[rect.x + rect.width - 5]" cy="[rect.y + 9]" r="9" fill="white" stroke="[dept-stroke-color]" stroke-width="1.5"/>
<text x="[same cx]" y="[cy+4]" text-anchor="middle" font-size="12" fill="[dept-text-color]" font-weight="700">+</text>
</g>
The cx = node rect x + node rect width − 5 (places it at the right edge of the rect). The cy = node rect y + 9.
Quality checklist before writing the file
…(truncated)
1---2name: generate-system-map3description: generate-system-map4---56# generate-system-map78Generates a personalized automation workflow map: a standalone HTML microsite with an interactive SVG mind map, schedule tab, and a feedback/issue-flagging system that outputs copy-ready fix prompts.910## What gets produced1112A single `system-map.html` file. Open it in any browser, no server needed. Three tabs:13- **Workflow Map**: radial SVG mind map: center hub → dept nodes → leaf skill nodes. Layout auto-adapts: 1–8 departments supported with coordinate tables for each count.14- **Schedule**: table of every task's timing, frequency, and trigger source15- **Feedback**: flag issues on any node, then generate organized fix prompts per skill/file1617## When to run1819Run this when someone on the team wants their own copy of the workflow map customized for their system. The output file can be shared or opened locally.2021---2223## Execution steps2425### 1. Discover the system2627Read these in parallel:28- `~/.claude/skills/`: list all skill directories, then read each `SKILL.md` to understand what each skill does, its trigger type, and any timing info. In each `SKILL.md`, look for the DEPLOYMENT / trigger line that names the skill's `trig_*` routine ID and its timing (e.g. "weekday 8am ET via cloud routine trig_01...").29- `~/.claude/CLAUDE.md` if it exists: project name, company name, system overview30- `~/CLAUDE.md` if it exists: same31- Live cloud routines: load the `RemoteTrigger` tool via ToolSearch (query `select:RemoteTrigger`), then list the live routines to get each one's `trig_*` ID and cron schedule. This is the source of truth for what actually fires and when, cross-check it against the timing each `SKILL.md` claims.32- Local LaunchAgents: run `ls ~/Library/LaunchAgents/com.<yourname>.*` to find any local scheduled agents (e.g. the inventory LaunchAgent). Read each plist for its `StartCalendarInterval` timing and the script it runs.3334### 2. Organize into departments3536Group the discovered skills into departments based on what makes sense for their system. **Do not force exactly 4**, use however many naturally emerge (1–8 is the supported range). Better to have the right number of groups than to artificially merge or split things.3738Grouping heuristics:39- Skills that fire on a timer/server schedule → one scheduler dept40- Skills in the same workflow (review → approve → notify) → one dept41- Skills using the same external service (all Slack skills, all email skills) → consider grouping42- Skills that are sub-skills or helpers called by others → can be a "Utilities" dept or merged into the parent dept4344Each dept should have 1–6 leaf nodes. If a dept would have 7+, split it. If two depts each have 1 skill, consider merging them.4546Identify for each skill:47- **Trigger type**: `auto` (fired by a cloud routine `trig_*` or a local LaunchAgent), `external` (Zapier/webhook), `manual` (user clicks), `queued` (deferred)48- **Timing**: exact time / frequency / days if auto; "on demand" / "real-time" if not49- **Files involved**: skill file path + any data files it reads/writes5051### 3. Ask only if needed5253If after reading all files you cannot determine:54- The company/team name → ask: "What's your company or team name for the map title?"55- The central hub name → ask: "What do you call your main dashboard or control panel?"56- How to group a skill → make a reasonable call and note it in the generated file as a comment5758Do NOT ask for info you can derive from reading files.5960### 4. Determine output path6162If the user specified a path (e.g. `--path ~/Desktop/system-map.html`), use that. 63Otherwise write to `./system-map.html` in the current working directory.6465### 5. Generate the HTML6667Write a complete `system-map.html` using the template below, substituting all `[PLACEHOLDER]` values with the real discovered content.6869---7071## HTML template7273The full file structure to generate. Replace every `[PLACEHOLDER]` with real content. Keep all CSS, JS logic, and modal infrastructure exactly as-is, only change data/content.7475```html76<!DOCTYPE html>77<html lang="en">78<head>79<meta charset="UTF-8">80<title>[COMPANY_NAME]: Workflow Map</title>81<style>82* { box-sizing: border-box; margin: 0; padding: 0; }83html, body { width: 100%; height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f8fafc; overflow: hidden; }84#tabbar { position: fixed; top: 0; left: 0; right: 0; height: 46px; z-index: 300; background: white; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; padding: 0 20px; gap: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }85.logo { font-size: 13px; font-weight: 800; color: #0f172a; margin-right: 10px; }86.tab-btn { padding: 6px 14px; border-radius: 8px; border: none; background: none; font-size: 13px; font-weight: 600; color: #64748b; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: background .1s, color .1s; }87.tab-btn:hover { background: #f1f5f9; color: #0f172a; }88.tab-btn.active { background: #4f46e5; color: white; }89.fb-badge { display: none; background: #ef4444; color: white; font-size: 10px; font-weight: 700; border-radius: 10px; padding: 1px 6px; line-height: 1.4; }90.tab-btn.active .fb-badge { background: rgba(255,255,255,0.3); }91.view { display: none; position: fixed; top: 46px; left: 0; right: 0; bottom: 0; }92.view.active { display: block; }93#map-view { overflow: auto; cursor: grab; user-select: none; }94#map-view:active { cursor: grabbing; }95#schedule-view, #feedback-view { overflow-y: auto; background: #f8fafc; }96svg { display: block; }97.dept-node, .leaf-node, .center-node { cursor: pointer; }98.dept-node rect, .leaf-node rect { transition: filter 0.15s; }99.dept-node:hover rect, .leaf-node:hover rect { filter: brightness(0.93) drop-shadow(0 3px 8px rgba(0,0,0,0.15)); }100.center-node:hover rect { filter: brightness(1.08) drop-shadow(0 4px 12px rgba(79,70,229,0.4)); }101.comment-btn { opacity: 0; transition: opacity .15s; cursor: pointer; }102.dept-node:hover .comment-btn, .leaf-node:hover .comment-btn, .center-node:hover .comment-btn { opacity: 1; }103.comment-btn circle { transition: fill .12s; }104.comment-btn:hover circle { fill: #e0e7ff !important; }105.sched-wrap { max-width: 860px; margin: 0 auto; padding: 32px 24px 80px; }106.sched-pg-title { font-size: 20px; font-weight: 800; color: #0f172a; margin-bottom: 4px; }107.sched-pg-sub { font-size: 13px; color: #64748b; margin-bottom: 16px; }108.sched-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }109.sched-sum-pill { padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; }110.sched-sec-hdr { font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #94a3b8; margin: 28px 0 10px 2px; }111.sched-row { background: white; border-radius: 12px; border: 1px solid #e2e8f0; padding: 14px 18px; margin-bottom: 8px; display: flex; align-items: center; gap: 14px; transition: border-color .12s, box-shadow .12s; }112.sched-row:hover { border-color: #c7d2fe; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }113.sched-icon { font-size: 22px; flex-shrink: 0; width: 34px; text-align: center; }114.sched-info { flex: 1; min-width: 0; }115.sched-name { font-size: 14px; font-weight: 700; color: #0f172a; }116.sched-desc { font-size: 11px; color: #64748b; margin-top: 2px; line-height: 1.5; }117.sched-trig { font-size: 10px; color: #b0bec5; margin-top: 5px; font-family: ui-monospace, monospace; }118.sched-mid { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }119.sbadge { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: 10px; font-weight: 600; white-space: nowrap; }120.bd-auto { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }121.bd-external { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }122.bd-manual { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }123.bd-queued { background: #ede9fe; color: #5b21b6; border: 1px solid #ddd6fe; }124.bd-subskill { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }125.sched-timing { flex-shrink: 0; width: 165px; text-align: right; }126.sched-time-main { font-size: 13px; font-weight: 700; color: #0f172a; line-height: 1.3; }127.sched-time-freq { font-size: 10px; color: #64748b; margin-top: 3px; }128.sched-time-days { font-size: 10px; color: #94a3b8; margin-top: 1px; }129.sched-cmt-btn { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; border: 1px solid #e2e8f0; background: white; color: #94a3b8; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .12s; }130.sched-cmt-btn:hover { background: #ede9fe; border-color: #a5b4fc; color: #4f46e5; }131.fb-wrap { max-width: 860px; margin: 0 auto; padding: 32px 24px 80px; }132.fb-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }133.fb-title { font-size: 20px; font-weight: 800; color: #0f172a; }134.fb-sub { font-size: 13px; color: #64748b; margin-top: 2px; }135.btn-generate { padding: 10px 20px; border-radius: 10px; border: none; background: #4f46e5; color: white; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .12s; white-space: nowrap; }136.btn-generate:hover { background: #4338ca; }137.btn-generate:disabled { background: #cbd5e1; cursor: default; }138.fb-empty { text-align: center; padding: 60px 20px; color: #94a3b8; border: 2px dashed #e2e8f0; border-radius: 16px; background: white; }139.fb-empty-icon { font-size: 40px; margin-bottom: 12px; }140.fb-empty-title { font-size: 15px; font-weight: 700; color: #64748b; margin-bottom: 6px; }141.fb-empty-hint { font-size: 12px; line-height: 1.6; }142.fb-group-hdr { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #94a3b8; margin: 24px 0 8px 2px; }143.fb-card { background: white; border-radius: 12px; border: 1px solid #e2e8f0; padding: 14px 16px; margin-bottom: 8px; display: flex; align-items: flex-start; gap: 12px; }144.fb-card-left { flex: 1; }145.fb-node-name { font-size: 13px; font-weight: 700; color: #0f172a; }146.fb-cat { font-size: 10px; color: #94a3b8; margin-top: 1px; }147.fb-comment { font-size: 12px; color: #374151; margin-top: 8px; line-height: 1.6; background: #f8fafc; border-radius: 8px; padding: 8px 10px; border: 1px solid #f1f5f9; }148.fb-time { font-size: 10px; color: #94a3b8; margin-top: 6px; }149.fb-del { background: none; border: none; color: #cbd5e1; font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 6px; flex-shrink: 0; margin-top: -2px; }150.fb-del:hover { background: #fef2f2; color: #ef4444; }151#comment-modal { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(15,23,42,0.4); backdrop-filter: blur(4px); align-items: center; justify-content: center; }152#comment-modal.open { display: flex; }153#comment-card { background: white; border-radius: 16px; padding: 24px; width: 420px; max-width: 92vw; box-shadow: 0 20px 60px rgba(0,0,0,0.2); animation: pop .15s ease; }154.comment-card-hdr { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }155.comment-node-badge { font-size: 12px; font-weight: 700; color: #4f46e5; background: #ede9fe; padding: 3px 10px; border-radius: 6px; display: inline-block; margin-bottom: 4px; }156.comment-card-title { font-size: 15px; font-weight: 800; color: #0f172a; }157.comment-card-sub { font-size: 11px; color: #94a3b8; margin-top: 2px; }158.comment-x { background: none; border: none; color: #94a3b8; font-size: 20px; cursor: pointer; padding: 0 4px; line-height: 1; border-radius: 6px; }159.comment-x:hover { background: #f1f5f9; color: #0f172a; }160#comment-text { width: 100%; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; font-size: 13px; font-family: inherit; resize: vertical; outline: none; color: #0f172a; transition: border-color .12s; }161#comment-text:focus { border-color: #a5b4fc; }162.comment-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }163.btn-secondary { padding: 8px 16px; border-radius: 8px; border: 1px solid #e2e8f0; background: white; font-size: 13px; font-weight: 600; color: #64748b; cursor: pointer; }164.btn-secondary:hover { background: #f8fafc; }165.btn-primary { padding: 8px 18px; border-radius: 8px; border: none; background: #4f46e5; color: white; font-size: 13px; font-weight: 700; cursor: pointer; }166.btn-primary:hover { background: #4338ca; }167#prompt-modal { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(15,23,42,0.5); backdrop-filter: blur(6px); align-items: flex-start; justify-content: center; padding: 30px 20px; overflow-y: auto; }168#prompt-modal.open { display: flex; }169#prompt-card { background: #0f172a; border-radius: 18px; padding: 0; width: 760px; max-width: 96vw; box-shadow: 0 30px 80px rgba(0,0,0,0.4); animation: pop .18s ease; flex-shrink: 0; }170.prompt-card-hdr { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }171.prompt-card-title { font-size: 16px; font-weight: 800; color: white; }172.prompt-card-sub { font-size: 11px; color: #64748b; margin-top: 2px; }173.prompt-hdr-btns { display: flex; gap: 8px; align-items: center; }174.btn-copy-all { padding: 7px 14px; border-radius: 8px; border: none; background: #4f46e5; color: white; font-size: 12px; font-weight: 700; cursor: pointer; }175.btn-copy-all:hover { background: #4338ca; }176.prompt-x { background: none; border: none; color: #64748b; font-size: 20px; cursor: pointer; padding: 0 4px; line-height: 1; border-radius: 6px; }177.prompt-x:hover { color: white; }178.prompt-list { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 16px; }179.prompt-block { background: #1e293b; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.07); }180.prompt-block-hdr { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #334155; border-bottom: 1px solid rgba(255,255,255,0.07); }181.prompt-block-label { font-size: 12px; font-weight: 700; color: #e2e8f0; }182.prompt-block-meta { font-size: 10px; color: #94a3b8; }183.btn-copy { padding: 4px 12px; border-radius: 6px; border: none; background: rgba(255,255,255,0.1); color: #e2e8f0; font-size: 11px; font-weight: 600; cursor: pointer; }184.btn-copy:hover { background: rgba(255,255,255,0.18); }185.prompt-text { padding: 16px; font-size: 12px; font-family: ui-monospace, monospace; color: #94a3b8; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }186.prompt-text .hi { color: #e2e8f0; font-weight: 600; }187.prompt-text .issue { color: #fbbf24; }188.prompt-text .file { color: #6ee7b7; }189#modal { display: none; position: fixed; inset: 0; z-index: 400; background: rgba(15,23,42,0.45); backdrop-filter: blur(6px); align-items: center; justify-content: center; }190#modal.open { display: flex; }191#card { background: #fff; border-radius: 18px; padding: 0; width: 520px; max-width: 92vw; max-height: 82vh; overflow-y: auto; box-shadow: 0 24px 80px rgba(0,0,0,0.22); animation: pop .18s ease; }192@keyframes pop { from { transform:scale(.93);opacity:0 } to { transform:scale(1);opacity:1 } }193.card-head { padding: 22px 22px 16px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: flex-start; gap: 12px; }194.card-icon { font-size: 32px; line-height: 1; flex-shrink: 0; margin-top: 2px; }195.card-text { flex: 1; }196.card-title { font-size: 18px; font-weight: 800; color: #0f172a; line-height: 1.2; }197.card-sub { font-size: 11px; color: #94a3b8; margin-top: 3px; }198.card-close { background: none; border: none; color: #94a3b8; font-size: 22px; cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 6px; flex-shrink: 0; }199.card-close:hover { background: #f1f5f9; color: #0f172a; }200.card-body { padding: 18px 22px 22px; }201.card-flag { margin: 0 22px 16px; padding: 8px 12px; border-radius: 8px; border: 1px solid #e2e8f0; background: #f8fafc; display: flex; align-items: center; justify-content: space-between; }202.card-flag-txt { font-size: 11px; color: #94a3b8; }203.card-flag-btn { padding: 4px 12px; border-radius: 6px; border: 1px solid #e2e8f0; background: white; font-size: 11px; font-weight: 600; color: #64748b; cursor: pointer; }204.card-flag-btn:hover { background: #fef2f2; border-color: #fca5a5; color: #ef4444; }205.step { display: flex; gap: 12px; margin-bottom: 10px; padding: 12px; background: #f8fafc; border-radius: 10px; border: 1px solid #e2e8f0; }206.step-ic { font-size: 20px; flex-shrink: 0; margin-top: 1px; }207.step-title { font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 3px; }208.step-desc { font-size: 11px; color: #64748b; line-height: 1.6; }209.pill { display: inline-block; padding: 1px 8px; border-radius: 20px; font-size: 10px; font-weight: 600; margin: 1px 2px 0; }210.svc { background: #ede9fe; color: #5b21b6; }211.out { background: #dcfce7; color: #166534; }212.fil { background: #f0fdf4; color: #166534; font-family: monospace; font-size: 9px; }213.wrn { background: #fef3c7; color: #92400e; }214</style>215</head>216<body>217218<div id="tabbar">219 <span class="logo">[LOGO_EMOJI] [COMPANY_NAME]</span>220 <button class="tab-btn active" onclick="switchTab('map')">🗺 Workflow Map</button>221 <button class="tab-btn" onclick="switchTab('schedule')">📅 Schedule</button>222 <button class="tab-btn" onclick="switchTab('feedback')">💬 Feedback <span class="fb-badge" id="fb-badge"></span></button>223</div>224225<!-- MAP VIEW -->226<div id="map-view" class="view active">227<svg id="svg" viewBox="0 0 1440 900" width="1440" height="900" xmlns="http://www.w3.org/2000/svg">228<defs>229 <pattern id="dots" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">230 <circle cx="1.5" cy="1.5" r="1.2" fill="#cbd5e1" opacity="0.55"/>231 </pattern>232 <filter id="sh"><feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#00000018"/></filter>233 <marker id="arr" markerWidth="7" markerHeight="5" refX="5" refY="2.5" orient="auto">234 <polygon points="0 0,7 2.5,0 5" fill="#94a3b8"/>235 </marker>236</defs>237<rect width="1440" height="900" fill="#f8fafc"/>238<rect width="1440" height="900" fill="url(#dots)"/>239<text x="720" y="36" text-anchor="middle" font-size="13" font-weight="700" fill="#1e293b" font-family="-apple-system,sans-serif">[COMPANY_NAME]: Automation Workflow</text>240<text x="720" y="54" text-anchor="middle" font-size="10" fill="#94a3b8" font-family="-apple-system,sans-serif">click any node to explore · hover to flag an issue</text>241242<!-- [GENERATE ALL CONNECTOR LINES HERE] -->243<!-- [GENERATE ALL TRIGGER LABELS HERE] -->244<!-- [GENERATE CENTER NODE] -->245<!-- [GENERATE 4 DEPT NODES] -->246<!-- [GENERATE ALL LEAF NODES] -->247248<!-- legend -->249<rect x="490" y="848" width="460" height="42" rx="10" fill="white" stroke="#e2e8f0" stroke-width="1"/>250<circle cx="514" cy="864" r="5" fill="#4f46e5"/>251<text x="526" y="868" font-size="9" fill="#64748b" font-family="-apple-system,sans-serif">hub</text>252<circle cx="556" cy="864" r="5" fill="#fef3c7" stroke="#d97706" stroke-width="1.5"/>253<text x="568" y="868" font-size="9" fill="#64748b" font-family="-apple-system,sans-serif">dept</text>254<circle cx="605" cy="864" r="5" fill="#fffbeb" stroke="#fcd34d" stroke-width="1.5"/>255<text x="617" y="868" font-size="9" fill="#64748b" font-family="-apple-system,sans-serif">skill</text>256<text x="720" y="880" text-anchor="middle" font-size="9" fill="#94a3b8" font-family="-apple-system,sans-serif">hover a node → click + to flag an issue · click node to explore · Esc closes any panel</text>257</svg>258</div>259260<!-- SCHEDULE VIEW -->261<div id="schedule-view" class="view">262 <div class="sched-wrap" id="sched-content"></div>263</div>264265<!-- FEEDBACK VIEW -->266<div id="feedback-view" class="view">267 <div class="fb-wrap" id="fb-content"></div>268</div>269270<!-- COMMENT FORM MODAL -->271<div id="comment-modal" onclick="if(event.target===this)closeComment()">272 <div id="comment-card">273 <div class="comment-card-hdr">274 <div>275 <div class="comment-node-badge" id="comment-node-badge"></div>276 <div class="comment-card-title">Report an issue</div>277 <div class="comment-card-sub">Be specific: what's broken, slow, unclear, or wrong?</div>278 </div>279 <button class="comment-x" onclick="closeComment()">×</button>280 </div>281 <textarea id="comment-text" rows="4" placeholder="Describe the issue or improvement..."></textarea>282 <div class="comment-actions">283 <button class="btn-secondary" onclick="closeComment()">Cancel</button>284 <button class="btn-primary" onclick="submitComment()">Submit Issue</button>285 </div>286 </div>287</div>288289<!-- PROMPT OUTPUT MODAL -->290<div id="prompt-modal" onclick="if(event.target===this)closePrompts()">291 <div id="prompt-card">292 <div class="prompt-card-hdr">293 <div>294 <div class="prompt-card-title">🛠 Fix Prompts</div>295 <div class="prompt-card-sub" id="prompt-card-sub"></div>296 </div>297 <div class="prompt-hdr-btns">298 <button class="btn-copy-all" onclick="copyAllPrompts()">Copy All</button>299 <button class="prompt-x" onclick="closePrompts()">×</button>300 </div>301 </div>302 <div class="prompt-list" id="prompt-list"></div>303 </div>304</div>305306<!-- DETAIL MODAL -->307<div id="modal" onclick="if(event.target===this)closeModal()">308 <div id="card">309 <div class="card-head">310 <div id="ci" class="card-icon"></div>311 <div class="card-text">312 <div id="ct" class="card-title"></div>313 <div id="cs" class="card-sub"></div>314 </div>315 <button class="card-close" onclick="closeModal()">×</button>316 </div>317 <div class="card-flag">318 <span class="card-flag-txt">Something broken or unclear in this skill?</span>319 <button class="card-flag-btn" onclick="flagFromModal()">🐛 Flag Issue</button>320 </div>321 <div id="cb" class="card-body"></div>322 </div>323</div>324325<script>326function switchTab(name) {327 document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));328 document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));329 document.getElementById(name + '-view').classList.add('active');330 event.currentTarget.classList.add('active');331 if (name === 'feedback') renderFeedback();332}333334// ── SKILL_MAP: update these with your real file paths ─────335// Format: 'node-id': { skill: 'skill-name', files: ['path/to/skill', 'path/to/data'] }336const SKILL_MAP = {337 // [GENERATE SKILL_MAP ENTRIES FROM DISCOVERED SKILLS]338 // Example:339 // 'my-skill': { skill: 'my-skill-name', files: ['~/.claude/skills/my-skill/SKILL.md'] },340};341342let _commentTarget = null;343344function getComments() {345 try { return JSON.parse(localStorage.getItem('system-feedback') || '[]'); } catch { return []; }346}347function saveComments(items) {348 localStorage.setItem('system-feedback', JSON.stringify(items));349 updateBadge();350}351function updateBadge() {352 const n = getComments().length;353 const b = document.getElementById('fb-badge');354 b.textContent = n || '';355 b.style.display = n ? 'inline-block' : 'none';356}357function openComment(nodeId, nodeName, category) {358 _commentTarget = { nodeId, nodeName: nodeName.replace(/&/g, '&'), category };359 document.getElementById('comment-node-badge').textContent = nodeName.replace(/&/g, '&');360 document.getElementById('comment-text').value = '';361 document.getElementById('comment-modal').classList.add('open');362 setTimeout(() => document.getElementById('comment-text').focus(), 80);363}364function closeComment() {365 document.getElementById('comment-modal').classList.remove('open');366 _commentTarget = null;367}368function submitComment() {369 const txt = document.getElementById('comment-text').value.trim();370 if (!txt || !_commentTarget) return;371 const items = getComments();372 items.push({ id: Date.now().toString(), nodeId: _commentTarget.nodeId, nodeName: _commentTarget.nodeName, category: _commentTarget.category, comment: txt, timestamp: new Date().toISOString() });373 saveComments(items);374 closeComment();375 const b = document.getElementById('fb-badge');376 b.style.background = '#22c55e';377 setTimeout(() => { b.style.background = ''; }, 800);378}379380let _currentModalId = null, _currentModalName = null;381function flagFromModal() {382 if (!_currentModalId) return;383 closeModal();384 const mapping = SKILL_MAP[_currentModalId];385 const category = mapping ? mapping.skill : _currentModalId;386 openComment(_currentModalId, _currentModalName || _currentModalId, category);387}388389function renderFeedback() {390 const items = getComments();391 const wrap = document.getElementById('fb-content');392 const canGenerate = items.length > 0;393 let html = `<div class="fb-header"><div><div class="fb-title">💬 Feedback</div><div class="fb-sub">${items.length} issue${items.length !== 1 ? 's' : ''} reported${items.length ? ', ready to generate fix prompts' : ''}</div></div><button class="btn-generate" onclick="generatePrompts()" ${canGenerate ? '' : 'disabled'}>✨ Generate Fix Prompts</button></div>`;394 if (items.length === 0) {395 html += `<div class="fb-empty"><div class="fb-empty-icon">🐛</div><div class="fb-empty-title">No issues reported yet</div><div class="fb-empty-hint">Hover over any node on the Workflow Map and click the <strong>+</strong> button.<br>Or use the <strong>📝</strong> buttons on the Schedule tab.</div></div>`;396 } else {397 const groups = {};398 for (const item of items) { const g = item.category || 'General'; if (!groups[g]) groups[g] = []; groups[g].push(item); }399 for (const [groupName, groupItems] of Object.entries(groups)) {400 html += `<div class="fb-group-hdr">${groupName}</div>`;401 for (const item of groupItems) {402 html += `<div class="fb-card"><div class="fb-card-left"><div class="fb-node-name">${item.nodeName}</div><div class="fb-cat">${SKILL_MAP[item.nodeId] ? SKILL_MAP[item.nodeId].skill : item.category}</div><div class="fb-comment">${item.comment.replace(/</g,'<').replace(/>/g,'>')}</div><div class="fb-time">Submitted ${timeAgo(item.timestamp)}</div></div><button class="fb-del" onclick="deleteComment('${item.id}')" title="Delete">×</button></div>`;403 }404 }405 }406 wrap.innerHTML = html;407}408function deleteComment(id) { saveComments(getComments().filter(i => i.id !== id)); renderFeedback(); }409function timeAgo(iso) {410 const diff = Date.now() - new Date(iso).getTime(), m = Math.floor(diff / 60000);411 if (m < 1) return 'just now'; if (m < 60) return `${m} min ago`;412 const h = Math.floor(m / 60); if (h < 24) return `${h}h ago`; return `${Math.floor(h/24)}d ago`;413}414415let _allPromptsText = '';416function generatePrompts() {417 const items = getComments(); if (!items.length) return;418 const groups = {};419 for (const item of items) {420 const mapping = SKILL_MAP[item.nodeId] || { skill: item.category || 'general', files: [] };421 const key = mapping.skill;422 if (!groups[key]) groups[key] = { skill: mapping.skill, filesSet: new Set(mapping.files), items: [] };423 mapping.files.forEach(f => groups[key].filesSet.add(f));424 groups[key].items.push(item);425 }426 const groupList = Object.values(groups);427 let allText = '', html = '';428 groupList.forEach((g, i) => {429 const fileLines = Array.from(g.filesSet).map(f => ` • ${f}`).join('\n');430 const issueLines = g.items.map(it => ` • [${it.nodeName}] ${it.comment}`).join('\n');431 const promptText = `Working directory: [YOUR_PROJECT_DIR]\n\nSkill(s): ${g.skill}\n\nFiles to review:\n${fileLines}\n\nIssues to fix:\n${issueLines}\n\nRead each file above, identify the root cause of every reported issue, fix the code, and output a brief summary of what you changed and why.`;432 allText += `\n\n${'─'.repeat(60)}\nPROMPT ${i+1} / ${groupList.length} · ${g.skill}\n${'─'.repeat(60)}\n\n${promptText}`;433 html += `<div class="prompt-block"><div class="prompt-block-hdr"><div><div class="prompt-block-label">Prompt ${i+1} / ${groupList.length} · ${g.skill}</div><div class="prompt-block-meta">${g.items.length} issue${g.items.length!==1?'s':''} · ${g.filesSet.size} file${g.filesSet.size!==1?'s':''}</div></div><button class="btn-copy" onclick="copyPrompt(${i})">Copy</button></div><div class="prompt-text">${formatPromptHtml(promptText)}</div></div>`;434 });435 _allPromptsText = allText.trim();436 document.getElementById('prompt-card-sub').textContent = `${groupList.length} prompt${groupList.length!==1?'s':''} · ${items.length} total issue${items.length!==1?'s':''}`;437 document.getElementById('prompt-list').innerHTML = html;438 document.getElementById('prompt-modal').classList.add('open');439}440function formatPromptHtml(text) {441 return text.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>')442 .replace(/(Working directory:|Skill\(s\):|Files to review:|Issues to fix:|Read each file.*)/g, '<span class="hi">$1</span>')443 .replace(/( • ~[^\n]+)/g, '<span class="file">$1</span>')444 .replace(/( • \[[^\]]+\][^\n]*)/g, '<span class="issue">$1</span>');445}446function copyPrompt(idx) {447 const blocks = document.querySelectorAll('.prompt-text');448 if (blocks[idx]) { navigator.clipboard.writeText(blocks[idx].innerText).then(() => { const btn = document.querySelectorAll('.btn-copy')[idx]; btn.textContent = 'Copied!'; setTimeout(() => btn.textContent = 'Copy', 1500); }); }449}450function copyAllPrompts() {451 navigator.clipboard.writeText(_allPromptsText).then(() => { const btn = document.querySelector('.btn-copy-all'); btn.textContent = 'Copied!'; setTimeout(() => btn.textContent = 'Copy All', 1500); });452}453function closePrompts() { document.getElementById('prompt-modal').classList.remove('open'); }454455// ── SCHEDULE DATA: fill in your tasks ────────────────────456// Each section groups tasks by trigger type.457// Fields: id, icon, name, dept, deptClass, type, typeClass, time, freq, days, desc, trig458const SCHED = [459 // [GENERATE SCHED SECTIONS FROM DISCOVERED SKILLS]460 // Example auto-scheduler section:461 // { section: '⏱ Auto-Scheduled', items: [462 // { id:'my-skill', icon:'⏰', name:'My Skill', dept:'Auto-Scheduler', deptClass:'bd-dept-auto',463 // type:'⏱ auto', typeClass:'bd-auto', time:'8:00 AM', freq:'Once daily', days:'Mon–Fri',464 // desc:'What this skill does.', trig:'cloud routine trig_01... (or LaunchAgent com.<yourname>....)' },465 // ]},466];467468function buildSchedule() {469 const wrap = document.getElementById('sched-content');470 const allItems = SCHED.flatMap(s => s.items);471 const auto = allItems.filter(i => i.typeClass === 'bd-auto').length;472 const ext = allItems.filter(i => i.typeClass === 'bd-external').length;473 const man = allItems.filter(i => i.typeClass === 'bd-manual').length;474 const que = allItems.filter(i => i.typeClass === 'bd-queued').length;475 let html = `<div class="sched-pg-title">📅 Schedule</div>476 <div class="sched-pg-sub">Every task in the system. When it fires, how often, and what triggers it.</div>477 <div class="sched-summary">478 ${auto ? `<span class="sched-sum-pill bd-auto">${auto} auto-scheduled</span>` : ''}479 ${ext ? `<span class="sched-sum-pill bd-external">${ext} external trigger${ext!==1?'s':''}</span>` : ''}480 ${man ? `<span class="sched-sum-pill bd-manual">${man} manual</span>` : ''}481 ${que ? `<span class="sched-sum-pill bd-queued">${que} queued</span>` : ''}482 </div>`;483 for (const section of SCHED) {484 html += `<div class="sched-sec-hdr">${section.section}</div>`;485 for (const t of section.items) {486 html += `<div class="sched-row">487 <div class="sched-icon">${t.icon}</div>488 <div class="sched-info">489 <div class="sched-name">${t.name}</div>490 <div class="sched-desc">${t.desc}</div>491 <div class="sched-trig">${t.trig}</div>492 </div>493 <div class="sched-mid">494 <span class="sbadge ${t.deptClass}">${t.dept}</span>495 <span class="sbadge ${t.typeClass}">${t.type}</span>496 </div>497 <div class="sched-timing">498 <div class="sched-time-main">${t.time}</div>499 <div class="sched-time-freq">${t.freq}</div>500 <div class="sched-time-days">${t.days}</div>501 </div>502 <button class="sched-cmt-btn" onclick="openComment('${t.id}','${t.name}','${t.dept}')" title="Flag issue">📝</button>503 </div>`;504 }505 }506 wrap.innerHTML = html;507}508buildSchedule();509updateBadge();510511// ── DETAIL MODAL DATA ─────────────────────────────────────512// One entry per node id. icon, title, sub, body (HTML using .step/.step-ic/.step-title/.step-desc/.pill classes)513const M = {514 // [GENERATE MODAL ENTRIES FROM DISCOVERED SKILLS]515 // Example:516 // 'my-skill': { icon: '⚙️', title: 'My Skill', sub: 'What it does in one line',517 // body: `<div class="step"><div class="step-ic">1️⃣</div><div><div class="step-title">Step one</div><div class="step-desc">Detail here.<br><span class="pill svc">External Service</span></div></div></div>` },518};519520function showModal(id) {521 const d = M[id]; if (!d) return;522 _currentModalId = id; _currentModalName = d.title;523 document.getElementById('ci').textContent = d.icon;524 document.getElementById('ct').textContent = d.title;525 document.getElementById('cs').textContent = d.sub;526 document.getElementById('cb').innerHTML = d.body;527 document.getElementById('modal').classList.add('open');528}529function closeModal() { document.getElementById('modal').classList.remove('open'); }530531document.addEventListener('keydown', function(e) {532 if (e.key === 'Escape') { closeModal(); closeComment(); closePrompts(); }533});534updateBadge();535</script>536</body>537</html>538```539540---541542## SVG layout reference: flexible by dept count543544viewBox="0 0 1440 900". Center hub at x=618 y=420 w=204 h=80 rx=18 (indigo #4f46e5, white text). Center point: 720,460.545546**First, count your departments. Then pick the matching layout:**547548---549550### 1 department551Single dept centered below the hub.552- Dept: x=560 y=600 w=200 h=52553- Leaves: spread horizontally below dept, x=360/530/700/870 y=720 (up to 4), or stack vertically554555---556557### 2 departments558One on each side, vertically centered with the hub.559- Left dept: x=280 y=434560- Right dept: x=980 y=434561- Leaves left: x=70 y=(dept_cy - N*38 + 19)… stacked, spacing 76px562- Leaves right: x=1195 y=same pattern563- Connectors: left dept right edge → center left edge (618,460); right dept left edge → center right edge (822,460)564565---566567### 3 departments568Two on top, one on the bottom.569- Top-left dept: x=290 y=230570- Top-right dept: x=990 y=230571- Bottom-center dept: x=560 y=660 w=200572- Leaves top-left: x=80, stacked y=130,210,290,370573- Leaves top-right: x=1205, stacked y=130,200,270,340,410574- Leaves bottom: x=380,540,700,860 y=780 (horizontal row below dept)575- Connectors: top-left right edge → center left (618,440); top-right left edge → center right (822,440); bottom-center top edge → center bottom (720,500)576577---578579### 4 departments (the default)580Two on each side.581- Top-left: x=290 y=250582- Top-right: x=990 y=250583- Bottom-left: x=290 y=618584- Bottom-right: x=990 y=618585- Leaves top-left: x=80 y=150,250,350,450586- Leaves top-right: x=1205 y=132,202,272,342,412587- Leaves bottom-left: x=80 y=528,608,688,768588- Leaves bottom-right: x=1205 y=528,608,688589- Connectors: top depts → center sides at y≈440; bottom depts → center sides at y≈470590591---592593### 5 departments594Two top, two bottom, one center-right (or center-left).595- Top-left: x=290 y=160596- Top-right: x=990 y=160597- Center-left: x=100 y=440 w=170 (smaller dept)598- Bottom-left: x=290 y=700599- Bottom-right: x=990 y=700600- Leaves top-left: x=80 y=60,140,220 (3 max, tight)601- Leaves top-right: x=1205 y=60,130,200,270602- Leaves center-left: x=-30… shift left, use x=0 for leaves, dept at x=190603 - Dept: x=190 y=434; leaves: x=10 y=380,460,540604- Leaves bottom-left: x=80 y=780,840 (2–3, tight)605- Leaves bottom-right: x=1205 y=780,840606- Adjust viewBox to "0 0 1440 950" if content reaches near bottom607608---609610### 6 departments611Three on each side, stacked vertically.612- Left-top: x=290 y=140613- Left-mid: x=290 y=390614- Left-bot: x=290 y=640615- Right-top: x=990 y=140616- Right-mid: x=990 y=390617- Right-bot: x=990 y=640618- Leaves left-top: x=80 y=80,150,220619- Leaves left-mid: x=80 y=340,410,480620- Leaves left-bot: x=80 y=580,650,720,790621- Leaves right-top: x=1205 y=80,150,220622- Leaves right-mid: x=1205 y=340,410,480623- Leaves right-bot: x=1205 y=580,650,720624- Connectors: each dept's edge nearest center connects to center hub edge, roughly at the dept's vertical midpoint625626---627628### 7 departments629Three left, three right, one bottom-center.630- Left 3: x=290 y=140/370/600631- Right 3: x=990 y=140/370/600632- Bottom-center: x=560 y=760 w=200633- Leaves: same pattern as 6-dept but compress vertical spacing to 60px per leaf634- Bottom dept leaves: 2–3 nodes spread horizontally below it635- Use viewBox="0 0 1440 980"636637---638639### 8 departments640Four on each side.641- Left: x=290 y=110/290/480/670642- Right: x=990 y=110/290/480/670643- Each dept gets max 2–3 leaf nodes (space is tight)644- Compress leaf spacing to 55px645- Use viewBox="0 0 1440 980"646- Consider reducing leaf node height to 40 (rx=8) to fit647648---649650## Node dimensions651652| Node type | width | height | rx | font-size title | font-size sub |653|-----------|-------|--------|----|-----------------|---------------|654| Center hub | 204 | 80 | 18 | 17 | 10 |655| Dept node | 160 | 52 | 13 | 13 | 9.5 |656| Leaf node | 155 | 46 | 10 | 11 | 9 |657658For 7–8 depts with many leaves, shrink leaf to w=145 h=40 rx=8.659660---661662## Department color palette663664Assign colors in this order (reuse if >8 depts):6651. Amber: fill=#fef3c7 stroke=#d97706 text=#78350f sub=#a16207, leaf fill=#fffbeb leaf-stroke=#fcd34d leaf-text=#78350f leaf-sub=#a162076662. Green: fill=#d1fae5 stroke=#059669 text=#064e3b sub=#065f46, leaf fill=#ecfdf5 leaf-stroke=#6ee7b7 leaf-text=#064e3b leaf-sub=#0478576673. Pink: fill=#fce7f3 stroke=#db2777 text=#831843 sub=#9d174d, leaf fill=#fff1f2 leaf-stroke=#fca5a5 leaf-text=#9f1239 leaf-sub=#be123c6684. Blue: fill=#e0f2fe stroke=#0284c7 text=#0c4a6e sub=#075985, leaf fill=#f0f9ff leaf-stroke=#7dd3fc leaf-text=#0c4a6e leaf-sub=#0369a16695. Violet: fill=#ede9fe stroke=#7c3aed text=#3b0764 sub=#5b21b6, leaf fill=#f5f3ff leaf-stroke=#c4b5fd leaf-text=#3b0764 leaf-sub=#6d28d96706. Orange: fill=#ffedd5 stroke=#ea580c text=#431407 sub=#9a3412, leaf fill=#fff7ed leaf-stroke=#fdba74 leaf-text=#431407 leaf-sub=#c2410c6717. Teal: fill=#ccfbf1 stroke=#0d9488 text=#042f2e sub=#0f766e, leaf fill=#f0fdfa leaf-stroke=#5eead4 leaf-text=#042f2e leaf-sub=#0f766e6728. Rose: fill=#ffe4e6 stroke=#e11d48 text=#4c0519 sub=#881337, leaf fill=#fff1f2 leaf-stroke=#fda4af leaf-text=#4c0519 leaf-sub=#be123c673674---675676## Connector rules677678**Dept → center** (stroke=#cbd5e1 stroke-width=2.5 stroke-linecap=round):679- Left-side dept: connect dept's right edge midpoint → center's left edge (x=618) at matching y680- Right-side dept: connect dept's left edge midpoint → center's right edge (x=822) at matching y681- Bottom-center dept: connect dept's top edge midpoint → center's bottom edge (y=500) at x=720682- For 6+ depts on same side: connect to the center edge at the dept's own vertical midpoint683684**Leaf → dept** (stroke = dept's stroke color, stroke-width=1.8 stroke-linecap=round):685- Left-column leaves: leaf right edge (x=235) → dept left edge (x=290) at leaf's cy686- Right-column leaves: leaf left edge (x=1205) → dept right edge (x=1150) at leaf's cy687- Bottom-row leaves: leaf top edge → dept bottom edge688689---690691## Comment `+` button on every node692693Every `<g class="dept-node">`, `<g class="leaf-node">`, and `<g class="center-node">` must have a nested `<g class="comment-btn">` as its last child:694695```svg696<g class="comment-btn" onclick="event.stopPropagation();openComment('node-id','Node Name','Dept Name')">697 <circle cx="[rect.x + rect.width - 5]" cy="[rect.y + 9]" r="9" fill="white" stroke="[dept-stroke-color]" stroke-width="1.5"/>698 <text x="[same cx]" y="[cy+4]" text-anchor="middle" font-size="12" fill="[dept-text-color]" font-weight="700">+</text>699</g>700```701702The `cx` = node rect x + node rect width − 5 (places it at the right edge of the rect). The `cy` = node rect y + 9.703704---705706## Quality checklist before writing the file707708- [ ] All `[PLACEHOLDER]` tokens replaced709- [ ] Number of dept nodes matches what was discovered (not forced to 4)710- [ ] Layout coordinates match the correct layout table for t711712…(truncated)
naticorrea-03