@swarmclawai/swarmclaw 0.7.6 → 0.7.8

package/src/components/projects/project-detail.tsx

@@ -16,6 +16,13 @@ function relativeDate(ts: number): string {
   return new Date(ts).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
 }
 
+function formatHeartbeatInterval(intervalSec?: number | null): string {
+  if (!intervalSec || intervalSec <= 0) return 'Manual'
+  if (intervalSec % 3600 === 0) return `${intervalSec / 3600}h`
+  if (intervalSec % 60 === 0) return `${intervalSec / 60}m`
+  return `${intervalSec}s`
+}
+
 const STATUS_STYLES: Record<string, string> = {
   backlog: 'bg-white/[0.06] text-text-3',
   queued: 'bg-amber-500/15 text-amber-400',
@@ -92,6 +99,8 @@ export function ProjectDetail() {
   const tasks = useAppStore((s) => s.tasks) as Record<string, BoardTask>
   const schedules = useAppStore((s) => s.schedules) as Record<string, Schedule>
   const loadAgents = useAppStore((s) => s.loadAgents)
+  const secrets = useAppStore((s) => s.secrets)
+  const loadSecrets = useAppStore((s) => s.loadSecrets)
   const setEditingProjectId = useAppStore((s) => s.setEditingProjectId)
   const setProjectSheetOpen = useAppStore((s) => s.setProjectSheetOpen)
   const setActiveView = useAppStore((s) => s.setActiveView)
@@ -100,6 +109,8 @@ export function ProjectDetail() {
   const setTaskSheetOpen = useAppStore((s) => s.setTaskSheetOpen)
   const setEditingScheduleId = useAppStore((s) => s.setEditingScheduleId)
   const setScheduleSheetOpen = useAppStore((s) => s.setScheduleSheetOpen)
+  const setEditingSecretId = useAppStore((s) => s.setEditingSecretId)
+  const setSecretSheetOpen = useAppStore((s) => s.setSecretSheetOpen)
 
   const [assignPickerOpen, setAssignPickerOpen] = useState(false)
   const [now, setNow] = useState(() => Date.now())
@@ -109,6 +120,11 @@ export function ProjectDetail() {
     return () => window.clearInterval(intervalId)
   }, [])
 
+  useEffect(() => {
+    if (!activeProjectFilter) return
+    void loadSecrets()
+  }, [activeProjectFilter, loadSecrets])
+
   const project = activeProjectFilter ? projects[activeProjectFilter] : null
 
   const projectAgents = useMemo(
@@ -128,6 +144,11 @@ export function ProjectDetail() {
     [schedules, activeProjectFilter],
   )
 
+  const projectSecrets = useMemo(
+    () => Object.values(secrets).filter((secret) => secret.projectId === activeProjectFilter),
+    [secrets, activeProjectFilter],
+  )
+
   const completedTasks = projectTasks.filter((t) => t.status === 'completed').length
   const totalTasks = projectTasks.length
   const progressPct = totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0
@@ -188,6 +209,23 @@ export function ProjectDetail() {
     [now, projectSchedules],
   )
 
+  const capabilityHints = Array.isArray(project?.capabilityHints) ? project.capabilityHints : []
+  const priorities = Array.isArray(project?.priorities) ? project.priorities : []
+  const openObjectives = Array.isArray(project?.openObjectives) ? project.openObjectives : []
+  const credentialRequirements = Array.isArray(project?.credentialRequirements) ? project.credentialRequirements : []
+  const successMetrics = Array.isArray(project?.successMetrics) ? project.successMetrics : []
+  const hasOperatingContext = Boolean(
+    project?.objective
+    || project?.audience
+    || priorities.length
+    || openObjectives.length
+    || capabilityHints.length
+    || credentialRequirements.length
+    || successMetrics.length
+    || project?.heartbeatPrompt
+    || project?.heartbeatIntervalSec,
+  )
+
   const busiestAgent = useMemo(() => {
     return projectAgents
       .map((agent) => ({
@@ -305,6 +343,185 @@ export function ProjectDetail() {
           </div>
         </div>
 
+        <div className="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_280px] gap-4 mb-8">
+          <div className="rounded-[16px] border border-white/[0.06] bg-white/[0.02] px-5 py-5">
+            <div className="flex items-center justify-between gap-4 mb-4">
+              <div>
+                <h2 className="font-display text-[18px] font-700 tracking-[-0.02em] text-text">Project Operating System</h2>
+                <p className="text-[12px] text-text-3/60 mt-1">Define what this project is trying to achieve, how agents should operate, and what long-lived context matters.</p>
+              </div>
+              <button
+                onClick={() => { setEditingProjectId(project.id); setProjectSheetOpen(true) }}
+                className="shrink-0 px-3 py-2 rounded-[10px] bg-white/[0.04] text-[12px] font-600 text-text-2 hover:bg-white/[0.08] transition-all cursor-pointer border-none"
+                style={{ fontFamily: 'inherit' }}
+              >
+                Configure
+              </button>
+            </div>
+
+            {hasOperatingContext ? (
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="rounded-[12px] border border-white/[0.06] bg-surface/60 px-4 py-3.5">
+                  <div className="text-[11px] font-700 uppercase tracking-[0.08em] text-text-3/50 mb-2">Mission</div>
+                  <div className="space-y-3">
+                    <div>
+                      <div className="text-[11px] font-600 text-text-3/50 mb-1">Objective</div>
+                      <p className="text-[13px] text-text leading-relaxed">{project.objective || 'Add a durable objective for this project.'}</p>
+                    </div>
+                    <div>
+                      <div className="text-[11px] font-600 text-text-3/50 mb-1">Audience</div>
+                      <p className="text-[13px] text-text-2/80 leading-relaxed">{project.audience || 'Set who this project is for so agents can answer from that context.'}</p>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="rounded-[12px] border border-white/[0.06] bg-surface/60 px-4 py-3.5">
+                  <div className="text-[11px] font-700 uppercase tracking-[0.08em] text-text-3/50 mb-2">Execution Focus</div>
+                  <div className="space-y-3">
+                    <div>
+                      <div className="text-[11px] font-600 text-text-3/50 mb-1">Pilot priorities</div>
+                      {priorities.length > 0 ? (
+                        <div className="flex flex-wrap gap-1.5">
+                          {priorities.map((priority) => (
+                            <span key={priority} className="rounded-full bg-accent-soft px-2.5 py-1 text-[11px] font-600 text-accent-bright">
+                              {priority}
+                            </span>
+                          ))}
+                        </div>
+                      ) : (
+                        <p className="text-[12px] text-text-3/50">No priorities captured yet.</p>
+                      )}
+                    </div>
+                    <div>
+                      <div className="text-[11px] font-600 text-text-3/50 mb-1">Open objectives</div>
+                      {openObjectives.length > 0 ? (
+                        <div className="space-y-1.5">
+                          {openObjectives.map((objective) => (
+                            <div key={objective} className="flex items-start gap-2 text-[12px] text-text-2">
+                              <span className="mt-1 h-1.5 w-1.5 shrink-0 rounded-full bg-emerald-400" />
+                              <span>{objective}</span>
+                            </div>
+                          ))}
+                        </div>
+                      ) : (
+                        <p className="text-[12px] text-text-3/50">No open objectives captured yet.</p>
+                      )}
+                    </div>
+                  </div>
+                </div>
+
+                <div className="rounded-[12px] border border-white/[0.06] bg-surface/60 px-4 py-3.5">
+                  <div className="text-[11px] font-700 uppercase tracking-[0.08em] text-text-3/50 mb-2">Operating Modes</div>
+                  {capabilityHints.length > 0 ? (
+                    <div className="flex flex-wrap gap-1.5">
+                      {capabilityHints.map((hint) => (
+                        <span key={hint} className="rounded-full bg-white/[0.06] px-2.5 py-1 text-[11px] font-600 text-text-2">
+                          {hint}
+                        </span>
+                      ))}
+                    </div>
+                  ) : (
+                    <p className="text-[12px] text-text-3/50">No capability hints yet. Add things like research, build, browsing, inbox ops, or credential bootstrapping.</p>
+                  )}
+                </div>
+
+                <div className="rounded-[12px] border border-white/[0.06] bg-surface/60 px-4 py-3.5">
+                  <div className="text-[11px] font-700 uppercase tracking-[0.08em] text-text-3/50 mb-2">Success Metrics</div>
+                  {successMetrics.length > 0 ? (
+                    <div className="space-y-1.5">
+                      {successMetrics.map((metric) => (
+                        <div key={metric} className="flex items-start gap-2 text-[12px] text-text-2">
+                          <span className="mt-1 h-1.5 w-1.5 shrink-0 rounded-full bg-sky-400" />
+                          <span>{metric}</span>
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <p className="text-[12px] text-text-3/50">Define success metrics if this project has open-ended goals like revenue, outreach, or inbox response quality.</p>
+                  )}
+                </div>
+              </div>
+            ) : (
+              <div className="rounded-[12px] border border-dashed border-white/[0.08] px-5 py-6 text-center">
+                <p className="text-[13px] font-600 text-text-2">This project still needs operating context.</p>
+                <p className="mt-1 text-[12px] text-text-3/55">Add objective, open objectives, capability hints, credential needs, and heartbeat settings so agents can treat the project as a durable operating system.</p>
+              </div>
+            )}
+          </div>
+
+          <div className="rounded-[16px] border border-white/[0.06] bg-white/[0.02] px-5 py-5">
+            <div className="flex items-center justify-between mb-3">
+              <h3 className="text-[12px] font-700 uppercase tracking-[0.08em] text-text-3/60">Ops Readiness</h3>
+              <span className="text-[11px] text-text-3/40">{projectSecrets.length} secret{projectSecrets.length === 1 ? '' : 's'}</span>
+            </div>
+
+            <div className="grid grid-cols-2 gap-2 mb-4">
+              {[
+                { label: 'Linked secrets', value: projectSecrets.length, tone: 'text-emerald-400' },
+                { label: 'Credential reqs', value: credentialRequirements.length, tone: 'text-amber-400' },
+                { label: 'Heartbeat', value: project.heartbeatIntervalSec ? formatHeartbeatInterval(project.heartbeatIntervalSec) : 'Off', tone: 'text-sky-400' },
+                { label: 'Schedules', value: projectSchedules.length, tone: 'text-text-2' },
+              ].map((item) => (
+                <div key={item.label} className="rounded-[12px] border border-white/[0.06] bg-surface/60 px-3 py-3">
+                  <div className={`text-[18px] font-display font-700 tracking-[-0.02em] ${item.tone}`}>{item.value}</div>
+                  <div className="mt-1 text-[10px] font-600 uppercase tracking-[0.08em] text-text-3/45">{item.label}</div>
+                </div>
+              ))}
+            </div>
+
+            <div className="space-y-3">
+              <div>
+                <div className="text-[11px] font-600 text-text-3/50 mb-1">Credential requirements</div>
+                {credentialRequirements.length > 0 ? (
+                  <div className="space-y-1.5">
+                    {credentialRequirements.map((item) => (
+                      <div key={item} className="flex items-start gap-2 text-[12px] text-text-2">
+                        <span className="mt-1 h-1.5 w-1.5 shrink-0 rounded-full bg-amber-400" />
+                        <span>{item}</span>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <p className="text-[12px] text-text-3/50">No credentials requested yet.</p>
+                )}
+              </div>
+
+              <div>
+                <div className="text-[11px] font-600 text-text-3/50 mb-1">Heartbeat</div>
+                {project.heartbeatPrompt || project.heartbeatIntervalSec ? (
+                  <div className="rounded-[12px] border border-white/[0.06] bg-surface/60 px-3 py-3">
+                    <div className="text-[11px] font-700 uppercase tracking-[0.08em] text-sky-400">
+                      Every {formatHeartbeatInterval(project.heartbeatIntervalSec)}
+                    </div>
+                    <p className="mt-1 text-[12px] text-text-2 leading-relaxed">
+                      {project.heartbeatPrompt || 'No heartbeat prompt configured.'}
+                    </p>
+                  </div>
+                ) : (
+                  <p className="text-[12px] text-text-3/50">No project heartbeat configured.</p>
+                )}
+              </div>
+
+              <div className="flex flex-wrap gap-2 pt-1">
+                <button
+                  onClick={() => { setEditingSecretId(null); setSecretSheetOpen(true) }}
+                  className="px-3 py-2 rounded-[10px] bg-accent-soft text-[12px] font-600 text-accent-bright hover:bg-accent-bright/15 transition-all cursor-pointer border-none"
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  Add project secret
+                </button>
+                <button
+                  onClick={() => { setEditingScheduleId(null); setScheduleSheetOpen(true) }}
+                  className="px-3 py-2 rounded-[10px] bg-white/[0.04] text-[12px] font-600 text-text-2 hover:bg-white/[0.08] transition-all cursor-pointer border-none"
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  Add heartbeat schedule
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
         <div className="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_280px] gap-4 mb-8">
           <div className="rounded-[16px] border border-white/[0.06] bg-white/[0.02] px-5 py-5">
             <div className="flex items-center justify-between gap-4 mb-4">

package/src/components/projects/project-sheet.tsx

@@ -12,6 +12,25 @@ const PROJECT_COLORS = [
 ]
 
 const inputClass = 'w-full px-3 py-2.5 rounded-lg bg-white/[0.06] border border-white/[0.06] text-[13px] text-text-1 placeholder:text-text-3/40 focus:outline-none focus:border-accent/40 transition-colors'
+const sectionTitleClass = 'block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2'
+
+function listToText(values?: string[]) {
+  return Array.isArray(values) ? values.join('\n') : ''
+}
+
+function textToList(value: string) {
+  return value
+    .split('\n')
+    .map((entry) => entry.trim())
+    .filter(Boolean)
+}
+
+function parseOptionalInteger(value: string) {
+  const trimmed = value.trim()
+  if (!trimmed) return undefined
+  const parsed = Number.parseInt(trimmed, 10)
+  return Number.isFinite(parsed) ? parsed : undefined
+}
 
 export function ProjectSheet() {
   const open = useAppStore((s) => s.projectSheetOpen)
@@ -24,6 +43,15 @@ export function ProjectSheet() {
   const [name, setName] = useState('')
   const [description, setDescription] = useState('')
   const [color, setColor] = useState<string | undefined>(undefined)
+  const [objective, setObjective] = useState('')
+  const [audience, setAudience] = useState('')
+  const [prioritiesText, setPrioritiesText] = useState('')
+  const [openObjectivesText, setOpenObjectivesText] = useState('')
+  const [capabilityHintsText, setCapabilityHintsText] = useState('')
+  const [credentialRequirementsText, setCredentialRequirementsText] = useState('')
+  const [successMetricsText, setSuccessMetricsText] = useState('')
+  const [heartbeatPrompt, setHeartbeatPrompt] = useState('')
+  const [heartbeatIntervalSec, setHeartbeatIntervalSec] = useState('')
 
   const editing = editingId ? projects[editingId] : null
 
@@ -33,10 +61,28 @@ export function ProjectSheet() {
         setName(editing.name)
         setDescription(editing.description)
         setColor(editing.color)
+        setObjective(editing.objective || '')
+        setAudience(editing.audience || '')
+        setPrioritiesText(listToText(editing.priorities))
+        setOpenObjectivesText(listToText(editing.openObjectives))
+        setCapabilityHintsText(listToText(editing.capabilityHints))
+        setCredentialRequirementsText(listToText(editing.credentialRequirements))
+        setSuccessMetricsText(listToText(editing.successMetrics))
+        setHeartbeatPrompt(editing.heartbeatPrompt || '')
+        setHeartbeatIntervalSec(editing.heartbeatIntervalSec ? String(editing.heartbeatIntervalSec) : '')
       } else {
         setName('')
         setDescription('')
         setColor(PROJECT_COLORS[0])
+        setObjective('')
+        setAudience('')
+        setPrioritiesText('')
+        setOpenObjectivesText('')
+        setCapabilityHintsText('')
+        setCredentialRequirementsText('')
+        setSuccessMetricsText('')
+        setHeartbeatPrompt('')
+        setHeartbeatIntervalSec('')
       }
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -52,6 +98,15 @@ export function ProjectSheet() {
       name: name.trim() || 'Unnamed Project',
       description,
       color,
+      objective: objective.trim() || undefined,
+      audience: audience.trim() || undefined,
+      priorities: textToList(prioritiesText),
+      openObjectives: textToList(openObjectivesText),
+      capabilityHints: textToList(capabilityHintsText),
+      credentialRequirements: textToList(credentialRequirementsText),
+      successMetrics: textToList(successMetricsText),
+      heartbeatPrompt: heartbeatPrompt.trim() || undefined,
+      heartbeatIntervalSec: parseOptionalInteger(heartbeatIntervalSec),
     }
     if (editing) {
       await updateProject(editing.id, data)
@@ -72,10 +127,10 @@ export function ProjectSheet() {
   }
 
   return (
-    <BottomSheet open={open} onClose={onClose}>
+    <BottomSheet open={open} onClose={onClose} wide>
       <h2 className="font-display text-[18px] font-700 text-text mb-6">{editing ? 'Edit Project' : 'New Project'}</h2>
       <div className="mb-6">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">Name</label>
+        <label className={sectionTitleClass}>Name</label>
         <input
           type="text"
           value={name}
@@ -88,7 +143,7 @@ export function ProjectSheet() {
       </div>
 
       <div className="mb-6">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">Description</label>
+        <label className={sectionTitleClass}>Description</label>
         <textarea
           value={description}
           onChange={(e) => setDescription(e.target.value)}
@@ -99,8 +154,125 @@ export function ProjectSheet() {
         />
       </div>
 
+      <div className="grid gap-6 sm:grid-cols-2 mb-6">
+        <div>
+          <label className={sectionTitleClass}>Objective</label>
+          <textarea
+            value={objective}
+            onChange={(e) => setObjective(e.target.value)}
+            placeholder="What durable outcome is this project driving?"
+            className={inputClass + ' min-h-[88px] resize-y'}
+            style={{ fontFamily: 'inherit' }}
+            rows={4}
+          />
+        </div>
+        <div>
+          <label className={sectionTitleClass}>Audience</label>
+          <textarea
+            value={audience}
+            onChange={(e) => setAudience(e.target.value)}
+            placeholder="Who is this project for?"
+            className={inputClass + ' min-h-[88px] resize-y'}
+            style={{ fontFamily: 'inherit' }}
+            rows={4}
+          />
+        </div>
+      </div>
+
+      <div className="grid gap-6 sm:grid-cols-2 mb-6">
+        <div>
+          <label className={sectionTitleClass}>Pilot Priorities</label>
+          <textarea
+            value={prioritiesText}
+            onChange={(e) => setPrioritiesText(e.target.value)}
+            placeholder={'One per line\nResearch the market\nBuild the pilot'}
+            className={inputClass + ' min-h-[110px] resize-y'}
+            style={{ fontFamily: 'inherit' }}
+            rows={5}
+          />
+          <p className="mt-2 text-[11px] text-text-3/45">One priority per line.</p>
+        </div>
+        <div>
+          <label className={sectionTitleClass}>Open Objectives</label>
+          <textarea
+            value={openObjectivesText}
+            onChange={(e) => setOpenObjectivesText(e.target.value)}
+            placeholder={'One per line\nDraft the research brief\nPrepare the rollout checklist'}
+            className={inputClass + ' min-h-[110px] resize-y'}
+            style={{ fontFamily: 'inherit' }}
+            rows={5}
+          />
+          <p className="mt-2 text-[11px] text-text-3/45">Use this for durable next outcomes, not one-off chat prompts.</p>
+        </div>
+      </div>
+
+      <div className="grid gap-6 sm:grid-cols-2 mb-6">
+        <div>
+          <label className={sectionTitleClass}>Capability Hints</label>
+          <textarea
+            value={capabilityHintsText}
+            onChange={(e) => setCapabilityHintsText(e.target.value)}
+            placeholder={'One per line\nResearch\nWeb browsing\nInbox automation'}
+            className={inputClass + ' min-h-[110px] resize-y'}
+            style={{ fontFamily: 'inherit' }}
+            rows={5}
+          />
+        </div>
+        <div>
+          <label className={sectionTitleClass}>Credential Requirements</label>
+          <textarea
+            value={credentialRequirementsText}
+            onChange={(e) => setCredentialRequirementsText(e.target.value)}
+            placeholder={'One per line\nGmail app password\nCRM API token'}
+            className={inputClass + ' min-h-[110px] resize-y'}
+            style={{ fontFamily: 'inherit' }}
+            rows={5}
+          />
+        </div>
+      </div>
+
+      <div className="grid gap-6 sm:grid-cols-2 mb-6">
+        <div>
+          <label className={sectionTitleClass}>Success Metrics</label>
+          <textarea
+            value={successMetricsText}
+            onChange={(e) => setSuccessMetricsText(e.target.value)}
+            placeholder={'One per line\nReduce response time below 10 minutes\nIncrease qualified replies'}
+            className={inputClass + ' min-h-[96px] resize-y'}
+            style={{ fontFamily: 'inherit' }}
+            rows={4}
+          />
+        </div>
+        <div className="grid gap-4">
+          <div>
+            <label className={sectionTitleClass}>Heartbeat Prompt</label>
+            <textarea
+              value={heartbeatPrompt}
+              onChange={(e) => setHeartbeatPrompt(e.target.value)}
+              placeholder="What should the project heartbeat ask the agent to review?"
+              className={inputClass + ' min-h-[72px] resize-y'}
+              style={{ fontFamily: 'inherit' }}
+              rows={3}
+            />
+          </div>
+          <div>
+            <label className={sectionTitleClass}>Heartbeat Interval (seconds)</label>
+            <input
+              type="number"
+              min={0}
+              step={60}
+              value={heartbeatIntervalSec}
+              onChange={(e) => setHeartbeatIntervalSec(e.target.value)}
+              placeholder="1800"
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+          </div>
+        </div>
+      </div>
+
       <div className="mb-8">
-        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">Color</label>
+        <label className={sectionTitleClass}>Color</label>
         <div className="flex items-center gap-2">
           {PROJECT_COLORS.map((c) => (
             <button