@assistkick/create 1.10.0 → 1.12.0

package/templates/assistkick-product-system/packages/frontend/src/styles/index.css

@@ -25,6 +25,8 @@
   --font-system: "Inter", system-ui, -apple-system, sans-serif;
 }
 
+/* Theme variables — dark / light */
+
 :root {
   --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", monospace;
   --font-system: "Inter", system-ui, -apple-system, sans-serif;
@@ -68,14 +70,9 @@
   --error-color: #d93025;
 }
 
+/* Minimal base layer — only rules that cannot be expressed as Tailwind utilities */
 @layer base {
 
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
 html, body, #root {
   width: 100%;
   height: 100%;
@@ -86,7 +83,7 @@ html, body, #root {
   color: var(--text-primary);
 }
 
-/* Settings toggle knob (pseudo-element cannot be expressed in Tailwind) */
+/* Settings toggle — needs ::after pseudo-element and :checked state */
 .settings-toggle::after {
   content: '';
   position: absolute;
@@ -104,76 +101,22 @@ html, body, #root {
   background: var(--accent);
 }
 
-/* Side panel — dangerouslySetInnerHTML child selectors (cannot use Tailwind) */
-.panel-body {
-  font-size: 14px;
-  line-height: 1.6;
-}
-
-.panel-body h1 { font-size: 18px; margin: 12px 0 8px; color: var(--text-primary); }
-.panel-body h2 { font-size: 16px; margin: 12px 0 6px; color: var(--text-primary); }
-.panel-body h3 { font-size: 15px; margin: 10px 0 4px; color: var(--text-primary); }
-.panel-body p { margin: 4px 0; color: var(--text-primary); }
-.panel-body ul { padding-left: 20px; margin: 4px 0; }
-.panel-body li { color: var(--text-primary); margin: 2px 0; }
-.panel-body code {
-  background: var(--bg-tertiary);
-  padding: 1px 4px;
-  border-radius: 3px;
-  font-size: 11px;
-}
-.panel-body blockquote {
-  border-left: 3px solid var(--border-color);
-  padding-left: 12px;
-  color: var(--text-muted);
-  margin: 8px 0;
-}
-.panel-body strong { color: var(--text-primary); }
-.panel-body pre {
-  background: var(--bg-tertiary);
-  padding: 10px 12px;
-  border-radius: 4px;
-  overflow-x: auto;
-  margin: 8px 0;
-  font-size: 11px;
-}
-.panel-body pre code {
-  background: transparent;
-  padding: 0;
-}
-
-/* Side panel — dynamic status color variants */
-.panel-status-draft {
-  background: rgba(173, 181, 189, 0.15);
-  color: #adb5bd;
-}
-
-.panel-status-partially_defined {
-  background: rgba(255, 212, 59, 0.15);
-  color: #ffd43b;
-}
-
-.panel-status-defined {
-  background: rgba(105, 219, 124, 0.15);
-  color: #69db7c;
+/* Terminal — xterm library override */
+.terminal-container .xterm {
+  height: 100%;
 }
 
-/* Gap indicators — pulsing ring for nodes with open questions (D3/SVG) */
+/* Graph SVG animations — applied via D3 .attr('class', ...) */
 .gap-pulse-ring {
   animation: gap-pulse 2s ease-in-out infinite;
 }
 
-@keyframes gap-pulse {
-  0%, 100% { stroke-opacity: 0.8; stroke-width: 2; }
-  50% { stroke-opacity: 0.2; stroke-width: 4; }
-}
-
 .gap-warning-icon {
   fill: #ff6b6b;
   filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
 }
 
-/* Legend gap indicator swatch (@keyframes animation) */
+/* Legend gap indicator — keyframe animation */
 .legend-gap-pulse {
   background: var(--bg-tertiary) !important;
   border: 2px solid #ff6b6b;
@@ -181,16 +124,6 @@ html, body, #root {
   box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4);
 }
 
-@keyframes legend-gap-pulse {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4); }
-  50% { box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1); }
-}
-
-/* Terminal — xterm.js child targeting */
-.terminal-container .xterm {
-  height: 100%;
-}
-
 /* React Flow workflow canvas overrides */
 .workflow-canvas .react-flow__pane {
   cursor: grab;
@@ -215,296 +148,36 @@ html, body, #root {
   display: none;
 }
 
