@swarmclawai/swarmclaw 1.5.53 → 1.5.55

package/src/app/missions/page.tsx

@@ -5,7 +5,13 @@ import { api } from '@/lib/app/api-client'
 import { MainContent } from '@/components/layout/main-content'
 import { HintTip } from '@/components/shared/hint-tip'
 import { inputClass } from '@/components/shared/form-styles'
-import type { Mission, MissionReport, MissionEvent, Session } from '@/types'
+import { MissionTemplateGallery } from '@/components/missions/mission-template-gallery'
+import {
+  MissionTemplateInstallDialog,
+  type InstantiateInput,
+} from '@/components/missions/mission-template-install-dialog'
+import { MissionEditSheet, isMissionEditable } from '@/components/missions/mission-edit-sheet'
+import type { Mission, MissionReport, MissionEvent, MissionTemplate, Session } from '@/types'
 import { toast } from 'sonner'
 
 const POLL_MS = 4_000
@@ -114,11 +120,13 @@ interface ControlsProps {
   mission: Mission
   onAction: (action: string, reason?: string) => Promise<void>
   onForceReport: () => Promise<void>
+  onEdit: () => void
   busy: boolean
 }
 
-function MissionControls({ mission, onAction, onForceReport, busy }: ControlsProps) {
+function MissionControls({ mission, onAction, onForceReport, onEdit, busy }: ControlsProps) {
   const btn = 'text-[11px] font-600 px-2.5 py-1 rounded border transition-colors disabled:opacity-40 disabled:cursor-not-allowed'
+  const editable = isMissionEditable(mission.status)
   return (
     <div className="flex flex-wrap items-center gap-2">
       {mission.status === 'draft' || mission.status === 'paused' ? (
@@ -148,6 +156,15 @@ function MissionControls({ mission, onAction, onForceReport, busy }: ControlsPro
           Mark complete
         </button>
       ) : null}
+      {editable ? (
+        <button
+          disabled={busy}
+          onClick={onEdit}
+          className={`${btn} border-white/[0.12] bg-white/[0.04] text-text hover:bg-white/[0.08]`}
+        >
+          Edit
+        </button>
+      ) : null}
       {mission.status !== 'completed' && mission.status !== 'cancelled' ? (
         <button
           disabled={busy}
@@ -213,6 +230,10 @@ function CreateMissionDialog({ open, sessions, onClose, onCreate }: CreateDialog
     const n = Number.parseFloat(s)
     return Number.isFinite(n) && n > 0 ? n : null
   }
+  const intOrNull = (s: string): number | null => {
+    const n = numOrNull(s)
+    return n == null ? null : Math.round(n)
+  }
 
   const submit = async () => {
     if (!title.trim() || !goal.trim()) {
@@ -237,9 +258,9 @@ function CreateMissionDialog({ open, sessions, onClose, onCreate }: CreateDialog
         rootSessionId,
         budget: {
           maxUsd: numOrNull(maxUsd),
-          maxTokens: numOrNull(maxTokens),
-          maxWallclockSec: numOrNull(maxWallclockSec),
-          maxTurns: numOrNull(maxTurns),
+          maxTokens: intOrNull(maxTokens),
+          maxWallclockSec: intOrNull(maxWallclockSec),
+          maxTurns: intOrNull(maxTurns),
         },
         reportSchedule: reportsEnabled
           ? { intervalSec: Math.round(intervalMin * 60), format: 'markdown', enabled: true }
@@ -372,9 +393,10 @@ interface DetailProps {
   busy: boolean
   onAction: (action: string, reason?: string) => Promise<void>
   onForceReport: () => Promise<void>
+  onEdit: () => void
 }
 
-function MissionDetail({ mission, reports, events, busy, onAction, onForceReport }: DetailProps) {
+function MissionDetail({ mission, reports, events, busy, onAction, onForceReport, onEdit }: DetailProps) {
   const [selectedReport, setSelectedReport] = useState<MissionReport | null>(null)
   const wallclockCapMs = mission.budget.maxWallclockSec != null ? mission.budget.maxWallclockSec * 1000 : null
 
@@ -403,7 +425,7 @@ function MissionDetail({ mission, reports, events, busy, onAction, onForceReport
 
       <div>
         <div className="text-[11px] font-600 uppercase tracking-wide text-text-3 mb-2">Controls</div>
-        <MissionControls mission={mission} onAction={onAction} onForceReport={onForceReport} busy={busy} />
+        <MissionControls mission={mission} onAction={onAction} onForceReport={onForceReport} onEdit={onEdit} busy={busy} />
       </div>
 
       {mission.successCriteria.length > 0 && (
@@ -489,6 +511,10 @@ export default function MissionsPage() {
   const [createOpen, setCreateOpen] = useState(false)
   const [busy, setBusy] = useState(false)
   const [loaded, setLoaded] = useState(false)
+  const [templates, setTemplates] = useState<MissionTemplate[]>([])
+  const [galleryOpen, setGalleryOpen] = useState(false)
+  const [installTemplate, setInstallTemplate] = useState<MissionTemplate | null>(null)
+  const [editMission, setEditMission] = useState<Mission | null>(null)
 
   const selected = useMemo(() => missions.find((m) => m.id === selectedId) ?? null, [missions, selectedId])
 
@@ -531,10 +557,18 @@ export default function MissionsPage() {
   }, [selectedId, refreshDetail])
 
   useEffect(() => {
-    api<Session[]>('GET', '/chats').then((s) => {
-      setSessions(Array.isArray(s) ? s : Object.values(s))
+    api<Record<string, Session>>('GET', '/chats').then((s) => {
+      setSessions(s ? Object.values(s) : [])
     }).catch(() => setSessions([]))
-  }, [createOpen])
+  }, [createOpen, galleryOpen, installTemplate])
+
+  useEffect(() => {
+    let cancelled = false
+    api<MissionTemplate[]>('GET', '/missions/templates')
+      .then((list) => { if (!cancelled) setTemplates(Array.isArray(list) ? list : []) })
+      .catch(() => { if (!cancelled) setTemplates([]) })
+    return () => { cancelled = true }
+  }, [])
 
   const handleAction = useCallback(async (action: string, reason?: string) => {
     if (!selectedId) return
@@ -571,28 +605,65 @@ export default function MissionsPage() {
     toast.success(`Mission "${created.title}" created`)
   }, [refreshList])
 
+  const handleMissionSaved = useCallback((updated: Mission) => {
+    setMissions((prev) => prev.map((m) => (m.id === updated.id ? updated : m)))
+    void refreshList()
+  }, [refreshList])
+
+  const handleInstallTemplate = useCallback(async (template: MissionTemplate, input: InstantiateInput) => {
+    const result = await api<{ mission: Mission }>(
+      'POST',
+      `/missions/templates/${encodeURIComponent(template.id)}/instantiate`,
+      input,
+    )
+    await refreshList()
+    setSelectedId(result.mission.id)
+    setGalleryOpen(false)
+    toast.success(`Mission "${result.mission.title}" installed`)
+  }, [refreshList])
+
   return (
     <MainContent>
       <div className="flex-1 flex min-h-0">
         <div className="w-[340px] shrink-0 border-r border-white/[0.06] flex flex-col min-h-0">
-          <div className="p-3 border-b border-white/[0.06] flex items-center justify-between">
-            <div>
-              <div className="text-[13px] font-600">Missions</div>
-              <div className="text-[10px] text-text-3">Autonomous goal-driven runs</div>
+          <div className="p-3 border-b border-white/[0.06]">
+            <div className="flex items-center justify-between mb-2">
+              <div>
+                <div className="text-[13px] font-600">Missions</div>
+                <div className="text-[10px] text-text-3">Autonomous goal-driven runs</div>
+              </div>
+              <button
+                onClick={() => setCreateOpen(true)}
+                className="text-[11px] font-600 px-2.5 py-1 rounded border border-emerald-500/30 bg-emerald-500/10 text-emerald-300 hover:bg-emerald-500/15"
+              >
+                + New
+              </button>
             </div>
-            <button
-              onClick={() => setCreateOpen(true)}
-              className="text-[11px] font-600 px-2.5 py-1 rounded border border-emerald-500/30 bg-emerald-500/10 text-emerald-300 hover:bg-emerald-500/15"
-            >
-              + New
-            </button>
+            {templates.length > 0 && (
+              <button
+                onClick={() => setGalleryOpen(true)}
+                className="w-full text-left text-[11px] font-600 px-2.5 py-1.5 rounded border border-white/[0.08] bg-white/[0.02] text-text-3 hover:border-white/[0.16] hover:text-text"
+              >
+                Browse {templates.length} starter templates →
+              </button>
+            )}
           </div>
           <div className="flex-1 overflow-y-auto p-2 flex flex-col gap-1.5">
             {!loaded ? (
               <div className="text-[11px] text-text-3 p-3">Loading...</div>
             ) : missions.length === 0 ? (
-              <div className="text-[11px] text-text-3 p-3">
-                No missions yet. Click <span className="text-emerald-300 font-600">+ New</span> to start an autonomous run.
+              <div className="flex flex-col gap-2 p-3">
+                <div className="text-[11px] text-text-3">
+                  No missions yet. Start from a template or create one from scratch.
+                </div>
+                {templates.length > 0 && (
+                  <button
+                    onClick={() => setGalleryOpen(true)}
+                    className="text-[11px] font-600 px-2.5 py-1 rounded border border-emerald-500/30 bg-emerald-500/10 text-emerald-300 hover:bg-emerald-500/15 self-start"
+                  >
+                    Open template gallery
+                  </button>
+                )}
               </div>
             ) : (
               missions.map((m) => (
@@ -615,7 +686,15 @@ export default function MissionsPage() {
               busy={busy}
               onAction={handleAction}
               onForceReport={handleForceReport}
+              onEdit={() => setEditMission(selected)}
             />
+          ) : loaded && missions.length === 0 && templates.length > 0 ? (
+            <div className="p-6">
+              <MissionTemplateGallery
+                templates={templates}
+                onInstall={(t) => setInstallTemplate(t)}
+              />
+            </div>
           ) : (
             <div className="flex items-center justify-center h-full text-text-3 text-[12px]">
               {loaded && missions.length === 0 ? 'Create a mission to get started.' : 'Select a mission'}
@@ -630,6 +709,40 @@ export default function MissionsPage() {
         onClose={() => setCreateOpen(false)}
         onCreate={handleCreate}
       />
+
+      {galleryOpen && (
+        <div
+          className="fixed inset-0 z-40 flex items-center justify-center bg-black/60 p-4"
+          onClick={() => setGalleryOpen(false)}
+        >
+          <div
+            className="w-full max-w-4xl max-h-[90vh] overflow-y-auto rounded-[14px] border border-white/[0.08] bg-bg shadow-[0_24px_64px_rgba(0,0,0,0.6)] p-6"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between mb-4">
+              <div className="text-[15px] font-700 text-text">Mission templates</div>
+              <button onClick={() => setGalleryOpen(false)} className="text-text-3 text-[12px] hover:text-text">Close</button>
+            </div>
+            <MissionTemplateGallery
+              templates={templates}
+              onInstall={(t) => setInstallTemplate(t)}
+            />
+          </div>
+        </div>
+      )}
+
+      <MissionTemplateInstallDialog
+        template={installTemplate}
+        sessions={sessions}
+        onClose={() => setInstallTemplate(null)}
+        onInstall={handleInstallTemplate}
+      />
+
+      <MissionEditSheet
+        mission={editMission}
+        onClose={() => setEditMission(null)}
+        onSaved={handleMissionSaved}
+      />
     </MainContent>
   )
 }

package/src/cli/index.js

@@ -817,6 +817,8 @@ const COMMAND_GROUPS = [
       cmd('reports', 'GET', '/missions/:id/reports', 'List mission reports'),
       cmd('report-now', 'POST', '/missions/:id/reports', 'Force-generate a mission report now'),
       cmd('events', 'GET', '/missions/:id/events', 'List mission events (use --query sinceAt=..., --query untilAt=...)'),
+      cmd('templates', 'GET', '/missions/templates', 'List built-in mission templates'),
+      cmd('instantiate', 'POST', '/missions/templates/:id/instantiate', 'Create a mission from a template', { expectsJsonBody: true }),
     ],
   },
   {

package/src/cli/spec.js

@@ -571,6 +571,8 @@ const COMMAND_GROUPS = {
       reports: { description: 'List mission reports', method: 'GET', path: '/missions/:id/reports', params: ['id'] },
       'report-now': { description: 'Force-generate a mission report now', method: 'POST', path: '/missions/:id/reports', params: ['id'] },
       events: { description: 'List mission events', method: 'GET', path: '/missions/:id/events', params: ['id'] },
+      templates: { description: 'List built-in mission templates', method: 'GET', path: '/missions/templates' },
+      instantiate: { description: 'Create a mission from a template', method: 'POST', path: '/missions/templates/:id/instantiate', params: ['id'], body: true },
     },
   },
 }

package/src/components/missions/mission-edit-sheet.tsx

@@ -0,0 +1,319 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import { api } from '@/lib/app/api-client'
+import { HintTip } from '@/components/shared/hint-tip'
+import { inputClass } from '@/components/shared/form-styles'
+import type { Connector, Mission, MissionReportFormat } from '@/types'
+import { toast } from 'sonner'
+
+const EDITABLE_STATUSES: Mission['status'][] = ['draft', 'running', 'paused']
+const REPORT_FORMATS: MissionReportFormat[] = ['markdown', 'slack', 'discord', 'email', 'audio']
+
+export function isMissionEditable(status: Mission['status']): boolean {
+  return EDITABLE_STATUSES.includes(status)
+}
+
+interface EditSheetProps {
+  mission: Mission | null
+  onClose: () => void
+  onSaved: (updated: Mission) => void
+}
+
+function numOrNull(value: string): number | null {
+  const trimmed = value.trim()
+  if (!trimmed) return null
+  const n = Number.parseFloat(trimmed)
+  return Number.isFinite(n) && n > 0 ? n : null
+}
+
+function intOrNull(value: string): number | null {
+  const n = numOrNull(value)
+  return n == null ? null : Math.round(n)
+}
+
+function renderCap(value: number | null | undefined): string {
+  return value == null ? '' : String(value)
+}
+
+export function MissionEditSheet({ mission, onClose, onSaved }: EditSheetProps) {
+  const [title, setTitle] = useState('')
+  const [goal, setGoal] = useState('')
+  const [criteriaText, setCriteriaText] = useState('')
+  const [maxUsd, setMaxUsd] = useState('')
+  const [maxTokens, setMaxTokens] = useState('')
+  const [maxWallclockSec, setMaxWallclockSec] = useState('')
+  const [maxTurns, setMaxTurns] = useState('')
+  const [maxToolCalls, setMaxToolCalls] = useState('')
+  const [reportsEnabled, setReportsEnabled] = useState(false)
+  const [reportIntervalMin, setReportIntervalMin] = useState('60')
+  const [reportFormat, setReportFormat] = useState<MissionReportFormat>('markdown')
+  const [reportConnectorIds, setReportConnectorIds] = useState<string[]>([])
+  const [connectors, setConnectors] = useState<Connector[]>([])
+  const [busy, setBusy] = useState(false)
+
+  useEffect(() => {
+    if (!mission) return
+    setTitle(mission.title)
+    setGoal(mission.goal)
+    setCriteriaText(mission.successCriteria.join('\n'))
+    setMaxUsd(renderCap(mission.budget.maxUsd))
+    setMaxTokens(renderCap(mission.budget.maxTokens))
+    setMaxWallclockSec(renderCap(mission.budget.maxWallclockSec))
+    setMaxTurns(renderCap(mission.budget.maxTurns))
+    setMaxToolCalls(renderCap(mission.budget.maxToolCalls))
+    const schedule = mission.reportSchedule
+    setReportsEnabled(Boolean(schedule?.enabled))
+    setReportIntervalMin(schedule ? String(Math.max(1, Math.round(schedule.intervalSec / 60))) : '60')
+    setReportFormat(schedule?.format ?? 'markdown')
+    setReportConnectorIds(mission.reportConnectorIds)
+  }, [mission])
+
+  useEffect(() => {
+    if (!mission) return
+    let cancelled = false
+    api<Record<string, Connector>>('GET', '/connectors')
+      .then((map) => {
+        if (!cancelled) setConnectors(map ? Object.values(map) : [])
+      })
+      .catch(() => { if (!cancelled) setConnectors([]) })
+    return () => { cancelled = true }
+  }, [mission])
+
+  const canEdit = useMemo(() => (mission ? isMissionEditable(mission.status) : false), [mission])
+
+  if (!mission) return null
+
+  const toggleConnector = (id: string) => {
+    setReportConnectorIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]))
+  }
+
+  const submit = async () => {
+    if (!title.trim() || !goal.trim()) {
+      toast.error('Title and goal are required')
+      return
+    }
+    const intervalMin = Number.parseFloat(reportIntervalMin)
+    if (reportsEnabled && (!Number.isFinite(intervalMin) || intervalMin <= 0)) {
+      toast.error('Report interval must be a positive number')
+      return
+    }
+    setBusy(true)
+    try {
+      const successCriteria = criteriaText
+        .split('\n')
+        .map((s) => s.trim())
+        .filter(Boolean)
+      const payload = {
+        title: title.trim(),
+        goal: goal.trim(),
+        successCriteria,
+        budget: {
+          maxUsd: numOrNull(maxUsd),
+          maxTokens: intOrNull(maxTokens),
+          maxWallclockSec: intOrNull(maxWallclockSec),
+          maxTurns: intOrNull(maxTurns),
+          maxToolCalls: intOrNull(maxToolCalls),
+        },
+        reportSchedule: reportsEnabled
+          ? {
+              intervalSec: Math.max(60, Math.round(intervalMin * 60)),
+              format: reportFormat,
+              enabled: true,
+            }
+          : null,
+        reportConnectorIds,
+      }
+      const updated = await api<Mission>('PUT', `/missions/${mission.id}`, payload)
+      onSaved(updated)
+      onClose()
+      toast.success('Mission updated')
+    } catch (error) {
+      toast.error(`Update failed: ${error instanceof Error ? error.message : String(error)}`)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4" onClick={onClose}>
+      <div
+        className="w-full max-w-lg rounded-[12px] border border-white/[0.08] bg-bg shadow-[0_24px_64px_rgba(0,0,0,0.6)] p-5 max-h-[90vh] overflow-y-auto"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="text-[14px] font-600 text-text mb-1">Edit mission</div>
+        <div className="text-[11px] text-text-3 mb-4">
+          Adjust the goal, budget, or reporting schedule. Changes apply to the next turn.
+        </div>
+
+        {!canEdit && (
+          <div className="mb-3 rounded border border-amber-500/30 bg-amber-500/10 text-amber-200 px-3 py-2 text-[11px]">
+            This mission is {mission.status}. Only draft, running, or paused missions can be edited.
+          </div>
+        )}
+
+        <fieldset disabled={!canEdit || busy} className="flex flex-col gap-3">
+          <label className="flex flex-col gap-1">
+            <span className="text-[11px] text-text-3">Title</span>
+            <input value={title} onChange={(e) => setTitle(e.target.value)} className={inputClass} />
+          </label>
+
+          <label className="flex flex-col gap-1">
+            <span className="text-[11px] text-text-3 inline-flex items-center gap-1">
+              Goal <HintTip text="The natural-language objective. The team works toward this until budget or success criteria are hit." />
+            </span>
+            <textarea
+              value={goal}
+              onChange={(e) => setGoal(e.target.value)}
+              rows={3}
+              className={`${inputClass} resize-none`}
+            />
+          </label>
+
+          <label className="flex flex-col gap-1">
+            <span className="text-[11px] text-text-3 inline-flex items-center gap-1">
+              Success criteria <HintTip text="One per line. Used in reports and final verification." />
+            </span>
+            <textarea
+              value={criteriaText}
+              onChange={(e) => setCriteriaText(e.target.value)}
+              rows={4}
+              className={`${inputClass} resize-none`}
+            />
+          </label>
+
+          <div className="rounded-[10px] border border-white/[0.06] bg-white/[0.02] px-3 py-2.5">
+            <div className="text-[11px] font-600 text-text-3 uppercase tracking-wide mb-2">
+              Budget <HintTip text="Leave any field blank to remove that cap." />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <label className="flex flex-col gap-1">
+                <span className="text-[11px] text-text-3">Max USD</span>
+                <input
+                  value={maxUsd}
+                  onChange={(e) => setMaxUsd(e.target.value)}
+                  className={inputClass}
+                  inputMode="decimal"
+                  placeholder="No cap"
+                />
+              </label>
+              <label className="flex flex-col gap-1">
+                <span className="text-[11px] text-text-3">Max tokens</span>
+                <input
+                  value={maxTokens}
+                  onChange={(e) => setMaxTokens(e.target.value)}
+                  className={inputClass}
+                  inputMode="numeric"
+                  placeholder="No cap"
+                />
+              </label>
+              <label className="flex flex-col gap-1">
+                <span className="text-[11px] text-text-3">Max wallclock (sec)</span>
+                <input
+                  value={maxWallclockSec}
+                  onChange={(e) => setMaxWallclockSec(e.target.value)}
+                  className={inputClass}
+                  inputMode="numeric"
+                  placeholder="No cap"
+                />
+              </label>
+              <label className="flex flex-col gap-1">
+                <span className="text-[11px] text-text-3">Max turns</span>
+                <input
+                  value={maxTurns}
+                  onChange={(e) => setMaxTurns(e.target.value)}
+                  className={inputClass}
+                  inputMode="numeric"
+                  placeholder="No cap"
+                />
+              </label>
+              <label className="flex flex-col gap-1 col-span-2">
+                <span className="text-[11px] text-text-3">Max tool calls</span>
+                <input
+                  value={maxToolCalls}
+                  onChange={(e) => setMaxToolCalls(e.target.value)}
+                  className={inputClass}
+                  inputMode="numeric"
+                  placeholder="No cap"
+                />
+              </label>
+            </div>
+          </div>
+
+          <div className="rounded-[10px] border border-white/[0.06] bg-white/[0.02] px-3 py-2.5">
+            <div className="text-[11px] font-600 text-text-3 uppercase tracking-wide mb-2">Periodic reports</div>
+            <label className="flex items-center gap-2 flex-wrap mb-2">
+              <input
+                type="checkbox"
+                checked={reportsEnabled}
+                onChange={(e) => setReportsEnabled(e.target.checked)}
+              />
+              <span className="text-[11px] text-text-3">Send a report every</span>
+              <input
+                disabled={!reportsEnabled}
+                value={reportIntervalMin}
+                onChange={(e) => setReportIntervalMin(e.target.value)}
+                className={`${inputClass} w-16`}
+                inputMode="numeric"
+              />
+              <span className="text-[11px] text-text-3">minutes in</span>
+              <select
+                disabled={!reportsEnabled}
+                value={reportFormat}
+                onChange={(e) => setReportFormat(e.target.value as MissionReportFormat)}
+                className={`${inputClass} w-28`}
+              >
+                {REPORT_FORMATS.map((f) => (
+                  <option key={f} value={f}>{f}</option>
+                ))}
+              </select>
+              <span className="text-[11px] text-text-3">format</span>
+            </label>
+
+            {reportsEnabled && (
+              <div>
+                <div className="text-[11px] text-text-3 mb-1 inline-flex items-center gap-1">
+                  Deliver via connectors <HintTip text="Reports post to the selected connector channels. Leave empty to keep reports in-app only." />
+                </div>
+                {connectors.length === 0 ? (
+                  <div className="text-[11px] text-text-3/60">No connectors configured.</div>
+                ) : (
+                  <div className="flex flex-col gap-1 max-h-[160px] overflow-y-auto">
+                    {connectors.map((c) => (
+                      <label key={c.id} className="flex items-center gap-2 text-[11px] text-text">
+                        <input
+                          type="checkbox"
+                          checked={reportConnectorIds.includes(c.id)}
+                          onChange={() => toggleConnector(c.id)}
+                        />
+                        <span className="font-600">{c.name}</span>
+                        <span className="text-text-3/60">({c.platform})</span>
+                      </label>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </fieldset>
+
+        <div className="mt-5 flex items-center justify-end gap-2">
+          <button
+            onClick={onClose}
+            className="text-[12px] px-3 py-1.5 rounded border border-white/[0.08] hover:bg-white/[0.04]"
+            disabled={busy}
+          >
+            Cancel
+          </button>
+          <button
+            onClick={submit}
+            disabled={busy || !canEdit}
+            className="text-[12px] font-600 px-3 py-1.5 rounded bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 hover:bg-emerald-500/25 disabled:opacity-40"
+          >
+            {busy ? 'Saving...' : 'Save changes'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}