OpenClaw Bot
1946 lines
81 KiB
TypeScript
1946 lines
81 KiB
TypeScript
import { useEffect, useMemo, useRef, useState } from 'react'
|
||
import type { ChangeEvent } from 'react'
|
||
import './index.css'
|
||
import { createAgentSessionPrompt, createMarkdownPackage, createJsonExport, createPulseJsonl } from './features/export/exporters'
|
||
import { loadAppState, normalizeAppState, replaceAppState, saveAppState } from './store/storage'
|
||
import { fetchBackendHealth, fetchRemoteState, pushRemoteState, triageIdeaWithAi } from './store/remote'
|
||
import { AI_PLACEMENTS, FEATURE_COLUMNS, FEATURE_PRIORITIES, FEATURE_STATUSES, PULSE_TYPES, RISK_LEVELS } from './store/types'
|
||
import type { AiPlacement, AiRecommendation, AppState, Feature, FeatureColumn, ParkingLotItem, PulseEvent, RiskLevel, TabKey } from './store/types'
|
||
import { arrayToLines, formatDateTime, linesToArray, nowIso, slugify } from './utils/format'
|
||
|
||
const TABS: Array<{ key: TabKey; label: string }> = [
|
||
{ key: 'feature-plan', label: 'Feature Plan' },
|
||
{ key: 'parking-lot', label: 'Parking Lot' },
|
||
{ key: 'pulse-log', label: 'Pulse Log' },
|
||
{ key: 'export', label: 'Export' },
|
||
]
|
||
|
||
const PROMPT_TARGETS = ['OpenClaw', 'Claude Code', 'Codex', 'Generic Agent'] as const
|
||
|
||
const initialFeatureDraft = {
|
||
title: '',
|
||
description: '',
|
||
column: 'now' as FeatureColumn,
|
||
priority: 'must' as (typeof FEATURE_PRIORITIES)[number],
|
||
status: 'idea' as (typeof FEATURE_STATUSES)[number],
|
||
acceptanceCriteria: '',
|
||
scopeNotes: '',
|
||
}
|
||
|
||
const initialParkingDraft = {
|
||
title: '',
|
||
description: '',
|
||
reasonParked: '',
|
||
futurePlacement: '',
|
||
riskLevel: 'medium' as RiskLevel,
|
||
}
|
||
|
||
const initialPulseDraft = {
|
||
featureId: '',
|
||
source: 'manual',
|
||
agentId: 'jimmi',
|
||
pulseType: 'INTENT' as (typeof PULSE_TYPES)[number],
|
||
message: '',
|
||
confidence: '0.9',
|
||
evidenceRefs: '',
|
||
traceId: '',
|
||
}
|
||
|
||
const initialTriageDraft = {
|
||
rawIdea: '',
|
||
optionalContext: '',
|
||
}
|
||
|
||
const placementLabels: Record<AiPlacement, string> = {
|
||
now: 'Now',
|
||
next: 'Next',
|
||
later: 'Later',
|
||
parking_lot: 'Parking Lot',
|
||
rejected: 'Rejected',
|
||
duplicate: 'Duplicate',
|
||
needs_clarification: 'Needs Clarification',
|
||
}
|
||
|
||
const placementToFeatureColumn = (placement: AiPlacement): FeatureColumn =>
|
||
placement === 'now' || placement === 'next' || placement === 'later' ? placement : 'next'
|
||
|
||
const riskToPriority = (risk: RiskLevel): (typeof FEATURE_PRIORITIES)[number] =>
|
||
risk === 'low' ? 'should' : risk === 'medium' ? 'could' : 'later'
|
||
|
||
const columnLabels: Record<FeatureColumn, string> = {
|
||
now: 'Now',
|
||
next: 'Next',
|
||
later: 'Later',
|
||
done: 'Done',
|
||
}
|
||
|
||
const downloadText = (filename: string, text: string, contentType = 'text/plain;charset=utf-8') => {
|
||
const blob = new Blob([text], { type: contentType })
|
||
const url = URL.createObjectURL(blob)
|
||
const anchor = document.createElement('a')
|
||
anchor.href = url
|
||
anchor.download = filename
|
||
anchor.click()
|
||
URL.revokeObjectURL(url)
|
||
}
|
||
|
||
function App() {
|
||
const [appState, setAppState] = useState<AppState>(() => loadAppState())
|
||
const [activeTab, setActiveTab] = useState<TabKey>('feature-plan')
|
||
const [statusMessage, setStatusMessage] = useState('Seeded with BuildPulse so you can dogfood it immediately.')
|
||
const [selectedFeatureId, setSelectedFeatureId] = useState<string | null>(null)
|
||
const [selectedParkingId, setSelectedParkingId] = useState<string | null>(null)
|
||
const [selectedPulseId, setSelectedPulseId] = useState<string | null>(null)
|
||
const [featureDraft, setFeatureDraft] = useState(initialFeatureDraft)
|
||
const [parkingDraft, setParkingDraft] = useState(initialParkingDraft)
|
||
const [pulseDraft, setPulseDraft] = useState(initialPulseDraft)
|
||
const [pulseTypeFilter, setPulseTypeFilter] = useState('all')
|
||
const [pulseFeatureFilter, setPulseFeatureFilter] = useState('all')
|
||
const [pulseSourceFilter, setPulseSourceFilter] = useState('all')
|
||
const [promptTarget, setPromptTarget] = useState<(typeof PROMPT_TARGETS)[number]>('OpenClaw')
|
||
const [promptFeatureId, setPromptFeatureId] = useState('')
|
||
const [backendMode, setBackendMode] = useState<'connecting' | 'appwrite' | 'local-cache'>('connecting')
|
||
const [syncStatus, setSyncStatus] = useState<'connecting' | 'synced' | 'pending' | 'syncing' | 'degraded'>('connecting')
|
||
const [lastSyncedAt, setLastSyncedAt] = useState<string | null>(null)
|
||
const [syncAction, setSyncAction] = useState<'idle' | 'refreshing' | 'pushing'>('idle')
|
||
const [selectedStatusCardTitle, setSelectedStatusCardTitle] = useState('Project Cockpit')
|
||
const [triageOpen, setTriageOpen] = useState(false)
|
||
const [triageDraft, setTriageDraft] = useState(initialTriageDraft)
|
||
const [triageRecommendation, setTriageRecommendation] = useState<AiRecommendation | null>(null)
|
||
const [triageEditable, setTriageEditable] = useState({
|
||
placement: 'parking_lot' as AiPlacement,
|
||
risk: 'medium' as RiskLevel,
|
||
title: '',
|
||
description: '',
|
||
acceptanceCriteria: '',
|
||
parkingReason: '',
|
||
})
|
||
const [triageStatus, setTriageStatus] = useState<'idle' | 'loading' | 'ready' | 'error'>('idle')
|
||
const [triageError, setTriageError] = useState('')
|
||
const hasHydratedRemote = useRef(false)
|
||
const initialLocalStateRef = useRef(appState)
|
||
|
||
useEffect(() => {
|
||
saveAppState(appState)
|
||
}, [appState])
|
||
|
||
useEffect(() => {
|
||
let cancelled = false
|
||
|
||
const hydrate = async () => {
|
||
try {
|
||
const remoteState = await fetchRemoteState()
|
||
if (cancelled) return
|
||
|
||
const normalizedRemoteState = normalizeAppState(remoteState)
|
||
if (normalizedRemoteState) {
|
||
setAppState(normalizedRemoteState)
|
||
saveAppState(normalizedRemoteState)
|
||
setStatusMessage('Loaded state from Appwrite on the Unraid server.')
|
||
} else {
|
||
await pushRemoteState(initialLocalStateRef.current)
|
||
if (cancelled) return
|
||
setStatusMessage('Seeded Appwrite on Unraid from the local BuildPulse state.')
|
||
}
|
||
setBackendMode('appwrite')
|
||
setSyncStatus('synced')
|
||
setLastSyncedAt(nowIso())
|
||
} catch {
|
||
if (cancelled) return
|
||
setBackendMode('local-cache')
|
||
setSyncStatus('degraded')
|
||
setStatusMessage('Appwrite backend unavailable, so BuildPulse is using the local cache for now.')
|
||
} finally {
|
||
hasHydratedRemote.current = true
|
||
}
|
||
}
|
||
|
||
void hydrate()
|
||
|
||
return () => {
|
||
cancelled = true
|
||
}
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
if (!hasHydratedRemote.current || backendMode !== 'appwrite') return
|
||
|
||
setSyncStatus('pending')
|
||
const timer = window.setTimeout(() => {
|
||
setSyncStatus('syncing')
|
||
void pushRemoteState(appState)
|
||
.then(() => {
|
||
setSyncStatus('synced')
|
||
setLastSyncedAt(nowIso())
|
||
})
|
||
.catch(() => {
|
||
setBackendMode('local-cache')
|
||
setSyncStatus('degraded')
|
||
setStatusMessage('Saved locally. Appwrite sync tripped over itself, so the cache is carrying the load.')
|
||
})
|
||
}, 350)
|
||
|
||
return () => window.clearTimeout(timer)
|
||
}, [appState, backendMode])
|
||
|
||
const groupedFeatures = useMemo(
|
||
() =>
|
||
FEATURE_COLUMNS.reduce<Record<FeatureColumn, Feature[]>>((acc, column) => {
|
||
acc[column] = appState.features.filter((feature) => feature.column === column)
|
||
return acc
|
||
}, { now: [], next: [], later: [], done: [] }),
|
||
[appState.features],
|
||
)
|
||
|
||
const selectedFeature = useMemo(
|
||
() => appState.features.find((feature) => feature.id === selectedFeatureId) ?? null,
|
||
[appState.features, selectedFeatureId],
|
||
)
|
||
|
||
const selectedParkingItem = useMemo(
|
||
() => appState.parking_lot.find((item) => item.id === selectedParkingId) ?? null,
|
||
[appState.parking_lot, selectedParkingId],
|
||
)
|
||
|
||
const selectedPulse = useMemo(
|
||
() => appState.pulses.find((pulse) => pulse.id === selectedPulseId) ?? null,
|
||
[appState.pulses, selectedPulseId],
|
||
)
|
||
|
||
const featurePulseMeta = useMemo(() => {
|
||
const meta = new Map<string, { count: number; latest: PulseEvent | null }>()
|
||
|
||
for (const pulse of [...appState.pulses].sort((a, b) => b.timestamp.localeCompare(a.timestamp))) {
|
||
if (!pulse.feature_id) continue
|
||
|
||
const current = meta.get(pulse.feature_id)
|
||
if (current) {
|
||
current.count += 1
|
||
continue
|
||
}
|
||
|
||
meta.set(pulse.feature_id, { count: 1, latest: pulse })
|
||
}
|
||
|
||
return meta
|
||
}, [appState.pulses])
|
||
|
||
const selectedFeaturePulses = useMemo(() => {
|
||
if (!selectedFeature) return []
|
||
|
||
return [...appState.pulses]
|
||
.filter((pulse) => pulse.feature_id === selectedFeature.id)
|
||
.sort((a, b) => b.timestamp.localeCompare(a.timestamp))
|
||
.slice(0, 4)
|
||
}, [appState.pulses, selectedFeature])
|
||
|
||
const filteredPulses = useMemo(() => {
|
||
return [...appState.pulses]
|
||
.filter((pulse) => (pulseTypeFilter === 'all' ? true : pulse.pulse_type === pulseTypeFilter))
|
||
.filter((pulse) => (pulseFeatureFilter === 'all' ? true : pulse.feature_id === pulseFeatureFilter))
|
||
.filter((pulse) => (pulseSourceFilter === 'all' ? true : pulse.source === pulseSourceFilter || pulse.agent_id === pulseSourceFilter))
|
||
.sort((a, b) => b.timestamp.localeCompare(a.timestamp))
|
||
}, [appState.pulses, pulseFeatureFilter, pulseSourceFilter, pulseTypeFilter])
|
||
|
||
const uniqueSources = useMemo(
|
||
() => Array.from(new Set(appState.pulses.flatMap((pulse) => [pulse.source, pulse.agent_id]).filter(Boolean))).sort(),
|
||
[appState.pulses],
|
||
)
|
||
|
||
const markdownPackage = useMemo(() => createMarkdownPackage(appState), [appState])
|
||
const sessionPrompt = useMemo(
|
||
() => createAgentSessionPrompt(appState, { featureId: promptFeatureId || undefined, target: promptTarget }),
|
||
[appState, promptFeatureId, promptTarget],
|
||
)
|
||
|
||
const updateProject = (field: keyof AppState['project'], value: string) => {
|
||
setAppState((current) => ({
|
||
...current,
|
||
project: {
|
||
...current.project,
|
||
[field]: value,
|
||
updated_at: nowIso(),
|
||
},
|
||
}))
|
||
}
|
||
|
||
const beginFeatureEdit = (feature: Feature) => {
|
||
setSelectedFeatureId(feature.id)
|
||
setFeatureDraft({
|
||
title: feature.title,
|
||
description: feature.description,
|
||
column: feature.column,
|
||
priority: feature.priority,
|
||
status: feature.status,
|
||
acceptanceCriteria: arrayToLines(feature.acceptance_criteria),
|
||
scopeNotes: feature.scope_notes,
|
||
})
|
||
}
|
||
|
||
const resetFeatureDraft = () => {
|
||
setSelectedFeatureId(null)
|
||
setFeatureDraft(initialFeatureDraft)
|
||
}
|
||
|
||
const saveFeature = () => {
|
||
if (!featureDraft.title.trim()) {
|
||
setStatusMessage('Feature title is required. Tiny cockpit, tiny guardrails.')
|
||
return
|
||
}
|
||
|
||
const timestamp = nowIso()
|
||
const acceptanceCriteria = linesToArray(featureDraft.acceptanceCriteria)
|
||
|
||
if (selectedFeatureId) {
|
||
setAppState((current) => ({
|
||
...current,
|
||
features: current.features.map((feature) =>
|
||
feature.id === selectedFeatureId
|
||
? {
|
||
...feature,
|
||
title: featureDraft.title.trim(),
|
||
description: featureDraft.description.trim(),
|
||
column: featureDraft.column,
|
||
priority: featureDraft.priority,
|
||
status: featureDraft.status,
|
||
acceptance_criteria: acceptanceCriteria,
|
||
scope_notes: featureDraft.scopeNotes.trim(),
|
||
updated_at: timestamp,
|
||
}
|
||
: feature,
|
||
),
|
||
}))
|
||
setStatusMessage('Feature updated.')
|
||
} else {
|
||
const title = featureDraft.title.trim()
|
||
const id = `feature_${slugify(title)}_${Date.now().toString(36)}`
|
||
setAppState((current) => ({
|
||
...current,
|
||
features: [
|
||
{
|
||
id,
|
||
title,
|
||
description: featureDraft.description.trim(),
|
||
column: featureDraft.column,
|
||
priority: featureDraft.priority,
|
||
status: featureDraft.status,
|
||
acceptance_criteria: acceptanceCriteria,
|
||
scope_notes: featureDraft.scopeNotes.trim(),
|
||
created_at: timestamp,
|
||
updated_at: timestamp,
|
||
},
|
||
...current.features,
|
||
],
|
||
}))
|
||
setStatusMessage(`Feature “${title}” added.`)
|
||
}
|
||
|
||
resetFeatureDraft()
|
||
}
|
||
|
||
const deleteFeature = (featureId: string) => {
|
||
setAppState((current) => ({
|
||
...current,
|
||
features: current.features.filter((feature) => feature.id !== featureId),
|
||
}))
|
||
if (selectedFeatureId === featureId) resetFeatureDraft()
|
||
setStatusMessage('Feature removed. Related pulses stay intact with a graceful missing-feature label.')
|
||
}
|
||
|
||
const quickMoveFeature = (featureId: string, column: FeatureColumn) => {
|
||
setAppState((current) => ({
|
||
...current,
|
||
features: current.features.map((feature) =>
|
||
feature.id === featureId ? { ...feature, column, updated_at: nowIso() } : feature,
|
||
),
|
||
}))
|
||
}
|
||
|
||
const refreshFromBackend = async () => {
|
||
setSyncAction('refreshing')
|
||
setSyncStatus('syncing')
|
||
|
||
try {
|
||
const [health, remoteState] = await Promise.all([fetchBackendHealth(), fetchRemoteState()])
|
||
|
||
if (!health.ok) throw new Error('Backend health check failed.')
|
||
|
||
const normalizedRemoteState = normalizeAppState(remoteState)
|
||
if (normalizedRemoteState) {
|
||
setAppState(normalizedRemoteState)
|
||
saveAppState(normalizedRemoteState)
|
||
setBackendMode('appwrite')
|
||
setSyncStatus('synced')
|
||
setLastSyncedAt(nowIso())
|
||
setStatusMessage('Reloaded BuildPulse state from Appwrite.')
|
||
} else {
|
||
setBackendMode('appwrite')
|
||
setSyncStatus('synced')
|
||
setStatusMessage('Backend reachable, but there is no valid remote state to reload yet.')
|
||
}
|
||
} catch {
|
||
setBackendMode('local-cache')
|
||
setSyncStatus('degraded')
|
||
setStatusMessage('Refresh failed. Staying on the local cache until Appwrite behaves again.')
|
||
} finally {
|
||
setSyncAction('idle')
|
||
}
|
||
}
|
||
|
||
const forceSyncNow = async () => {
|
||
setSyncAction('pushing')
|
||
setSyncStatus('syncing')
|
||
|
||
try {
|
||
await pushRemoteState(appState)
|
||
setBackendMode('appwrite')
|
||
setSyncStatus('synced')
|
||
setLastSyncedAt(nowIso())
|
||
setStatusMessage('Forced a clean sync to Appwrite.')
|
||
} catch {
|
||
setBackendMode('local-cache')
|
||
setSyncStatus('degraded')
|
||
setStatusMessage('Forced sync failed. Local cache still has the wheel.')
|
||
} finally {
|
||
setSyncAction('idle')
|
||
}
|
||
}
|
||
|
||
const openTriage = (seed = '') => {
|
||
setTriageOpen(true)
|
||
setTriageError('')
|
||
setTriageStatus(triageRecommendation ? 'ready' : 'idle')
|
||
if (seed) {
|
||
setTriageDraft((current) => ({ ...current, rawIdea: seed }))
|
||
}
|
||
}
|
||
|
||
const buildAiTriageContext = () => ({
|
||
project: {
|
||
name: appState.project.name,
|
||
one_line_pitch: appState.project.one_line_pitch,
|
||
current_goal: appState.project.current_goal,
|
||
},
|
||
current_scope: {
|
||
in_scope: [
|
||
'AI classifies new ideas into Now, Next, Later, Parking Lot, Rejected, Duplicate, or Needs Clarification.',
|
||
'User accepts, edits, or rejects the recommendation.',
|
||
'Every accepted or rejected decision is logged as a DECISION pulse.',
|
||
],
|
||
out_of_scope: [
|
||
'phases',
|
||
'releases',
|
||
'agent integration',
|
||
'OpenClaw or Hermes integration',
|
||
'local/cloud model router',
|
||
'multi-project support',
|
||
'automatic feature building',
|
||
],
|
||
},
|
||
features: FEATURE_COLUMNS.reduce<Record<FeatureColumn, Array<{ id: string; title: string; description: string; scope_notes: string }>>>((acc, column) => {
|
||
acc[column] = groupedFeatures[column].map((feature) => ({
|
||
id: feature.id,
|
||
title: feature.title,
|
||
description: feature.description,
|
||
scope_notes: feature.scope_notes,
|
||
}))
|
||
return acc
|
||
}, { now: [], next: [], later: [], done: [] }),
|
||
parking_lot: appState.parking_lot.map((item) => ({
|
||
id: item.id,
|
||
title: item.title,
|
||
description: item.description,
|
||
reason_parked: item.reason_parked,
|
||
})),
|
||
recent_decisions: [...appState.pulses]
|
||
.filter((pulse) => pulse.pulse_type === 'DECISION')
|
||
.sort((a, b) => b.timestamp.localeCompare(a.timestamp))
|
||
.slice(0, 5)
|
||
.map((pulse) => ({ message: pulse.message, evidence_refs: pulse.evidence_refs })),
|
||
})
|
||
|
||
const runAiTriage = async () => {
|
||
const rawIdea = triageDraft.rawIdea.trim()
|
||
if (!rawIdea) {
|
||
setTriageError('Write the idea first. The scope goblin needs bait.')
|
||
setTriageStatus('error')
|
||
return
|
||
}
|
||
|
||
setTriageStatus('loading')
|
||
setTriageError('')
|
||
|
||
try {
|
||
const recommendation = await triageIdeaWithAi({
|
||
raw_idea: rawIdea,
|
||
optional_context: triageDraft.optionalContext.trim(),
|
||
app_context: buildAiTriageContext(),
|
||
})
|
||
const timestamp = nowIso()
|
||
const fullRecommendation: AiRecommendation = {
|
||
id: `rec_${slugify(rawIdea)}_${timestamp.replace(/[^0-9]/g, '')}`,
|
||
created_at: timestamp,
|
||
raw_idea: rawIdea,
|
||
optional_context: triageDraft.optionalContext.trim(),
|
||
context_summary: `${appState.project.name}: ${appState.project.current_goal}`,
|
||
...recommendation,
|
||
user_decision: 'pending',
|
||
created_feature_id: null,
|
||
created_parking_item_id: null,
|
||
decision_pulse_id: null,
|
||
}
|
||
|
||
setTriageRecommendation(fullRecommendation)
|
||
saveTriageRecommendation(fullRecommendation)
|
||
setTriageEditable({
|
||
placement: fullRecommendation.suggested_placement,
|
||
risk: fullRecommendation.scope_risk,
|
||
title: fullRecommendation.suggested_title,
|
||
description: fullRecommendation.suggested_description,
|
||
acceptanceCriteria: fullRecommendation.suggested_acceptance_criteria.join('\n'),
|
||
parkingReason: fullRecommendation.suggested_parking_reason || fullRecommendation.reason,
|
||
})
|
||
setTriageStatus('ready')
|
||
setStatusMessage(`AI suggested ${placementLabels[fullRecommendation.suggested_placement]} with ${fullRecommendation.scope_risk} scope risk.`)
|
||
} catch (error) {
|
||
setTriageStatus('error')
|
||
setTriageError(error instanceof Error ? error.message : 'AI triage failed.')
|
||
setStatusMessage('AI triage failed. Manual planning still works.')
|
||
}
|
||
}
|
||
|
||
const createTriageDecisionPulse = (recommendation: AiRecommendation, decision: string, featureId?: string) => {
|
||
const timestamp = nowIso()
|
||
return {
|
||
id: `pulse_${Date.now().toString(36)}`,
|
||
timestamp,
|
||
project_id: appState.project.id,
|
||
feature_id: featureId,
|
||
source: 'ai_triage',
|
||
agent_id: 'buildpulse_ai',
|
||
pulse_type: 'DECISION' as const,
|
||
message: `AI triaged idea “${recommendation.raw_idea}” as ${placementLabels[recommendation.suggested_placement]} with ${recommendation.scope_risk} scope risk. User decision: ${decision}.`,
|
||
confidence_score: recommendation.confidence_score,
|
||
evidence_refs: [
|
||
'BuildPulse v0.2 AI Idea Placement',
|
||
appState.project.current_goal || 'Current project goal',
|
||
recommendation.reason,
|
||
`Smallest safe version: ${recommendation.smallest_safe_version}`,
|
||
],
|
||
trace_id: recommendation.id,
|
||
}
|
||
}
|
||
|
||
const saveTriageRecommendation = (recommendation: AiRecommendation) => {
|
||
setAppState((current) => ({
|
||
...current,
|
||
ai_recommendations: [recommendation, ...current.ai_recommendations.filter((entry) => entry.id !== recommendation.id)],
|
||
}))
|
||
}
|
||
|
||
const acceptTriageAsFeature = () => {
|
||
if (!triageRecommendation) return
|
||
const title = triageEditable.title.trim() || triageRecommendation.suggested_title
|
||
const timestamp = nowIso()
|
||
const featureId = `feature_${slugify(title)}_${Date.now().toString(36)}`
|
||
const pulse = createTriageDecisionPulse(triageRecommendation, 'accepted_as_feature', featureId)
|
||
const updatedRecommendation: AiRecommendation = {
|
||
...triageRecommendation,
|
||
suggested_placement: triageEditable.placement,
|
||
scope_risk: triageEditable.risk,
|
||
suggested_title: title,
|
||
suggested_description: triageEditable.description.trim(),
|
||
suggested_acceptance_criteria: linesToArray(triageEditable.acceptanceCriteria),
|
||
user_decision: 'accepted_as_feature',
|
||
created_feature_id: featureId,
|
||
created_parking_item_id: null,
|
||
decision_pulse_id: pulse.id,
|
||
}
|
||
|
||
setAppState((current) => ({
|
||
...current,
|
||
features: [
|
||
{
|
||
id: featureId,
|
||
title,
|
||
description: triageEditable.description.trim(),
|
||
column: placementToFeatureColumn(triageEditable.placement),
|
||
priority: riskToPriority(triageEditable.risk),
|
||
status: 'idea',
|
||
acceptance_criteria: linesToArray(triageEditable.acceptanceCriteria),
|
||
scope_notes: [`AI triage: ${triageRecommendation.reason}`, `Smallest safe version: ${triageRecommendation.smallest_safe_version}`].join('\n'),
|
||
created_at: timestamp,
|
||
updated_at: timestamp,
|
||
},
|
||
...current.features,
|
||
],
|
||
pulses: [pulse, ...current.pulses],
|
||
ai_recommendations: [updatedRecommendation, ...current.ai_recommendations.filter((entry) => entry.id !== updatedRecommendation.id)],
|
||
}))
|
||
setSelectedFeatureId(featureId)
|
||
setActiveTab('feature-plan')
|
||
setStatusMessage(`Accepted AI triage as feature “${title}”. DECISION pulse logged.`)
|
||
}
|
||
|
||
const acceptTriageAsParkingLot = () => {
|
||
if (!triageRecommendation) return
|
||
const title = triageEditable.title.trim() || triageRecommendation.suggested_title
|
||
const timestamp = nowIso()
|
||
const parkingId = `parked_${slugify(title)}_${Date.now().toString(36)}`
|
||
const pulse = createTriageDecisionPulse(triageRecommendation, 'accepted_as_parking_lot')
|
||
const updatedRecommendation: AiRecommendation = {
|
||
...triageRecommendation,
|
||
suggested_placement: 'parking_lot',
|
||
scope_risk: triageEditable.risk,
|
||
suggested_title: title,
|
||
suggested_description: triageEditable.description.trim(),
|
||
suggested_parking_reason: triageEditable.parkingReason.trim(),
|
||
user_decision: 'accepted_as_parking_lot',
|
||
created_feature_id: null,
|
||
created_parking_item_id: parkingId,
|
||
decision_pulse_id: pulse.id,
|
||
}
|
||
|
||
setAppState((current) => ({
|
||
...current,
|
||
parking_lot: [
|
||
{
|
||
id: parkingId,
|
||
title,
|
||
description: triageEditable.description.trim(),
|
||
reason_parked: triageEditable.parkingReason.trim() || triageRecommendation.reason,
|
||
possible_future_placement: triageEditable.placement === 'later' ? 'Later' : 'v0.3+',
|
||
risk_level: triageEditable.risk,
|
||
created_at: timestamp,
|
||
updated_at: timestamp,
|
||
},
|
||
...current.parking_lot,
|
||
],
|
||
pulses: [pulse, ...current.pulses],
|
||
ai_recommendations: [updatedRecommendation, ...current.ai_recommendations.filter((entry) => entry.id !== updatedRecommendation.id)],
|
||
}))
|
||
setSelectedParkingId(parkingId)
|
||
setActiveTab('parking-lot')
|
||
setStatusMessage(`Accepted AI triage as Parking Lot item “${title}”. DECISION pulse logged.`)
|
||
}
|
||
|
||
const rejectTriageRecommendation = () => {
|
||
if (!triageRecommendation) return
|
||
const pulse = createTriageDecisionPulse(triageRecommendation, 'rejected')
|
||
const updatedRecommendation: AiRecommendation = {
|
||
...triageRecommendation,
|
||
user_decision: 'rejected',
|
||
decision_pulse_id: pulse.id,
|
||
}
|
||
|
||
setAppState((current) => ({
|
||
...current,
|
||
pulses: [pulse, ...current.pulses],
|
||
ai_recommendations: [updatedRecommendation, ...current.ai_recommendations.filter((entry) => entry.id !== updatedRecommendation.id)],
|
||
}))
|
||
setStatusMessage('Rejected AI triage recommendation. DECISION pulse logged; no feature created.')
|
||
}
|
||
|
||
const openFeatureHandoff = (featureId: string) => {
|
||
setPromptFeatureId(featureId)
|
||
setPromptTarget('OpenClaw')
|
||
setActiveTab('export')
|
||
|
||
const feature = appState.features.find((entry) => entry.id === featureId)
|
||
setStatusMessage(feature ? `Prepared AI handoff for “${feature.title}”.` : 'Prepared AI handoff prompt.')
|
||
}
|
||
|
||
const openFeaturePulse = (featureId: string) => {
|
||
const feature = appState.features.find((entry) => entry.id === featureId)
|
||
setSelectedPulseId(null)
|
||
setPulseDraft((current) => ({
|
||
...initialPulseDraft,
|
||
source: current.source,
|
||
agentId: current.agentId,
|
||
featureId,
|
||
pulseType: 'ACTION',
|
||
}))
|
||
setActiveTab('pulse-log')
|
||
setStatusMessage(feature ? `Pulse composer aimed at “${feature.title}”.` : 'Pulse composer ready.')
|
||
}
|
||
|
||
const beginParkingEdit = (item: ParkingLotItem) => {
|
||
setSelectedParkingId(item.id)
|
||
setParkingDraft({
|
||
title: item.title,
|
||
description: item.description,
|
||
reasonParked: item.reason_parked,
|
||
futurePlacement: item.possible_future_placement,
|
||
riskLevel: item.risk_level,
|
||
})
|
||
}
|
||
|
||
const resetParkingDraft = () => {
|
||
setSelectedParkingId(null)
|
||
setParkingDraft(initialParkingDraft)
|
||
}
|
||
|
||
const saveParkingItem = () => {
|
||
if (!parkingDraft.title.trim()) {
|
||
setStatusMessage('Parking Lot items need a title.')
|
||
return
|
||
}
|
||
|
||
const timestamp = nowIso()
|
||
if (selectedParkingId) {
|
||
setAppState((current) => ({
|
||
...current,
|
||
parking_lot: current.parking_lot.map((item) =>
|
||
item.id === selectedParkingId
|
||
? {
|
||
...item,
|
||
title: parkingDraft.title.trim(),
|
||
description: parkingDraft.description.trim(),
|
||
reason_parked: parkingDraft.reasonParked.trim(),
|
||
possible_future_placement: parkingDraft.futurePlacement.trim(),
|
||
risk_level: parkingDraft.riskLevel,
|
||
updated_at: timestamp,
|
||
}
|
||
: item,
|
||
),
|
||
}))
|
||
setStatusMessage('Parking Lot item updated.')
|
||
} else {
|
||
const title = parkingDraft.title.trim()
|
||
setAppState((current) => ({
|
||
...current,
|
||
parking_lot: [
|
||
{
|
||
id: `parked_${slugify(title)}_${Date.now().toString(36)}`,
|
||
title,
|
||
description: parkingDraft.description.trim(),
|
||
reason_parked: parkingDraft.reasonParked.trim(),
|
||
possible_future_placement: parkingDraft.futurePlacement.trim(),
|
||
risk_level: parkingDraft.riskLevel,
|
||
created_at: timestamp,
|
||
updated_at: timestamp,
|
||
},
|
||
...current.parking_lot,
|
||
],
|
||
}))
|
||
setStatusMessage(`Parked “${title}” safely.`)
|
||
}
|
||
|
||
resetParkingDraft()
|
||
}
|
||
|
||
const deleteParkingItem = (itemId: string) => {
|
||
setAppState((current) => ({
|
||
...current,
|
||
parking_lot: current.parking_lot.filter((item) => item.id !== itemId),
|
||
}))
|
||
if (selectedParkingId === itemId) resetParkingDraft()
|
||
setStatusMessage('Parking Lot item removed.')
|
||
}
|
||
|
||
const convertParkingItemToFeature = (item: ParkingLotItem) => {
|
||
const timestamp = nowIso()
|
||
setAppState((current) => ({
|
||
...current,
|
||
features: [
|
||
{
|
||
id: `feature_${slugify(item.title)}_${Date.now().toString(36)}`,
|
||
title: item.title,
|
||
description: item.description,
|
||
column: 'next',
|
||
priority: 'could',
|
||
status: 'idea',
|
||
acceptance_criteria: [],
|
||
scope_notes: `Converted from Parking Lot. Original reason parked: ${item.reason_parked}`,
|
||
created_at: timestamp,
|
||
updated_at: timestamp,
|
||
},
|
||
...current.features,
|
||
],
|
||
parking_lot: current.parking_lot.filter((entry) => entry.id !== item.id),
|
||
pulses: [
|
||
{
|
||
id: `pulse_${Date.now().toString(36)}`,
|
||
timestamp,
|
||
project_id: current.project.id,
|
||
source: 'manual',
|
||
agent_id: current.settings.default_agent_id,
|
||
pulse_type: 'PARKED_IDEA',
|
||
message: `Converted parked idea “${item.title}” into a Next feature.`,
|
||
confidence_score: 0.8,
|
||
evidence_refs: ['Converted from Parking Lot'],
|
||
},
|
||
...current.pulses,
|
||
],
|
||
}))
|
||
setStatusMessage(`Converted “${item.title}” into a feature.`)
|
||
if (selectedParkingId === item.id) resetParkingDraft()
|
||
}
|
||
|
||
const beginPulseEdit = (pulse: PulseEvent) => {
|
||
setSelectedPulseId(pulse.id)
|
||
setPulseDraft({
|
||
featureId: pulse.feature_id ?? '',
|
||
source: pulse.source,
|
||
agentId: pulse.agent_id,
|
||
pulseType: pulse.pulse_type,
|
||
message: pulse.message,
|
||
confidence: String(pulse.confidence_score),
|
||
evidenceRefs: arrayToLines(pulse.evidence_refs),
|
||
traceId: pulse.trace_id ?? '',
|
||
})
|
||
}
|
||
|
||
const resetPulseDraft = () => {
|
||
setSelectedPulseId(null)
|
||
setPulseDraft(initialPulseDraft)
|
||
}
|
||
|
||
const savePulse = () => {
|
||
if (!pulseDraft.message.trim()) {
|
||
setStatusMessage('Pulse message is required.')
|
||
return
|
||
}
|
||
|
||
const timestamp = nowIso()
|
||
const pulse: PulseEvent = {
|
||
id: selectedPulseId ?? `pulse_${Date.now().toString(36)}`,
|
||
timestamp: selectedPulse?.timestamp ?? timestamp,
|
||
project_id: appState.project.id,
|
||
feature_id: pulseDraft.featureId || undefined,
|
||
source: pulseDraft.source.trim() || 'manual',
|
||
agent_id: pulseDraft.agentId.trim() || appState.settings.default_agent_id,
|
||
pulse_type: pulseDraft.pulseType,
|
||
message: pulseDraft.message.trim(),
|
||
confidence_score: Number(pulseDraft.confidence) || 0,
|
||
evidence_refs: linesToArray(pulseDraft.evidenceRefs),
|
||
trace_id: pulseDraft.traceId.trim() || undefined,
|
||
}
|
||
|
||
if (selectedPulseId) {
|
||
setAppState((current) => ({
|
||
...current,
|
||
pulses: current.pulses.map((entry) => (entry.id === selectedPulseId ? pulse : entry)),
|
||
}))
|
||
setStatusMessage('Pulse updated.')
|
||
} else {
|
||
setAppState((current) => ({
|
||
...current,
|
||
pulses: [pulse, ...current.pulses],
|
||
}))
|
||
setStatusMessage('Pulse added.')
|
||
}
|
||
|
||
resetPulseDraft()
|
||
}
|
||
|
||
const deletePulse = (pulseId: string) => {
|
||
setAppState((current) => ({
|
||
...current,
|
||
pulses: current.pulses.filter((pulse) => pulse.id !== pulseId),
|
||
}))
|
||
if (selectedPulseId === pulseId) resetPulseDraft()
|
||
setStatusMessage('Pulse deleted.')
|
||
}
|
||
|
||
const copyMarkdown = async (filename: string) => {
|
||
try {
|
||
await navigator.clipboard.writeText(markdownPackage[filename as keyof typeof markdownPackage])
|
||
setStatusMessage(`${filename} copied to clipboard.`)
|
||
} catch {
|
||
setStatusMessage('Clipboard copy failed. Browser said no.')
|
||
}
|
||
}
|
||
|
||
const copySessionPrompt = async () => {
|
||
try {
|
||
await navigator.clipboard.writeText(sessionPrompt)
|
||
setStatusMessage('AI session prompt copied to clipboard.')
|
||
} catch {
|
||
setStatusMessage('Clipboard copy failed. Browser said no.')
|
||
}
|
||
}
|
||
|
||
const handleImport = async (event: ChangeEvent<HTMLInputElement>) => {
|
||
const file = event.target.files?.[0]
|
||
if (!file) return
|
||
|
||
try {
|
||
const text = await file.text()
|
||
const parsed = JSON.parse(text)
|
||
const normalized = normalizeAppState(parsed)
|
||
if (!normalized) {
|
||
setStatusMessage('Import failed: invalid BuildPulse schema or unsupported version.')
|
||
return
|
||
}
|
||
setAppState(replaceAppState(normalized))
|
||
setStatusMessage('Import complete. State replaced cleanly.')
|
||
} catch {
|
||
setStatusMessage('Import failed: invalid JSON.')
|
||
} finally {
|
||
event.target.value = ''
|
||
}
|
||
}
|
||
|
||
const currentFeatureCount = groupedFeatures.now.length
|
||
const recentPulsePreview = [...appState.pulses].sort((a, b) => b.timestamp.localeCompare(a.timestamp)).slice(0, 3)
|
||
const completedFeatureCount = groupedFeatures.done.length
|
||
const statusCards = [
|
||
{
|
||
title: 'Project Cockpit',
|
||
status: 'live',
|
||
description: 'Single-project mission, goal, notes, and focus statistics stay visible before the board tries to swallow the room.',
|
||
signal: appState.project.current_goal ? 'Goal set' : 'Needs current goal',
|
||
metric: appState.project.name,
|
||
action: 'Edit summary',
|
||
tab: 'status' as TabKey,
|
||
operatorNote: 'Use this when the project starts drifting and the cockpit needs a clean north star again.',
|
||
evidence: ['Project summary fields are editable inline.', 'Hero stats reflect live feature, parking, and pulse counts.', 'Current goal is always visible in the page header.'],
|
||
next: 'Add an inline “goal changed” pulse when the current goal is edited.',
|
||
},
|
||
{
|
||
title: 'Feature Plan',
|
||
status: currentFeatureCount ? 'active' : 'ready',
|
||
description: 'Now / Next / Later / Done columns keep work small, shaped, and movable without becoming Jira in a fake moustache.',
|
||
signal: `${appState.features.length} total · ${currentFeatureCount} now · ${completedFeatureCount} done`,
|
||
metric: `${currentFeatureCount} now`,
|
||
action: 'Open board',
|
||
tab: 'feature-plan' as TabKey,
|
||
operatorNote: 'Use this to decide what is actively being built and what should stay out of the way.',
|
||
evidence: ['Four columns: Now, Next, Later, Done.', 'Cards show priority, status, acceptance criteria count, and linked pulse activity.', 'Selected features expose focus notes, criteria, recent pulses, handoff, and pulse actions.'],
|
||
next: 'Add a readiness checklist that highlights missing acceptance criteria before work starts.',
|
||
},
|
||
{
|
||
title: 'Parking Lot',
|
||
status: appState.parking_lot.length ? 'active' : 'ready',
|
||
description: 'Useful distractions get captured, risk-tagged, and converted into features only when they earn their keep.',
|
||
signal: `${appState.parking_lot.length} parked idea${appState.parking_lot.length === 1 ? '' : 's'}`,
|
||
metric: `${appState.parking_lot.length} parked`,
|
||
action: 'Review parked',
|
||
tab: 'parking-lot' as TabKey,
|
||
operatorNote: 'Use this when an idea is useful but too distracting to deserve active build attention yet.',
|
||
evidence: ['Parked ideas carry risk level, reason parked, and possible future placement.', 'A parked idea can be converted into a real feature.', 'Parking keeps future options visible without polluting Now.'],
|
||
next: 'Add a “promote candidate” signal for parked items that keep reappearing in pulses.',
|
||
},
|
||
{
|
||
title: 'Pulse Log',
|
||
status: appState.pulses.length ? 'active' : 'ready',
|
||
description: 'Intent, decisions, blockers, test results, and outcomes form a future-compatible trail for agents and humans.',
|
||
signal: recentPulsePreview[0] ? `Latest: ${recentPulsePreview[0].pulse_type}` : 'No pulses yet',
|
||
metric: `${appState.pulses.length} pulses`,
|
||
action: 'Open log',
|
||
tab: 'pulse-log' as TabKey,
|
||
operatorNote: 'Use this as the honest activity ledger: intent, action, decision, blocker, result.',
|
||
evidence: ['Pulses can link to features.', 'Filters support pulse type, feature, source, and agent.', 'Recent pulse previews surface movement on the Feature Plan.'],
|
||
next: 'Add one-click TEST_RESULT and DECISION templates from the functionality detail panel.',
|
||
},
|
||
{
|
||
title: 'AI Handoff + Export',
|
||
status: 'live',
|
||
description: 'Generate JSON, JSONL, Markdown packages, and focused session prompts so coding agents get context without soup.',
|
||
signal: `${Object.keys(markdownPackage).length} markdown files ready`,
|
||
metric: 'handoff ready',
|
||
action: 'Export context',
|
||
tab: 'export' as TabKey,
|
||
operatorNote: 'Use this when another agent or coding session needs clean context without archaeology.',
|
||
evidence: ['JSON export preserves full app state.', 'JSONL export carries pulse history.', 'Markdown package includes agent-facing project, feature, parking, pulse, and context files.'],
|
||
next: 'Add a “copy focused handoff” button directly on each capability detail.',
|
||
},
|
||
{
|
||
title: 'Appwrite Sync',
|
||
status: backendMode === 'appwrite' && syncStatus === 'synced' ? 'live' : syncStatus === 'degraded' ? 'degraded' : 'syncing',
|
||
description: 'Infrastructure sync persists the local cockpit state to the Appwrite runtime document without becoming the product center.',
|
||
signal: backendMode === 'appwrite' ? `Sync status: ${syncStatus}` : 'Local cache fallback active',
|
||
metric: backendMode === 'appwrite' ? 'Appwrite' : 'cache',
|
||
action: 'Refresh state',
|
||
tab: 'status' as TabKey,
|
||
operatorNote: 'Use this only for operator recovery when browser state and backend truth need to be reconciled deliberately.',
|
||
evidence: ['Public health endpoint reports backend=appwrite.', 'Refresh from backend pulls the Appwrite document into local state.', 'Force sync now pushes the current cockpit state back to Appwrite.'],
|
||
next: 'Expose last successful pull/push direction as sync provenance.',
|
||
},
|
||
]
|
||
const selectedStatusCard = statusCards.find((card) => card.title === selectedStatusCardTitle) ?? statusCards[0]
|
||
const backendLabel =
|
||
backendMode === 'appwrite' ? 'Appwrite backend · Unraid server' : backendMode === 'connecting' ? 'Connecting to Appwrite…' : 'Local cache fallback'
|
||
const syncLabel =
|
||
syncStatus === 'synced'
|
||
? `Synced${lastSyncedAt ? ` ${formatDateTime(lastSyncedAt)}` : ''}`
|
||
: syncStatus === 'pending'
|
||
? 'Changes queued'
|
||
: syncStatus === 'syncing'
|
||
? 'Syncing now…'
|
||
: syncStatus === 'degraded'
|
||
? 'Sync degraded · local cache active'
|
||
: 'Connecting…'
|
||
|
||
return (
|
||
<div className="app-shell">
|
||
<nav className="tab-bar" aria-label="BuildPulse v0.1 views" role="tablist">
|
||
{TABS.map((tab) => (
|
||
<button
|
||
key={tab.key}
|
||
type="button"
|
||
role="tab"
|
||
aria-selected={tab.key === activeTab}
|
||
className={tab.key === activeTab ? 'tab active' : 'tab'}
|
||
onClick={() => setActiveTab(tab.key)}
|
||
>
|
||
{tab.label}
|
||
</button>
|
||
))}
|
||
</nav>
|
||
|
||
<aside className="secondary-nav card" aria-label="Secondary tools">
|
||
<div>
|
||
<span className="eyebrow">Local-first cockpit</span>
|
||
<p>Appwrite sync is infrastructure. Planning still belongs in the four v0.1 tabs.</p>
|
||
</div>
|
||
<button type="button" className={activeTab === 'status' ? 'ghost small active-secondary' : 'ghost small'} onClick={() => setActiveTab('status')}>
|
||
System Status
|
||
</button>
|
||
</aside>
|
||
|
||
{triageOpen && (
|
||
<section className="card triage-panel" aria-label="AI Idea Placement">
|
||
<div className="section-heading compact">
|
||
<div>
|
||
<p className="eyebrow">BuildPulse v0.2</p>
|
||
<h2>AI Idea Placement</h2>
|
||
<p>AI advises where a raw idea belongs. You decide what gets saved.</p>
|
||
</div>
|
||
<button type="button" className="ghost small" onClick={() => setTriageOpen(false)}>
|
||
Close
|
||
</button>
|
||
</div>
|
||
|
||
<div className="triage-layout">
|
||
<div className="triage-input">
|
||
<label>
|
||
Raw idea
|
||
<textarea
|
||
rows={4}
|
||
value={triageDraft.rawIdea}
|
||
onChange={(event) => setTriageDraft((current) => ({ ...current, rawIdea: event.target.value }))}
|
||
placeholder="Example: Add live WebSocket agent telemetry"
|
||
/>
|
||
</label>
|
||
<label>
|
||
Optional context
|
||
<textarea
|
||
rows={3}
|
||
value={triageDraft.optionalContext}
|
||
onChange={(event) => setTriageDraft((current) => ({ ...current, optionalContext: event.target.value }))}
|
||
placeholder="Anything the scope guardian should know. Keep it short."
|
||
/>
|
||
</label>
|
||
<div className="button-inline-row">
|
||
<button type="button" onClick={() => void runAiTriage()} disabled={triageStatus === 'loading'}>
|
||
{triageStatus === 'loading' ? 'Analyzing…' : 'Analyze Idea'}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="ghost"
|
||
onClick={() => {
|
||
setTriageDraft(initialTriageDraft)
|
||
setTriageRecommendation(null)
|
||
setTriageStatus('idle')
|
||
setTriageError('')
|
||
}}
|
||
>
|
||
Clear
|
||
</button>
|
||
</div>
|
||
{triageStatus === 'error' && <p className="triage-error">{triageError}</p>}
|
||
</div>
|
||
|
||
<div className="triage-result">
|
||
{triageRecommendation ? (
|
||
<>
|
||
<div className="triage-result-header">
|
||
<span className="pill status-healthy">{placementLabels[triageRecommendation.suggested_placement]}</span>
|
||
<span className={`pill risk-${triageRecommendation.scope_risk}`}>{triageRecommendation.scope_risk} risk</span>
|
||
<span className="pill">{Math.round(triageRecommendation.confidence_score * 100)}% confidence</span>
|
||
</div>
|
||
<div className="triage-callout">
|
||
<strong>Reason</strong>
|
||
<p>{triageRecommendation.reason}</p>
|
||
<strong>Smallest safe version</strong>
|
||
<p>{triageRecommendation.smallest_safe_version}</p>
|
||
</div>
|
||
{triageRecommendation.duplicate_check.is_duplicate && (
|
||
<div className="triage-callout warning">
|
||
<strong>Possible duplicate</strong>
|
||
<p>{triageRecommendation.duplicate_check.reason || 'AI detected overlap with an existing item.'}</p>
|
||
<small>{triageRecommendation.duplicate_check.duplicate_type}: {triageRecommendation.duplicate_check.duplicate_id}</small>
|
||
</div>
|
||
)}
|
||
{triageRecommendation.clarifying_question && (
|
||
<div className="triage-callout warning">
|
||
<strong>Clarifying question</strong>
|
||
<p>{triageRecommendation.clarifying_question}</p>
|
||
</div>
|
||
)}
|
||
|
||
<div className="form-grid">
|
||
<label>
|
||
Placement
|
||
<select value={triageEditable.placement} onChange={(event) => setTriageEditable((current) => ({ ...current, placement: event.target.value as AiPlacement }))}>
|
||
{AI_PLACEMENTS.map((placement) => (
|
||
<option key={placement} value={placement}>{placementLabels[placement]}</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
<label>
|
||
Scope risk
|
||
<select value={triageEditable.risk} onChange={(event) => setTriageEditable((current) => ({ ...current, risk: event.target.value as RiskLevel }))}>
|
||
{RISK_LEVELS.map((risk) => (
|
||
<option key={risk} value={risk}>{risk}</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
<label className="full-span">
|
||
Suggested title
|
||
<input value={triageEditable.title} onChange={(event) => setTriageEditable((current) => ({ ...current, title: event.target.value }))} />
|
||
</label>
|
||
<label className="full-span">
|
||
Suggested description
|
||
<textarea rows={3} value={triageEditable.description} onChange={(event) => setTriageEditable((current) => ({ ...current, description: event.target.value }))} />
|
||
</label>
|
||
<label className="full-span">
|
||
Acceptance criteria, if saved as feature
|
||
<textarea rows={4} value={triageEditable.acceptanceCriteria} onChange={(event) => setTriageEditable((current) => ({ ...current, acceptanceCriteria: event.target.value }))} />
|
||
</label>
|
||
<label className="full-span">
|
||
Parking reason, if parked
|
||
<textarea rows={3} value={triageEditable.parkingReason} onChange={(event) => setTriageEditable((current) => ({ ...current, parkingReason: event.target.value }))} />
|
||
</label>
|
||
</div>
|
||
<div className="button-row">
|
||
<button type="button" onClick={acceptTriageAsFeature}>Accept as Feature</button>
|
||
<button type="button" onClick={acceptTriageAsParkingLot}>Accept as Parking Lot</button>
|
||
<button type="button" className="danger" onClick={rejectTriageRecommendation}>Reject + Log Decision</button>
|
||
</div>
|
||
</>
|
||
) : (
|
||
<div className="empty-state">No recommendation yet. Feed the scope guardian one idea, not the whole haunted roadmap.</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{activeTab === 'feature-plan' && (
|
||
<>
|
||
<header className="hero-card">
|
||
<div>
|
||
<p className="eyebrow">BuildPulse v0.1</p>
|
||
<h1>{appState.project.name}</h1>
|
||
<p className="hero-copy">{appState.project.one_line_pitch}</p>
|
||
<p className="hero-goal">
|
||
<strong>Current goal:</strong> {appState.project.current_goal || 'Set a goal so the cockpit has a heading.'}
|
||
</p>
|
||
</div>
|
||
<div className="hero-stats">
|
||
<div>
|
||
<span>Now</span>
|
||
<strong>{currentFeatureCount}</strong>
|
||
</div>
|
||
<div>
|
||
<span>Parked</span>
|
||
<strong>{appState.parking_lot.length}</strong>
|
||
</div>
|
||
<div>
|
||
<span>Pulses</span>
|
||
<strong>{appState.pulses.length}</strong>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<section className="project-card card">
|
||
<div className="section-heading compact">
|
||
<div>
|
||
<h2>Project Summary</h2>
|
||
<p>Keep the mission clear without turning this into enterprise theater.</p>
|
||
</div>
|
||
</div>
|
||
<div className="form-grid project-grid">
|
||
<label>
|
||
Project name
|
||
<input value={appState.project.name} onChange={(event) => updateProject('name', event.target.value)} />
|
||
</label>
|
||
<label>
|
||
One-line pitch
|
||
<input
|
||
value={appState.project.one_line_pitch}
|
||
onChange={(event) => updateProject('one_line_pitch', event.target.value)}
|
||
/>
|
||
</label>
|
||
<label className="full-span">
|
||
Description
|
||
<textarea
|
||
rows={3}
|
||
value={appState.project.description}
|
||
onChange={(event) => updateProject('description', event.target.value)}
|
||
/>
|
||
</label>
|
||
<label className="full-span">
|
||
Current goal
|
||
<input value={appState.project.current_goal} onChange={(event) => updateProject('current_goal', event.target.value)} />
|
||
</label>
|
||
<label className="full-span">
|
||
Notes
|
||
<textarea rows={3} value={appState.project.notes} onChange={(event) => updateProject('notes', event.target.value)} />
|
||
</label>
|
||
</div>
|
||
</section>
|
||
|
||
<div className="quick-actions card">
|
||
<button type="button" onClick={() => { setActiveTab('feature-plan'); resetFeatureDraft() }}>
|
||
Add Feature
|
||
</button>
|
||
<button type="button" onClick={() => { setActiveTab('parking-lot'); resetParkingDraft() }}>
|
||
Park Idea
|
||
</button>
|
||
<button type="button" onClick={() => { setActiveTab('pulse-log'); resetPulseDraft() }}>
|
||
Add Pulse
|
||
</button>
|
||
<button type="button" onClick={() => setActiveTab('export')}>
|
||
Export
|
||
</button>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{activeTab === 'status' && (
|
||
<section className="view-stack">
|
||
<div className="section-heading">
|
||
<div>
|
||
<h2>System Status</h2>
|
||
<p>Secondary infrastructure view: what exists, what is parked, and whether sync is healthy. The product center stays Feature Plan, Parking Lot, Pulse Log, and Export.</p>
|
||
</div>
|
||
<div className="functionality-summary">
|
||
<span className="pill status-healthy">NPM live</span>
|
||
<span className="pill status-healthy">Appwrite backed</span>
|
||
<span className="pill">Unraid runtime</span>
|
||
</div>
|
||
</div>
|
||
|
||
<section className="card functionality-hero">
|
||
<div>
|
||
<p className="eyebrow">Secondary status</p>
|
||
<h3>{appState.project.name} is a local-first v0.1 cockpit with Appwrite sync support.</h3>
|
||
<p>
|
||
The planning loop works from browser storage first, then syncs to Appwrite for the deployed Unraid runtime. If sync degrades, the cockpit should still stay usable locally.
|
||
</p>
|
||
</div>
|
||
<div className="functionality-scorecard">
|
||
<div>
|
||
<span>v0.1 screens</span>
|
||
<strong>{statusCards.filter((card) => card.status === 'live' || card.status === 'active').length}</strong>
|
||
</div>
|
||
<div>
|
||
<span>Operator recovery</span>
|
||
<strong>{backendMode === 'appwrite' ? 'Ready' : 'Cache'}</strong>
|
||
</div>
|
||
<div>
|
||
<span>Context packages</span>
|
||
<strong>{Object.keys(markdownPackage).length}</strong>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="card infrastructure-panel">
|
||
<div className="section-heading compact">
|
||
<div>
|
||
<p className="eyebrow">Infrastructure / Dev</p>
|
||
<h3>Appwrite sync controls</h3>
|
||
<p>Available for recovery and verification, deliberately kept out of the primary product flow.</p>
|
||
</div>
|
||
</div>
|
||
<div className="status-strip-row">
|
||
<span className={`pill status-${backendMode === 'appwrite' ? 'healthy' : backendMode === 'connecting' ? 'connecting' : 'degraded'}`}>
|
||
{backendLabel}
|
||
</span>
|
||
<span className={`pill status-${syncStatus === 'synced' ? 'healthy' : syncStatus === 'pending' || syncStatus === 'syncing' || syncStatus === 'connecting' ? 'connecting' : 'degraded'}`}>
|
||
{syncLabel}
|
||
</span>
|
||
</div>
|
||
<div className="button-inline-row">
|
||
<button type="button" className="ghost small" disabled={syncAction !== 'idle'} onClick={() => void refreshFromBackend()}>
|
||
{syncAction === 'refreshing' ? 'Refreshing…' : 'Refresh from backend'}
|
||
</button>
|
||
<button type="button" className="ghost small" disabled={syncAction !== 'idle'} onClick={() => void forceSyncNow()}>
|
||
{syncAction === 'pushing' ? 'Syncing…' : 'Force sync now'}
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<div className="functionality-grid">
|
||
{statusCards.map((card) => (
|
||
<article key={card.title} className={`card functionality-card functionality-${card.status}`}>
|
||
<div className="item-card-header">
|
||
<div>
|
||
<p className="eyebrow">{card.status}</p>
|
||
<h3>{card.title}</h3>
|
||
</div>
|
||
<span className="pill">{card.metric}</span>
|
||
</div>
|
||
<p>{card.description}</p>
|
||
<div className="functionality-signal">
|
||
<span>{card.signal}</span>
|
||
<div className="button-inline-row">
|
||
<button type="button" className="ghost small" onClick={() => setSelectedStatusCardTitle(card.title)}>
|
||
Inspect
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="ghost small"
|
||
onClick={() => {
|
||
if (card.title === 'Appwrite Sync') {
|
||
void refreshFromBackend()
|
||
} else {
|
||
setActiveTab(card.tab)
|
||
}
|
||
}}
|
||
>
|
||
{card.action}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
))}
|
||
</div>
|
||
|
||
<section className="card functionality-detail">
|
||
<div className="section-heading compact">
|
||
<div>
|
||
<p className="eyebrow">Selected status card</p>
|
||
<h3>{selectedStatusCard.title}</h3>
|
||
<p>{selectedStatusCard.operatorNote}</p>
|
||
</div>
|
||
<span className={`pill functionality-${selectedStatusCard.status}`}>{selectedStatusCard.status}</span>
|
||
</div>
|
||
<div className="functionality-detail-grid">
|
||
<article>
|
||
<h4>Proof it exists</h4>
|
||
<ul>
|
||
{selectedStatusCard.evidence.map((item) => (
|
||
<li key={item}>{item}</li>
|
||
))}
|
||
</ul>
|
||
</article>
|
||
<article>
|
||
<h4>Current signal</h4>
|
||
<p>{selectedStatusCard.signal}</p>
|
||
<h4>Next useful improvement</h4>
|
||
<p>{selectedStatusCard.next}</p>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="card functionality-roadmap">
|
||
<div className="section-heading compact">
|
||
<div>
|
||
<h3>What this is deliberately not yet</h3>
|
||
<p>Guardrails matter. The small cockpit wins because it refuses to cosplay as a whole enterprise suite.</p>
|
||
</div>
|
||
</div>
|
||
<div className="roadmap-grid">
|
||
<div>
|
||
<strong>Not Jira</strong>
|
||
<p>No issue jungle, sprint ceremony, or fake certainty factory.</p>
|
||
</div>
|
||
<div>
|
||
<strong>Not an autonomous agent framework</strong>
|
||
<p>Agent ingestion can come later; manual pulse truth comes first.</p>
|
||
</div>
|
||
<div>
|
||
<strong>Not multi-project yet</strong>
|
||
<p>Single-project discipline keeps v0.1 sharp enough to dogfood.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</section>
|
||
)}
|
||
|
||
{activeTab === 'feature-plan' && (
|
||
<section className="view-stack">
|
||
<div className="section-heading">
|
||
<div>
|
||
<h2>Feature Plan</h2>
|
||
<p>Lead with focus, not overview. This is the calm “what now?” screen.</p>
|
||
</div>
|
||
<button type="button" onClick={() => openTriage()}>
|
||
Triage Idea with AI
|
||
</button>
|
||
</div>
|
||
|
||
{selectedFeature && (
|
||
<section className="card quick-actions">
|
||
<div>
|
||
<strong>{selectedFeature.title}</strong>
|
||
<p>Selected and ready. Shape it here, then kick a clean brief to your agent.</p>
|
||
</div>
|
||
<div className="button-inline-row">
|
||
<button type="button" className="ghost" onClick={() => openFeaturePulse(selectedFeature.id)}>
|
||
Log Feature Pulse
|
||
</button>
|
||
<button type="button" onClick={() => openFeatureHandoff(selectedFeature.id)}>
|
||
Prepare AI Handoff
|
||
</button>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{selectedFeature && (
|
||
<section className="card focus-card">
|
||
<div className="section-heading compact">
|
||
<div>
|
||
<p className="eyebrow">Night Shift Focus</p>
|
||
<h3>{selectedFeature.title}</h3>
|
||
<p>The current build thread, stripped of excuses and fog.</p>
|
||
</div>
|
||
<div className="focus-badges">
|
||
<span className={`pill ${selectedFeature.priority}`}>{selectedFeature.priority}</span>
|
||
<span className="pill">{selectedFeature.status}</span>
|
||
<span className="pill">{columnLabels[selectedFeature.column]}</span>
|
||
</div>
|
||
</div>
|
||
<div className="focus-grid">
|
||
<article className="focus-panel">
|
||
<h4>Acceptance Criteria</h4>
|
||
{selectedFeature.acceptance_criteria.length ? (
|
||
<ul>
|
||
{selectedFeature.acceptance_criteria.map((criterion) => (
|
||
<li key={criterion}>{criterion}</li>
|
||
))}
|
||
</ul>
|
||
) : (
|
||
<p>No criteria yet. A dangerous little vacuum.</p>
|
||
)}
|
||
</article>
|
||
<article className="focus-panel">
|
||
<h4>Scope Notes</h4>
|
||
<p>{selectedFeature.scope_notes || 'No scope notes yet. Add the edges before the feature sprawls.'}</p>
|
||
<h4>Recent Pulse</h4>
|
||
{selectedFeaturePulses.length ? (
|
||
<div className="list-stack compact-stack">
|
||
{selectedFeaturePulses.map((pulse) => (
|
||
<div key={pulse.id} className="mini-pulse">
|
||
<strong>{pulse.pulse_type}</strong>
|
||
<span>{formatDateTime(pulse.timestamp)}</span>
|
||
<p>{pulse.message}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<p>No feature-linked pulses yet. Log intent before the night gets blurry.</p>
|
||
)}
|
||
</article>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
<div className="board-grid">
|
||
{FEATURE_COLUMNS.map((column) => (
|
||
<article key={column} className="column card">
|
||
<div className="column-header">
|
||
<div>
|
||
<h3>{columnLabels[column]}</h3>
|
||
<p>{groupedFeatures[column].length} feature{groupedFeatures[column].length === 1 ? '' : 's'}</p>
|
||
</div>
|
||
</div>
|
||
<div className="column-body">
|
||
{groupedFeatures[column].length ? (
|
||
groupedFeatures[column].map((feature) => {
|
||
const pulseMeta = featurePulseMeta.get(feature.id)
|
||
|
||
return (
|
||
<button key={feature.id} type="button" className="item-card feature-card" onClick={() => beginFeatureEdit(feature)}>
|
||
<div className="item-card-header">
|
||
<strong>{feature.title}</strong>
|
||
<span className={`pill ${feature.priority}`}>{feature.priority}</span>
|
||
</div>
|
||
<p>{feature.description || 'No description yet.'}</p>
|
||
<div className="feature-signal-row">
|
||
<span>{feature.acceptance_criteria.length} criteria</span>
|
||
{pulseMeta ? (
|
||
<span className="feature-signal">
|
||
{pulseMeta.count} pulse{pulseMeta.count === 1 ? '' : 's'} · last {pulseMeta.latest?.pulse_type ?? 'event'}
|
||
</span>
|
||
) : (
|
||
<span className="feature-signal quiet">No linked pulses yet</span>
|
||
)}
|
||
</div>
|
||
<div className="meta-row">
|
||
<span className="pill">{feature.status}</span>
|
||
<label>
|
||
<span className="sr-only">Move feature</span>
|
||
<select
|
||
value={feature.column}
|
||
onChange={(event) => {
|
||
event.stopPropagation()
|
||
quickMoveFeature(feature.id, event.target.value as FeatureColumn)
|
||
}}
|
||
>
|
||
{FEATURE_COLUMNS.map((entry) => (
|
||
<option key={entry} value={entry}>
|
||
{columnLabels[entry]}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
</div>
|
||
</button>
|
||
)
|
||
})
|
||
) : (
|
||
<div className="empty-state">No features here yet.</div>
|
||
)}
|
||
</div>
|
||
</article>
|
||
))}
|
||
</div>
|
||
|
||
<div className="editor-grid">
|
||
<section className="card editor-card">
|
||
<div className="section-heading compact">
|
||
<div>
|
||
<h3>{selectedFeature ? 'Edit Feature' : 'Add Feature'}</h3>
|
||
<p>Keep it small, clear, and testable.</p>
|
||
</div>
|
||
</div>
|
||
<div className="form-grid">
|
||
<label>
|
||
Title
|
||
<input value={featureDraft.title} onChange={(event) => setFeatureDraft((current) => ({ ...current, title: event.target.value }))} />
|
||
</label>
|
||
<label>
|
||
Column
|
||
<select value={featureDraft.column} onChange={(event) => setFeatureDraft((current) => ({ ...current, column: event.target.value as FeatureColumn }))}>
|
||
{FEATURE_COLUMNS.map((column) => (
|
||
<option key={column} value={column}>
|
||
{columnLabels[column]}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
<label>
|
||
Priority
|
||
<select value={featureDraft.priority} onChange={(event) => setFeatureDraft((current) => ({ ...current, priority: event.target.value as (typeof FEATURE_PRIORITIES)[number] }))}>
|
||
{FEATURE_PRIORITIES.map((priority) => (
|
||
<option key={priority} value={priority}>
|
||
{priority}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
<label>
|
||
Status
|
||
<select value={featureDraft.status} onChange={(event) => setFeatureDraft((current) => ({ ...current, status: event.target.value as (typeof FEATURE_STATUSES)[number] }))}>
|
||
{FEATURE_STATUSES.map((status) => (
|
||
<option key={status} value={status}>
|
||
{status}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
<label className="full-span">
|
||
Description
|
||
<textarea rows={3} value={featureDraft.description} onChange={(event) => setFeatureDraft((current) => ({ ...current, description: event.target.value }))} />
|
||
</label>
|
||
<label className="full-span">
|
||
Acceptance criteria (one per line)
|
||
<textarea rows={5} value={featureDraft.acceptanceCriteria} onChange={(event) => setFeatureDraft((current) => ({ ...current, acceptanceCriteria: event.target.value }))} />
|
||
</label>
|
||
<label className="full-span">
|
||
Scope notes
|
||
<textarea rows={3} value={featureDraft.scopeNotes} onChange={(event) => setFeatureDraft((current) => ({ ...current, scopeNotes: event.target.value }))} />
|
||
</label>
|
||
</div>
|
||
<div className="button-row">
|
||
<button type="button" onClick={saveFeature}>{selectedFeature ? 'Save Changes' : 'Add Feature'}</button>
|
||
<button type="button" className="ghost" onClick={resetFeatureDraft}>Clear</button>
|
||
{selectedFeature && (
|
||
<>
|
||
<button type="button" className="ghost" onClick={() => openFeaturePulse(selectedFeature.id)}>
|
||
Log Feature Pulse
|
||
</button>
|
||
<button type="button" className="ghost" onClick={() => openFeatureHandoff(selectedFeature.id)}>
|
||
Prepare AI Handoff
|
||
</button>
|
||
<button type="button" className="danger" onClick={() => deleteFeature(selectedFeature.id)}>
|
||
Delete Feature
|
||
</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
</section>
|
||
|
||
<section className="card preview-card">
|
||
<div className="section-heading compact">
|
||
<div>
|
||
<h3>Recent Pulse</h3>
|
||
<p>Just enough movement to stay grounded.</p>
|
||
</div>
|
||
</div>
|
||
{recentPulsePreview.length ? (
|
||
<div className="list-stack">
|
||
{recentPulsePreview.map((pulse) => (
|
||
<div key={pulse.id} className="mini-pulse">
|
||
<strong>{pulse.pulse_type}</strong>
|
||
<span>{formatDateTime(pulse.timestamp)}</span>
|
||
<p>{pulse.message}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="empty-state">No pulses yet. Add an INTENT or DECISION to start the log.</div>
|
||
)}
|
||
</section>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{activeTab === 'parking-lot' && (
|
||
<section className="view-stack">
|
||
<div className="section-heading">
|
||
<div>
|
||
<h2>Parking Lot</h2>
|
||
<p>This is where useful distractions go so they do not hijack the build.</p>
|
||
</div>
|
||
<button type="button" onClick={() => openTriage()}>
|
||
Triage Idea with AI
|
||
</button>
|
||
</div>
|
||
<div className="editor-grid">
|
||
<section className="card editor-card">
|
||
<div className="section-heading compact">
|
||
<div>
|
||
<h3>{selectedParkingItem ? 'Edit Parked Idea' : 'Park a New Idea'}</h3>
|
||
<p>Capture it cleanly, then get back to the real work.</p>
|
||
</div>
|
||
</div>
|
||
<div className="form-grid">
|
||
<label>
|
||
Title
|
||
<input value={parkingDraft.title} onChange={(event) => setParkingDraft((current) => ({ ...current, title: event.target.value }))} />
|
||
</label>
|
||
<label>
|
||
Risk level
|
||
<select value={parkingDraft.riskLevel} onChange={(event) => setParkingDraft((current) => ({ ...current, riskLevel: event.target.value as RiskLevel }))}>
|
||
{RISK_LEVELS.map((level) => (
|
||
<option key={level} value={level}>
|
||
{level}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
<label className="full-span">
|
||
Description
|
||
<textarea rows={3} value={parkingDraft.description} onChange={(event) => setParkingDraft((current) => ({ ...current, description: event.target.value }))} />
|
||
</label>
|
||
<label className="full-span">
|
||
Reason parked
|
||
<textarea rows={3} value={parkingDraft.reasonParked} onChange={(event) => setParkingDraft((current) => ({ ...current, reasonParked: event.target.value }))} />
|
||
</label>
|
||
<label className="full-span">
|
||
Possible future placement
|
||
<input value={parkingDraft.futurePlacement} onChange={(event) => setParkingDraft((current) => ({ ...current, futurePlacement: event.target.value }))} />
|
||
</label>
|
||
</div>
|
||
<div className="button-row">
|
||
<button type="button" onClick={saveParkingItem}>{selectedParkingItem ? 'Save Changes' : 'Park Idea'}</button>
|
||
<button type="button" className="ghost" onClick={resetParkingDraft}>Clear</button>
|
||
{selectedParkingItem && (
|
||
<>
|
||
<button type="button" className="ghost" onClick={() => convertParkingItemToFeature(selectedParkingItem)}>
|
||
Convert to Feature
|
||
</button>
|
||
<button type="button" className="danger" onClick={() => deleteParkingItem(selectedParkingItem.id)}>
|
||
Delete
|
||
</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
</section>
|
||
|
||
<section className="card list-card">
|
||
<div className="section-heading compact">
|
||
<div>
|
||
<h3>Parked Ideas</h3>
|
||
<p>Visible enough to trust, quiet enough not to derail you.</p>
|
||
</div>
|
||
</div>
|
||
<div className="list-stack">
|
||
{appState.parking_lot.length ? (
|
||
appState.parking_lot.map((item) => (
|
||
<button key={item.id} type="button" className="item-card parking-card" onClick={() => beginParkingEdit(item)}>
|
||
<div className="item-card-header">
|
||
<strong>{item.title}</strong>
|
||
<span className={`pill risk-${item.risk_level}`}>{item.risk_level}</span>
|
||
</div>
|
||
<p>{item.description || 'No description yet.'}</p>
|
||
<small>{item.reason_parked || 'No reason parked yet.'}</small>
|
||
</button>
|
||
))
|
||
) : (
|
||
<div className="empty-state">No parked ideas yet. That probably means you haven’t had a normal distracted brain day yet.</div>
|
||
)}
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{activeTab === 'pulse-log' && (
|
||
<section className="view-stack">
|
||
<div className="section-heading">
|
||
<div>
|
||
<h2>Pulse Log</h2>
|
||
<p>Manual now, future-compatible later. Keep the history honest.</p>
|
||
</div>
|
||
</div>
|
||
<div className="editor-grid">
|
||
<section className="card editor-card">
|
||
<div className="section-heading compact">
|
||
<div>
|
||
<h3>{selectedPulse ? 'Edit Pulse' : 'Add Pulse'}</h3>
|
||
<p>Log what happened, not a fantasy backlog status.</p>
|
||
</div>
|
||
</div>
|
||
<div className="form-grid">
|
||
<label>
|
||
Pulse type
|
||
<select value={pulseDraft.pulseType} onChange={(event) => setPulseDraft((current) => ({ ...current, pulseType: event.target.value as (typeof PULSE_TYPES)[number] }))}>
|
||
{PULSE_TYPES.map((pulseType) => (
|
||
<option key={pulseType} value={pulseType}>
|
||
{pulseType}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
<label>
|
||
Feature link
|
||
<select value={pulseDraft.featureId} onChange={(event) => setPulseDraft((current) => ({ ...current, featureId: event.target.value }))}>
|
||
<option value="">No linked feature</option>
|
||
{appState.features.map((feature) => (
|
||
<option key={feature.id} value={feature.id}>
|
||
{feature.title}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
<label>
|
||
Source
|
||
<input value={pulseDraft.source} onChange={(event) => setPulseDraft((current) => ({ ...current, source: event.target.value }))} />
|
||
</label>
|
||
<label>
|
||
Agent ID
|
||
<input value={pulseDraft.agentId} onChange={(event) => setPulseDraft((current) => ({ ...current, agentId: event.target.value }))} />
|
||
</label>
|
||
<label>
|
||
Confidence
|
||
<input value={pulseDraft.confidence} onChange={(event) => setPulseDraft((current) => ({ ...current, confidence: event.target.value }))} />
|
||
</label>
|
||
<label>
|
||
Trace ID
|
||
<input value={pulseDraft.traceId} onChange={(event) => setPulseDraft((current) => ({ ...current, traceId: event.target.value }))} />
|
||
</label>
|
||
<label className="full-span">
|
||
Message
|
||
<textarea rows={4} value={pulseDraft.message} onChange={(event) => setPulseDraft((current) => ({ ...current, message: event.target.value }))} />
|
||
</label>
|
||
<label className="full-span">
|
||
Evidence refs (one per line)
|
||
<textarea rows={4} value={pulseDraft.evidenceRefs} onChange={(event) => setPulseDraft((current) => ({ ...current, evidenceRefs: event.target.value }))} />
|
||
</label>
|
||
</div>
|
||
<div className="button-row">
|
||
<button type="button" onClick={savePulse}>{selectedPulse ? 'Save Changes' : 'Add Pulse'}</button>
|
||
<button type="button" className="ghost" onClick={resetPulseDraft}>Clear</button>
|
||
{selectedPulse && (
|
||
<button type="button" className="danger" onClick={() => deletePulse(selectedPulse.id)}>
|
||
Delete Pulse
|
||
</button>
|
||
)}
|
||
</div>
|
||
</section>
|
||
|
||
<section className="card list-card">
|
||
<div className="section-heading compact filters-heading">
|
||
<div>
|
||
<h3>Pulse Timeline</h3>
|
||
<p>Newest first, with just enough filtering to stay useful.</p>
|
||
</div>
|
||
<div className="filter-row">
|
||
<select value={pulseTypeFilter} onChange={(event) => setPulseTypeFilter(event.target.value)}>
|
||
<option value="all">All types</option>
|
||
{PULSE_TYPES.map((pulseType) => (
|
||
<option key={pulseType} value={pulseType}>
|
||
{pulseType}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<select value={pulseFeatureFilter} onChange={(event) => setPulseFeatureFilter(event.target.value)}>
|
||
<option value="all">All features</option>
|
||
{appState.features.map((feature) => (
|
||
<option key={feature.id} value={feature.id}>
|
||
{feature.title}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<select value={pulseSourceFilter} onChange={(event) => setPulseSourceFilter(event.target.value)}>
|
||
<option value="all">All sources</option>
|
||
{uniqueSources.map((source) => (
|
||
<option key={source} value={source}>
|
||
{source}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div className="list-stack">
|
||
{filteredPulses.length ? (
|
||
filteredPulses.map((pulse) => {
|
||
const linkedFeature = appState.features.find((feature) => feature.id === pulse.feature_id)
|
||
return (
|
||
<button key={pulse.id} type="button" className="item-card pulse-card" onClick={() => beginPulseEdit(pulse)}>
|
||
<div className="item-card-header">
|
||
<strong>{pulse.pulse_type}</strong>
|
||
<span>{formatDateTime(pulse.timestamp)}</span>
|
||
</div>
|
||
<p>{pulse.message}</p>
|
||
<small>
|
||
{linkedFeature?.title ?? (pulse.feature_id ? `${pulse.feature_id} (missing feature)` : 'No linked feature')} · {pulse.source} / {pulse.agent_id}
|
||
</small>
|
||
</button>
|
||
)
|
||
})
|
||
) : (
|
||
<div className="empty-state">No pulses match the current filters.</div>
|
||
)}
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{activeTab === 'export' && (
|
||
<section className="view-stack">
|
||
<div className="section-heading">
|
||
<div>
|
||
<h2>Export</h2>
|
||
<p>Ship clean context packages, not rambling AI bait.</p>
|
||
</div>
|
||
</div>
|
||
<div className="editor-grid">
|
||
<section className="card editor-card">
|
||
<div className="section-heading compact">
|
||
<div>
|
||
<h3>Data Exports</h3>
|
||
<p>Backups and handoffs first. Fancy multi-file packaging can wait.</p>
|
||
</div>
|
||
</div>
|
||
<div className="button-stack">
|
||
<button type="button" onClick={() => downloadText('buildpulse-export.json', createJsonExport(appState), 'application/json;charset=utf-8')}>
|
||
Download Full JSON
|
||
</button>
|
||
<button type="button" onClick={() => downloadText('pulses.jsonl', createPulseJsonl(appState), 'application/x-ndjson;charset=utf-8')}>
|
||
Download Pulse JSONL
|
||
</button>
|
||
<label className="import-label">
|
||
Import JSON
|
||
<input type="file" accept="application/json" onChange={handleImport} />
|
||
</label>
|
||
</div>
|
||
</section>
|
||
|
||
<div className="list-stack">
|
||
<section className="card list-card">
|
||
<div className="section-heading compact">
|
||
<div>
|
||
<h3>AI Session Prompt</h3>
|
||
<p>Pick a focus feature and hand a sharp brief to your coding agent instead of pasting the whole kitchen sink.</p>
|
||
</div>
|
||
</div>
|
||
<div className="filter-row">
|
||
<label>
|
||
Target
|
||
<select value={promptTarget} onChange={(event) => setPromptTarget(event.target.value as (typeof PROMPT_TARGETS)[number])}>
|
||
{PROMPT_TARGETS.map((target) => (
|
||
<option key={target} value={target}>
|
||
{target}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
<label>
|
||
Focus Feature
|
||
<select value={promptFeatureId} onChange={(event) => setPromptFeatureId(event.target.value)}>
|
||
<option value="">Auto-pick first Now feature</option>
|
||
{appState.features.map((feature) => (
|
||
<option key={feature.id} value={feature.id}>
|
||
{feature.title} · {columnLabels[feature.column]}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
</div>
|
||
<div className="button-inline-row">
|
||
<button type="button" onClick={copySessionPrompt}>
|
||
Copy Prompt
|
||
</button>
|
||
<button type="button" className="ghost" onClick={() => downloadText('AI_SESSION_PROMPT.md', sessionPrompt)}>
|
||
Download Prompt
|
||
</button>
|
||
</div>
|
||
<div className="markdown-card">
|
||
<div className="item-card-header">
|
||
<strong>AI_SESSION_PROMPT.md</strong>
|
||
</div>
|
||
<pre>{sessionPrompt}</pre>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="card list-card">
|
||
<div className="section-heading compact">
|
||
<div>
|
||
<h3>Markdown Package</h3>
|
||
<p>`CLAUDE_CONTEXT.md` is the decision-boundary file. Keep it sharp.</p>
|
||
</div>
|
||
</div>
|
||
<div className="list-stack markdown-list">
|
||
{Object.entries(markdownPackage).map(([filename, content]) => (
|
||
<div key={filename} className="markdown-card">
|
||
<div className="item-card-header">
|
||
<strong>{filename}</strong>
|
||
<div className="button-inline-row">
|
||
<button type="button" className="ghost small" onClick={() => copyMarkdown(filename)}>
|
||
Copy
|
||
</button>
|
||
<button type="button" className="ghost small" onClick={() => downloadText(filename, content)}>
|
||
Download
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<pre>{content}</pre>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
<footer className="status-bar">
|
||
<span>{statusMessage}</span>
|
||
<span>{backendLabel} · {syncLabel} · schema {appState.schema_version}</span>
|
||
</footer>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default App
|