-/* ===== Files View ===== */
-
-.files-view {
-  display: flex;
-  flex-direction: row;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-}
-
-.files-view__empty {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  font-family: var(--font-mono);
-  font-size: 13px;
-}
-
-.files-view__tree {
-  display: flex;
-  flex-direction: column;
-  border-right: 1px solid var(--border-color);
-  flex-shrink: 0;
-  overflow: hidden;
-  background: var(--bg-primary);
-}
-
-.files-view__tree-header {
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--border-color);
-  flex-shrink: 0;
-}
-
-.files-view__tree-content {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.files-view__resize-handle {
-  width: 4px;
-  cursor: col-resize;
-  background: transparent;
-  flex-shrink: 0;
-  transition: background 0.15s;
-  position: relative;
-  z-index: 2;
-  margin-left: -2px;
-  margin-right: -2px;
-}
-
-.files-view__resize-handle:hover,
-.files-view__resize-handle:active {
-  background: var(--accent);
-}
-
-.files-view__editor {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  overflow: hidden;
-}
-
-.files-view__editor-container {
-  flex: 1;
-  min-height: 0;
-  position: relative;
-}
-
-.files-view__loading {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 5;
-  display: flex;
-  justify-content: center;
-  padding: 8px;
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--border-color);
-  font-family: var(--font-mono);
-}
-
-.files-view__empty-editor {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: var(--font-mono);
-  font-size: 13px;
-  background: var(--bg-primary);
-}
-
-/* File tree */
-.file-tree {
-  display: flex;
-  flex-direction: column;
-  padding: 4px 0;
-}
-
-.file-tree-node {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  width: 100%;
-  padding: 3px 8px;
-  border: none;
-  background: transparent;
-  color: var(--text-secondary);
-  font-family: var(--font-mono);
-  font-size: 12px;
-  cursor: pointer;
-  text-align: left;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  outline: none;
-  transition: background 0.1s;
-}
-
-.file-tree-node:hover {
-  background: var(--tab-hover-bg);
-  color: var(--text-primary);
-}
-
-.file-tree-node--selected {
-  background: var(--bg-tertiary);
-  color: var(--accent);
-}
-
-.file-tree-node__chevron {
-  flex-shrink: 0;
-  width: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-muted);
-}
-
-.file-tree-node__chevron--hidden {
-  visibility: hidden;
-}
-
-.file-tree-node__icon {
-  flex-shrink: 0;
-  color: var(--text-muted);
-}
-
-.file-tree-node__icon--folder {
-  color: var(--accent);
-}
-
-.file-tree-node__name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* File tree context menu */
-.file-tree-context-menu {
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  padding: 4px 0;
-  min-width: 140px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  font-family: var(--font-mono);
-}
-
-.file-tree-context-menu__item {
-  display: block;
-  width: 100%;
-  padding: 5px 12px;
-  border: none;
-  background: transparent;
-  color: var(--text-secondary);
-  font-family: var(--font-mono);
-  font-size: 12px;
-  text-align: left;
-  cursor: pointer;
-  outline: none;
-  transition: background 0.1s, color 0.1s;
-}
-
-.file-tree-context-menu__item:hover {
-  background: var(--tab-hover-bg);
-  color: var(--text-primary);
-}
-
-/* File tree inline input */
-.file-tree-inline-input {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  width: 100%;
-  padding: 2px 8px;
-}
-
-.file-tree-inline-input__field {
-  flex: 1;
-  min-width: 0;
-  padding: 2px 4px;
-  border: 1px solid var(--accent);
-  border-radius: 2px;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  font-family: var(--font-mono);
-  font-size: 12px;
-  outline: none;
-}
-
-/* Editor tab bar */
-.editor-tab-bar {
-  display: flex;
-  flex-shrink: 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-  border-bottom: 1px solid var(--border-color);
-  background: var(--bg-secondary);
-  scrollbar-width: thin;
-}
-
-.editor-tab-bar::-webkit-scrollbar {
-  height: 2px;
-}
-
-.editor-tab-bar::-webkit-scrollbar-thumb {
-  background: var(--border-color);
-}
-
-.editor-tab {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  border: none;
-  border-right: 1px solid var(--border-color);
-  background: var(--bg-primary);
-  color: var(--text-secondary);
-  font-family: var(--font-mono);
-  font-size: 12px;
-  cursor: pointer;
-  white-space: nowrap;
-  outline: none;
-  transition: background 0.1s, color 0.1s;
-  flex-shrink: 0;
+/* Mermaid diagram — edge label padding & design-system alignment */
+.mermaid-diagram .edgeLabel {
+  padding: 6px 10px;
 }
 
-.editor-tab:hover {
-  background: var(--tab-hover-bg);
-  color: var(--text-primary);
+.mermaid-diagram .edgeLabel p {
+  margin: 0;
 }
 
-.editor-tab--active {
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  border-bottom: 2px solid var(--accent);
-  margin-bottom: -1px;
+.mermaid-diagram .node rect,
+.mermaid-diagram .node polygon,
+.mermaid-diagram .node circle {
+  rx: 8;
+  ry: 8;
 }
 
-.editor-tab__name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 160px;
-}
+} /* end @layer base */
 
-.editor-tab__close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  border-radius: 3px;
-  color: var(--text-muted);
-  transition: background 0.1s, color 0.1s;
+/* Keyframes — referenced by Tailwind arbitrary animations and CSS classes */
+@keyframes toast-slide-in {
+  from { transform: translateY(20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
 }
 
-.editor-tab__close:hover {
-  background: var(--border-color);
-  color: var(--text-primary);
+@keyframes gap-pulse {
+  0%, 100% { stroke-opacity: 0.8; stroke-width: 2; }
+  50% { stroke-opacity: 0.2; stroke-width: 4; }
 }
 
-.editor-tab__dirty {
-  font-size: 8px;
-  line-height: 1;
-  color: var(--text-secondary);
-  margin-right: 4px;
-  flex-shrink: 0;
+@keyframes legend-gap-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4); }
+  50% { box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1); }
 }
-
-} /* end @layer base */

