@sienklogic/plan-build-run 2.18.1 → 2.19.1

package/dashboard/src/lib/configSchema.js

@@ -0,0 +1,189 @@
+export const DEFAULT_CONFIG = {
+  version: 2,
+  context_strategy: 'aggressive',
+  mode: 'autonomous',
+  depth: 'standard',
+  features: {
+    structured_planning: true,
+    goal_verification: true,
+    integration_verification: true,
+    context_isolation: true,
+    atomic_commits: true,
+    session_persistence: true,
+    research_phase: true,
+    plan_checking: true,
+    tdd_mode: true,
+    status_line: true,
+    auto_continue: true,
+    auto_advance: false,
+    team_discussions: false,
+    inline_verify: false,
+  },
+  models: {
+    researcher: 'sonnet',
+    planner: 'opus',
+    executor: 'opus',
+    verifier: 'sonnet',
+    integration_checker: 'sonnet',
+    debugger: 'inherit',
+    mapper: 'sonnet',
+    synthesizer: 'sonnet',
+  },
+  parallelization: {
+    enabled: true,
+    plan_level: true,
+    task_level: false,
+    max_concurrent_agents: 3,
+    min_plans_for_parallel: 2,
+    use_teams: false,
+  },
+  planning: {
+    commit_docs: false,
+    max_tasks_per_plan: 3,
+    search_gitignored: false,
+  },
+  git: {
+    branching: 'phase',
+    commit_format: '{type}({phase}-{plan}): {description}',
+    phase_branch_template: 'plan-build-run/phase-{phase}-{slug}',
+    milestone_branch_template: 'plan-build-run/{milestone}-{slug}',
+    mode: 'enabled',
+  },
+  gates: {
+    confirm_project: true,
+    confirm_roadmap: true,
+    confirm_plan: true,
+    confirm_execute: false,
+    confirm_transition: true,
+    issues_review: true,
+    verification: true,
+    review: true,
+    plan_approval: true,
+  },
+  safety: {
+    always_confirm_destructive: true,
+    always_confirm_external_services: true,
+  },
+};
+
+const MODEL_OPTIONS = ['opus', 'sonnet', 'haiku', 'inherit'];
+
+export const CONFIG_SECTIONS = [
+  {
+    key: '_root',
+    title: 'General',
+    sub: 'Top-level settings',
+    fields: [
+      { key: 'version', label: 'Version', type: 'number', min: 1, max: 99, step: 1 },
+      { key: 'context_strategy', label: 'Context Strategy', type: 'select', options: ['conservative', 'balanced', 'aggressive'] },
+      { key: 'mode', label: 'Mode', type: 'select', options: ['autonomous', 'supervised', 'manual'] },
+      { key: 'depth', label: 'Depth', type: 'select', options: ['minimal', 'standard', 'thorough'] },
+    ],
+  },
+  {
+    key: 'features',
+    title: 'Features',
+    sub: 'Feature toggles',
+    fields: [
+      { key: 'structured_planning', label: 'Structured Planning', type: 'toggle' },
+      { key: 'goal_verification', label: 'Goal Verification', type: 'toggle' },
+      { key: 'integration_verification', label: 'Integration Verification', type: 'toggle' },
+      { key: 'context_isolation', label: 'Context Isolation', type: 'toggle' },
+      { key: 'atomic_commits', label: 'Atomic Commits', type: 'toggle' },
+      { key: 'session_persistence', label: 'Session Persistence', type: 'toggle' },
+      { key: 'research_phase', label: 'Research Phase', type: 'toggle' },
+      { key: 'plan_checking', label: 'Plan Checking', type: 'toggle' },
+      { key: 'tdd_mode', label: 'TDD Mode', type: 'toggle' },
+      { key: 'status_line', label: 'Status Line', type: 'toggle' },
+      { key: 'auto_continue', label: 'Auto Continue', type: 'toggle' },
+      { key: 'auto_advance', label: 'Auto Advance', type: 'toggle' },
+      { key: 'team_discussions', label: 'Team Discussions', type: 'toggle' },
+      { key: 'inline_verify', label: 'Inline Verify', type: 'toggle' },
+    ],
+  },
+  {
+    key: 'models',
+    title: 'Models',
+    sub: 'Agent model assignment',
+    fields: [
+      { key: 'researcher', label: 'Researcher', type: 'select', options: MODEL_OPTIONS },
+      { key: 'planner', label: 'Planner', type: 'select', options: MODEL_OPTIONS },
+      { key: 'executor', label: 'Executor', type: 'select', options: MODEL_OPTIONS },
+      { key: 'verifier', label: 'Verifier', type: 'select', options: MODEL_OPTIONS },
+      { key: 'integration_checker', label: 'Integration Checker', type: 'select', options: MODEL_OPTIONS },
+      { key: 'debugger', label: 'Debugger', type: 'select', options: MODEL_OPTIONS },
+      { key: 'mapper', label: 'Mapper', type: 'select', options: MODEL_OPTIONS },
+      { key: 'synthesizer', label: 'Synthesizer', type: 'select', options: MODEL_OPTIONS },
+    ],
+  },
+  {
+    key: 'parallelization',
+    title: 'Parallelization',
+    sub: 'Concurrent execution',
+    fields: [
+      { key: 'enabled', label: 'Enabled', type: 'toggle' },
+      { key: 'plan_level', label: 'Plan Level', type: 'toggle' },
+      { key: 'task_level', label: 'Task Level', type: 'toggle' },
+      { key: 'max_concurrent_agents', label: 'Max Concurrent Agents', type: 'number', min: 1, max: 10, step: 1 },
+      { key: 'min_plans_for_parallel', label: 'Min Plans for Parallel', type: 'number', min: 1, max: 10, step: 1 },
+      { key: 'use_teams', label: 'Use Teams', type: 'toggle' },
+    ],
+  },
+  {
+    key: 'planning',
+    title: 'Planning',
+    sub: 'Plan generation',
+    fields: [
+      { key: 'commit_docs', label: 'Commit Docs', type: 'toggle' },
+      { key: 'max_tasks_per_plan', label: 'Max Tasks per Plan', type: 'number', min: 1, max: 10, step: 1 },
+      { key: 'search_gitignored', label: 'Search Gitignored', type: 'toggle' },
+    ],
+  },
+  {
+    key: 'git',
+    title: 'Git',
+    sub: 'Version control',
+    fields: [
+      { key: 'branching', label: 'Branching', type: 'select', options: ['phase', 'feature', 'none'] },
+      { key: 'commit_format', label: 'Commit Format', type: 'text' },
+      { key: 'phase_branch_template', label: 'Phase Branch Template', type: 'text' },
+      { key: 'milestone_branch_template', label: 'Milestone Branch Template', type: 'text' },
+      { key: 'mode', label: 'Git Mode', type: 'select', options: ['enabled', 'disabled', 'dry-run'] },
+    ],
+  },
+  {
+    key: 'gates',
+    title: 'Gates',
+    sub: 'Confirmation gates',
+    fields: [
+      { key: 'confirm_project', label: 'Confirm Project', type: 'toggle' },
+      { key: 'confirm_roadmap', label: 'Confirm Roadmap', type: 'toggle' },
+      { key: 'confirm_plan', label: 'Confirm Plan', type: 'toggle' },
+      { key: 'confirm_execute', label: 'Confirm Execute', type: 'toggle' },
+      { key: 'confirm_transition', label: 'Confirm Transition', type: 'toggle' },
+      { key: 'issues_review', label: 'Issues Review', type: 'toggle' },
+      { key: 'verification', label: 'Verification', type: 'toggle' },
+      { key: 'review', label: 'Review', type: 'toggle' },
+      { key: 'plan_approval', label: 'Plan Approval', type: 'toggle' },
+    ],
+  },
+  {
+    key: 'safety',
+    title: 'Safety',
+    sub: 'Safety controls',
+    fields: [
+      { key: 'always_confirm_destructive', label: 'Confirm Destructive', type: 'toggle' },
+      { key: 'always_confirm_external_services', label: 'Confirm External Services', type: 'toggle' },
+    ],
+  },
+];
+
+export const QUICK_START_FIELDS = [
+  { section: '_root', key: 'mode', label: 'Workflow Mode' },
+  { section: '_root', key: 'depth', label: 'Planning Depth' },
+  { section: 'features', key: 'tdd_mode', label: 'TDD Mode' },
+  { section: 'features', key: 'auto_continue', label: 'Auto Continue' },
+  { section: 'parallelization', key: 'enabled', label: 'Parallel Execution' },
+  { section: 'planning', key: 'commit_docs', label: 'Commit Planning Docs' },
+  { section: 'models', key: 'executor', label: 'Executor Model' },
+];