package/templates/assistkick-product-system/packages/frontend/src/utils/parse_node_markdown.test.ts

@@ -0,0 +1,115 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import { parseNodeMarkdown } from './parse_node_markdown.ts';
+
+describe('parseNodeMarkdown', () => {
+  it('strips frontmatter and extracts description', () => {
+    const md = `---
+id: feat_001
+type: feature
+---
+Some description text.
+
+## Acceptance Criteria
+- First criterion
+- Second criterion
+`;
+    const result = parseNodeMarkdown(md);
+    assert.equal(result.description, 'Some description text.');
+    assert.deepEqual(result.acceptanceCriteria, ['First criterion', 'Second criterion']);
+  });
+
+  it('parses numbered acceptance criteria', () => {
+    const md = `## Description
+A feature.
+
+## Acceptance Criteria
+1. First item
+2. Second item
+3. Third item
+`;
+    const result = parseNodeMarkdown(md);
+    assert.deepEqual(result.acceptanceCriteria, ['First item', 'Second item', 'Third item']);
+  });
+
+  it('parses open questions', () => {
+    const md = `## Description
+Desc.
+
+## Open Questions
+- What about X?
+- How does Y work?
+`;
+    const result = parseNodeMarkdown(md);
+    assert.deepEqual(result.openQuestions, ['What about X?', 'How does Y work?']);
+  });
+
+  it('parses resolved questions with arrow separator', () => {
+    const md = `## Resolved Questions
+- [x] Should we use X? → Yes, use X because it is faster.
+- [x] How to handle Y? → Use the Z approach.
+`;
+    const result = parseNodeMarkdown(md);
+    assert.equal(result.resolvedQuestions.length, 2);
+    assert.equal(result.resolvedQuestions[0].question, 'Should we use X?');
+    assert.equal(result.resolvedQuestions[0].resolution, 'Yes, use X because it is faster.');
+    assert.equal(result.resolvedQuestions[1].question, 'How to handle Y?');
+    assert.equal(result.resolvedQuestions[1].resolution, 'Use the Z approach.');
+  });
+
+  it('parses resolved questions without resolution', () => {
+    const md = `## Resolved Questions
+- [x] A question with no answer
+`;
+    const result = parseNodeMarkdown(md);
+    assert.equal(result.resolvedQuestions.length, 1);
+    assert.equal(result.resolvedQuestions[0].question, 'A question with no answer');
+    assert.equal(result.resolvedQuestions[0].resolution, '');
+  });
+
+  it('extracts notes section', () => {
+    const md = `## Description
+Desc.
+
+## Notes
+> Session 1: Did something important.
+> Session 2: Did more things.
+`;
+    const result = parseNodeMarkdown(md);
+    assert.ok(result.notes.includes('Session 1: Did something important.'));
+    assert.ok(result.notes.includes('Session 2: Did more things.'));
+  });
+
+  it('returns empty values for missing sections', () => {
+    const md = `## Description
+Just a description.
+`;
+    const result = parseNodeMarkdown(md);
+    assert.equal(result.description, 'Just a description.');
+    assert.deepEqual(result.acceptanceCriteria, []);
+    assert.deepEqual(result.openQuestions, []);
+    assert.deepEqual(result.resolvedQuestions, []);
+    assert.equal(result.notes, '');
+  });
+
+  it('handles content with no frontmatter', () => {
+    const md = `## Description
+No frontmatter here.
+
+## Acceptance Criteria
+- One criterion
+`;
+    const result = parseNodeMarkdown(md);
+    assert.equal(result.description, 'No frontmatter here.');
+    assert.deepEqual(result.acceptanceCriteria, ['One criterion']);
+  });
+
+  it('handles empty content', () => {
+    const result = parseNodeMarkdown('');
+    assert.equal(result.description, '');
+    assert.deepEqual(result.acceptanceCriteria, []);
+    assert.deepEqual(result.openQuestions, []);
+    assert.deepEqual(result.resolvedQuestions, []);
+    assert.equal(result.notes, '');
+  });
+});

package/templates/assistkick-product-system/packages/frontend/src/utils/parse_node_markdown.ts

@@ -0,0 +1,91 @@
+/**
+ * Parses node markdown content (after frontmatter stripping) into typed sections.
+ * Splitting is done by ## heading boundaries.
+ */
+
+export interface ParsedNodeContent {
+  description: string;
+  acceptanceCriteria: string[];
+  openQuestions: string[];
+  resolvedQuestions: ResolvedQuestion[];
+  notes: string;
+}
+
+export interface ResolvedQuestion {
+  question: string;
+  resolution: string;
+}
+
+const HEADING_RE = /^## (.+)$/m;
+
+const stripFrontmatter = (md: string): string =>
+  md.replace(/^---[\s\S]*?---\n*/m, '');
+
+const splitBullets = (text: string): string[] =>
+  text
+    .split(/\n/)
+    .map((line) => line.replace(/^\s*(?:-|\d+\.)\s+/, '').trim())
+    .filter(Boolean);
+
+const parseResolvedQuestion = (line: string): ResolvedQuestion => {
+  // Format: "- [x] question text → resolution text" or "- [x] question text"
+  const cleaned = line.replace(/^\s*-?\s*\[x\]\s*/i, '').trim();
+  const arrowIdx = cleaned.indexOf('→');
+  if (arrowIdx !== -1) {
+    return {
+      question: cleaned.slice(0, arrowIdx).trim(),
+      resolution: cleaned.slice(arrowIdx + 1).trim(),
+    };
+  }
+  // Try "Resolution: " or "Answer: " split
+  const resMatch = cleaned.match(/^(.+?)(?:\s*(?:Resolution|Answer):\s*)(.+)$/s);
+  if (resMatch) {
+    return { question: resMatch[1].trim(), resolution: resMatch[2].trim() };
+  }
+  return { question: cleaned, resolution: '' };
+};
+
+const parseResolvedQuestions = (text: string): ResolvedQuestion[] =>
+  text
+    .split(/\n/)
+    .map((line) => line.trim())
+    .filter((line) => line.length > 0)
+    .map(parseResolvedQuestion);
+
+/**
+ * Splits markdown content into named sections by ## headings.
+ * Returns a map of lowercase heading → section body text.
+ */
+const splitSections = (md: string): Map<string, string> => {
+  const sections = new Map<string, string>();
+  const lines = md.split('\n');
+  let currentKey = 'description';
+  let currentLines: string[] = [];
+
+  for (const line of lines) {
+    const match = line.match(/^## (.+)$/);
+    if (match) {
+      sections.set(currentKey, currentLines.join('\n').trim());
+      currentKey = match[1].trim().toLowerCase();
+      currentLines = [];
+    } else {
+      currentLines.push(line);
+    }
+  }
+  sections.set(currentKey, currentLines.join('\n').trim());
+
+  return sections;
+};
+
+export const parseNodeMarkdown = (content: string): ParsedNodeContent => {
+  const stripped = stripFrontmatter(content);
+  const sections = splitSections(stripped);
+
+  return {
+    description: sections.get('description') ?? '',
+    acceptanceCriteria: splitBullets(sections.get('acceptance criteria') ?? ''),
+    openQuestions: splitBullets(sections.get('open questions') ?? ''),
+    resolvedQuestions: parseResolvedQuestions(sections.get('resolved questions') ?? ''),
+    notes: sections.get('notes') ?? '',
+  };
+};

package/templates/assistkick-product-system/packages/frontend/src/utils/preview_utils.test.ts

@@ -0,0 +1,30 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import { toAppName } from './preview_utils.ts';
+
+describe('toAppName', () => {
+  it('lowercases and replaces spaces with hyphens', () => {
+    assert.equal(toAppName('My Cool App'), 'my-cool-app');
+  });
+
+  it('strips non-alphanumeric characters', () => {
+    assert.equal(toAppName('App@#$Name!'), 'app-name');
+  });
+
+  it('collapses consecutive hyphens', () => {
+    assert.equal(toAppName('a--b---c'), 'a-b-c');
+  });
+
+  it('trims leading and trailing hyphens', () => {
+    assert.equal(toAppName('---hello---'), 'hello');
+  });
+
+  it('returns "app" for empty or all-special-character input', () => {
+    assert.equal(toAppName(''), 'app');
+    assert.equal(toAppName('!!!'), 'app');
+  });
+
+  it('handles already-valid names', () => {
+    assert.equal(toAppName('my-app-123'), 'my-app-123');
+  });
+});

package/templates/assistkick-product-system/packages/frontend/src/utils/preview_utils.ts

@@ -0,0 +1,3 @@
+/** Sanitize a project name into a valid appName (alphanumeric + hyphens). */
+export const toAppName = (name: string): string =>
+  name.toLowerCase().replace(/[^a-z0-9-]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '') || 'app';