package/dashboard/src/lib/constants.js

@@ -0,0 +1,22 @@
+export const FONTS = {
+  mono: "'JetBrains Mono', 'Fira Code', monospace",
+  sans: "'DM Sans', 'Segoe UI', system-ui, sans-serif",
+};
+
+export const NAV = [
+  { id: 'overview', label: 'Overview', icon: '\u25C8' },
+  { id: 'live', label: 'Live Feed', icon: '\u25C9' },
+  { id: 'planning', label: 'Planning', icon: '\u25C7' },
+  { id: 'agents', label: 'Agents & Skills', icon: '\u2B21' },
+  { id: 'telemetry', label: 'Telemetry', icon: '\u25CE' },
+  { id: 'memory', label: 'Memory', icon: '\uD83E\uDDE0' },
+  { id: 'hooks', label: 'Hooks & Errors', icon: '\u26A1' },
+  { id: 'config', label: 'Config', icon: '\u2699' },
+  { id: 'roadmap', label: 'Roadmap', icon: '\u25A6' },
+  { id: 'progress', label: 'Progress', icon: '\u25D4' },
+  { id: 'onboarding', label: 'Onboarding', icon: '\u25B7' },
+  { id: 'research', label: 'Research', icon: '\u25C7' },
+  { id: 'intel', label: 'Intel', icon: '\u25CE' },
+  { id: 'incidents', label: 'Incidents', icon: '\u26A0' },
+  { id: 'sessions', label: 'Sessions', icon: '\u25D4' },
+];

package/dashboard/src/main.jsx

@@ -0,0 +1,15 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { ThemeProvider } from './theme/ThemeProvider.jsx';
+import { ToastProvider } from './hooks/useToast.jsx';
+import App from './App.jsx';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <ThemeProvider>
+      <ToastProvider>
+        <App />
+      </ToastProvider>
+    </ThemeProvider>
+  </StrictMode>
+);

package/dashboard/src/pages/AgentsPage.jsx

@@ -0,0 +1,191 @@
+import { useState, useEffect } from 'react';
+import { useTheme } from '../theme/ThemeProvider.jsx';
+import { FONTS } from '../lib/constants.js';
+import { Card, MetricCard, SectionTitle, Badge, TabBar, ErrorBoundary, ErrorBox } from '../components/ui/index.js';
+import { SkeletonCard } from '../components/ui/LoadingSkeleton.jsx';
+import useFetch from '../hooks/useFetch.js';
+import useWebSocket from '../hooks/useWebSocket.js';
+import useDocumentTitle from '../hooks/useDocumentTitle.js';
+import useToast from '../hooks/useToast.jsx';
+
+const TABS = ['Agents', 'Skills', 'Commands'];
+
+function AgentsPageContent() {
+  const { tokens: t } = useTheme();
+  const { addToast } = useToast();
+  const [activeTab, setActiveTab] = useState('Agents');
+
+  const { data, loading, error, refetch } = useFetch('/api/agents');
+
+  const wsUrl = 'ws://' + window.location.hostname + ':' + (window.location.port || '3141') + '/ws';
+  const ws = useWebSocket(wsUrl);
+  useDocumentTitle({ wsEvents: ws.events });
+
+  useEffect(() => {
+    if (ws.events.length > 0) {
+      refetch();
+    }
+  }, [ws.events.length, refetch]);
+
+  useEffect(() => {
+    if (error && addToast) addToast('error', error.message);
+  }, [error, addToast]);
+
+  if (loading) {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(170px, 1fr))', gap: 12 }}>
+          {[1, 2, 3].map((i) => (
+            <SkeletonCard key={i} height={90} />
+          ))}
+        </div>
+        <SkeletonCard height={300} />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <ErrorBox
+        title="Error loading agents"
+        message={error.message}
+        onRetry={refetch}
+      />
+    );
+  }
+
+  const items = Array.isArray(data) ? data : [];
+  const agents = items.filter((i) => i.type === 'agent');
+  const skills = items.filter((i) => i.type === 'skill');
+  const commands = items.filter((i) => i.type === 'command');
+
+  const TYPE_COLORS = { agent: t.accent, skill: t.build, command: t.plan };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <SectionTitle>Agents</SectionTitle>
+
+      {/* Metric cards */}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(170px, 1fr))', gap: 12 }}>
+        <MetricCard label="Agents" value={String(agents.length)} sub="definitions" color={t.accent} />
+        <MetricCard label="Skills" value={String(skills.length)} sub="available" color={t.build} />
+        <MetricCard label="Commands" value={String(commands.length)} sub="slash commands" color={t.plan} />
+      </div>
+
+      {/* Tab bar */}
+      <TabBar tabs={TABS} active={activeTab} onChange={setActiveTab} />
+
+      {/* Agents tab */}
+      {activeTab === 'Agents' && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          {agents.length === 0 ? (
+            <Card>
+              <div style={{ padding: 24, textAlign: 'center', color: t.textMuted, fontFamily: FONTS.mono, fontSize: 12 }}>
+                No agent definitions found
+              </div>
+            </Card>
+          ) : (
+            agents.map((agent) => (
+              <Card key={agent.id}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
+                  <div>
+                    <div style={{ fontFamily: FONTS.mono, fontSize: 13, fontWeight: 600, color: t.accent }}>{agent.name}</div>
+                    {agent.role && (
+                      <div style={{ fontFamily: FONTS.sans, fontSize: 12, color: t.textMuted, marginTop: 2 }}>{agent.role}</div>
+                    )}
+                  </div>
+                  <div style={{ display: 'flex', gap: 6 }}>
+                    <Badge color={TYPE_COLORS.agent}>agent</Badge>
+                    {agent.model && <Badge color={t.info}>{agent.model}</Badge>}
+                  </div>
+                </div>
+                {agent.tools && agent.tools.length > 0 && (
+                  <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', marginTop: 6 }}>
+                    {agent.tools.map((tool, i) => (
+                      <span
+                        key={i}
+                        style={{
+                          padding: '2px 6px',
+                          borderRadius: 3,
+                          fontFamily: FONTS.mono,
+                          fontSize: 10,
+                          background: `${t.textMuted}11`,
+                          color: t.textMuted,
+                          border: `1px solid ${t.border}`,
+                        }}
+                      >
+                        {tool}
+                      </span>
+                    ))}
+                  </div>
+                )}
+              </Card>
+            ))
+          )}
+        </div>
+      )}
+
+      {/* Skills tab */}
+      {activeTab === 'Skills' && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          {skills.length === 0 ? (
+            <Card>
+              <div style={{ padding: 24, textAlign: 'center', color: t.textMuted, fontFamily: FONTS.mono, fontSize: 12 }}>
+                No skills found
+              </div>
+            </Card>
+          ) : (
+            skills.map((skill) => (
+              <Card key={skill.id}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <div>
+                    <div style={{ fontFamily: FONTS.mono, fontSize: 13, fontWeight: 600, color: t.build }}>{skill.name}</div>
+                    {skill.role && (
+                      <div style={{ fontFamily: FONTS.sans, fontSize: 12, color: t.textMuted, marginTop: 2 }}>{skill.role}</div>
+                    )}
+                  </div>
+                  <Badge color={TYPE_COLORS.skill}>skill</Badge>
+                </div>
+              </Card>
+            ))
+          )}
+        </div>
+      )}
+
+      {/* Commands tab */}
+      {activeTab === 'Commands' && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          {commands.length === 0 ? (
+            <Card>
+              <div style={{ padding: 24, textAlign: 'center', color: t.textMuted, fontFamily: FONTS.mono, fontSize: 12 }}>
+                No commands found
+              </div>
+            </Card>
+          ) : (
+            commands.map((cmd) => (
+              <Card key={cmd.id}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <div>
+                    <div style={{ fontFamily: FONTS.mono, fontSize: 13, fontWeight: 600, color: t.plan }}>/{cmd.name}</div>
+                    {cmd.role && (
+                      <div style={{ fontFamily: FONTS.sans, fontSize: 12, color: t.textMuted, marginTop: 2 }}>{cmd.role}</div>
+                    )}
+                  </div>
+                  <Badge color={TYPE_COLORS.command}>command</Badge>
+                </div>
+              </Card>
+            ))
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function AgentsPage() {
+  return (
+    <ErrorBoundary>
+      <AgentsPageContent />
+    </ErrorBoundary>
+  );
+}