@phenx-inc/ctlsurf 0.13.6 → 0.14.0

package/src/renderer/components/SettingsDialog.tsx

@@ -35,21 +35,60 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
   const [saved, setSaved] = useState(false)
   const [version, setVersion] = useState('')
 
+  // Observer (global) — the key is write-only over IPC; we only learn
+  // whether one is configured (hasApiKey) and from where (keySource).
+  const [obsEnabled, setObsEnabled] = useState(false)
+  const [obsApiKey, setObsApiKey] = useState('')
+  const [obsHasKey, setObsHasKey] = useState(false)
+  const [obsKeySource, setObsKeySource] = useState<'settings' | 'env' | null>(null)
+  const [obsCapUsd, setObsCapUsd] = useState(1)
+  const [obsSaved, setObsSaved] = useState(false)
+
   const loadProfiles = async () => {
     const data = await window.worker.listProfiles() as ProfileListResponse
     setProfileList(data)
     setActiveProfileId(data.activeProfile)
   }
 
+  const loadObserver = async () => {
+    try {
+      const o = await window.worker.getObserverSettings()
+      setObsEnabled(o.enabled)
+      setObsHasKey(o.hasApiKey)
+      setObsKeySource(o.keySource)
+      setObsCapUsd(o.dailyCapUsd)
+      setObsApiKey('')
+    } catch { /* older main process without observer IPC */ }
+  }
+
   useEffect(() => {
     if (open) {
       loadProfiles()
+      loadObserver()
       setEditingId(null)
       setSaved(false)
+      setObsSaved(false)
       window.worker.getVersion().then(setVersion).catch(() => { /* ignore */ })
     }
   }, [open])
 
+  const handleObserverSave = async () => {
+    const data: { enabled: boolean; anthropicApiKey?: string; dailyCapUsd?: number } = {
+      enabled: obsEnabled,
+      dailyCapUsd: Math.max(0.05, obsCapUsd) || 1,
+    }
+    // Only send the key if the user typed a new one (blank = keep stored).
+    if (obsApiKey.trim()) {
+      data.anthropicApiKey = obsApiKey.trim()
+    }
+    const o = await window.worker.setObserverSettings(data)
+    setObsHasKey(o.hasApiKey)
+    setObsKeySource(o.keySource)
+    setObsApiKey('')
+    setObsSaved(true)
+    setTimeout(() => setObsSaved(false), 900)
+  }
+
   const startEditing = (profile: ProfileSummary) => {
     setEditingId(profile.id)
     setName(profile.name)
@@ -238,6 +277,71 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
           </div>
         )}
 
+        {!editingId && (
+          // ─── Observer (global) ─────────────────
+          <div className="settings-section">
+            <h4>Observer</h4>
+            <p className="settings-hint">
+              Reviews agent sessions for assumptions, unverified claims, and
+              dependency/license risk, tracks time per work item, and posts a
+              session digest to the project's Agent Datastore page.
+            </p>
+
+            <label className="settings-checkbox">
+              <input
+                type="checkbox"
+                checked={obsEnabled}
+                onChange={e => setObsEnabled(e.target.checked)}
+              />
+              <span>Enable Observer</span>
+              <span className="settings-hint">
+                Applies to newly started agent tabs. Advisory only — never
+                blocks or slows the agent.
+              </span>
+            </label>
+
+            <label>
+              Anthropic API Key
+              <input
+                type="password"
+                value={obsApiKey}
+                onChange={e => setObsApiKey(e.target.value)}
+                placeholder={
+                  obsKeySource === 'settings' ? '***configured*** (leave blank to keep)'
+                  : obsKeySource === 'env' ? 'using ANTHROPIC_API_KEY from environment'
+                  : 'sk-ant-…'
+                }
+              />
+              <span className="settings-hint">
+                Your own Anthropic key — separate from the ctlsurf profile key.
+                Without one, the Observer still records the session ledger,
+                Tier-0 tags, and spans, but skips model review and digests.
+              </span>
+            </label>
+
+            <label>
+              Daily budget cap (USD)
+              <input
+                type="number"
+                min={0.05}
+                step={0.25}
+                value={obsCapUsd}
+                onChange={e => setObsCapUsd(parseFloat(e.target.value) || 1)}
+              />
+              <span className="settings-hint">
+                Model review pauses for the day once spend reaches the cap;
+                Tier-0 tagging and spans continue.
+              </span>
+            </label>
+
+            <div className="settings-actions">
+              <button className="btn-primary" onClick={handleObserverSave}>
+                {obsSaved ? 'Saved!' : 'Save Observer Settings'}
+              </button>
+            </div>
+          </div>
+        )}
+
         <div className="settings-section settings-about">
           <h4>About</h4>
           <div className="about-name">ctlsurf{version ? ` · v${version}` : ''}</div>

package/src/renderer/styles.css

@@ -2382,3 +2382,220 @@ html, body, #root {
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
   pointer-events: none;
 }
+
+/* ─── Observer pane ─────────────────────────────── */
+
+/* Header on/off switch */
+.observer-switch { display: inline-flex; align-items: center; cursor: pointer; padding-top: 2px; }
+.observer-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
+.observer-switch-track {
+  width: 34px; height: 19px; border-radius: 10px;
+  background: #3b4261; position: relative; transition: background 0.15s ease;
+  display: inline-block; flex-shrink: 0;
+}
+.observer-switch-thumb {
+  position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
+  border-radius: 50%; background: #c0caf5; transition: transform 0.15s ease;
+}
+.observer-switch input:checked + .observer-switch-track { background: #9ece6a; }
+.observer-switch input:checked + .observer-switch-track .observer-switch-thumb {
+  transform: translateX(15px); background: #1a1b26;
+}
+.observer-switch input:disabled + .observer-switch-track { opacity: 0.5; }
+
+.obs-feed { gap: 6px; }
+
+/* Finding / digest cards */
+.obs-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  width: 100%;
+  text-align: left;
+  appearance: none;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  background: #15161f;
+  border: 1px solid #262a3f;
+  border-left: 3px solid #565f89;
+  border-radius: 9px;
+  padding: 9px 26px 9px 12px;
+  transition: border-color 0.12s ease, background 0.12s ease;
+}
+.obs-card:hover { background: #181a26; border-color: #323752; border-left-width: 3px; }
+.obs-card:active { transform: scale(0.995); }
+
+.obs-card-top {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.obs-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex-shrink: 0;
+  font-size: 9.5px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  padding: 2px 7px 2px 6px;
+  border: 1px solid;
+  border-radius: 999px;
+  line-height: 1.4;
+}
+.obs-chip-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
+.obs-card-cat {
+  font-size: 10px;
+  color: #565f89;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.obs-card-time {
+  margin-left: auto;
+  flex-shrink: 0;
+  font-size: 10px;
+  color: #414868;
+  font-variant-numeric: tabular-nums;
+}
+.obs-card-title {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: #c0caf5;
+  line-height: 1.4;
+  word-break: break-word;
+}
+.obs-card-body {
+  font-size: 11.5px;
+  color: #9aa5ce;
+  line-height: 1.5;
+  word-break: break-word;
+}
+.obs-card-body p { margin: 0 0 6px; white-space: pre-wrap; }
+.obs-card-facts { display: flex; flex-wrap: wrap; gap: 6px; }
+.obs-fact {
+  font-size: 10px;
+  color: #565f89;
+  background: #1c1e2b;
+  border: 1px solid #262a3f;
+  border-radius: 5px;
+  padding: 1px 6px;
+  font-variant-numeric: tabular-nums;
+}
+.obs-card-caret {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  font-size: 10px;
+  color: #414868;
+  transition: transform 0.12s ease;
+}
+.obs-card-caret.open { transform: rotate(90deg); }
+
+/* One-line heartbeats (reviews ran, attach/detach) and health warnings */
+.obs-line {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 3px 12px 3px 14px;
+  font-size: 11px;
+  color: #565f89;
+  line-height: 1.45;
+}
+.obs-line-dot {
+  flex-shrink: 0;
+  width: 4px; height: 4px;
+  border-radius: 50%;
+  background: #3b4261;
+  align-self: center;
+}
+.obs-line.health { color: #e0af68; }
+.obs-line.health .obs-line-dot { background: #e0af68; }
+.obs-line-text { min-width: 0; word-break: break-word; }
+.obs-line-time {
+  margin-left: auto;
+  flex-shrink: 0;
+  font-size: 10px;
+  color: #414868;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Sensitivity lever + processing indicator row */
+.obs-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 8px 14px;
+  border-bottom: 1px solid #23263a;
+}
+.obs-sensitivity {
+  display: inline-flex;
+  background: #15161f;
+  border: 1px solid #262a3f;
+  border-radius: 7px;
+  padding: 2px;
+  gap: 2px;
+}
+.obs-sens-btn {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: #565f89;
+  font: inherit;
+  font-size: 10.5px;
+  font-weight: 600;
+  padding: 3px 9px;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease;
+  white-space: nowrap;
+}
+.obs-sens-btn:hover { color: #9aa5ce; }
+.obs-sens-btn.active { background: #2a2f4a; color: #c0caf5; }
+
+/* "reviewing" bouncing dots */
+.obs-reviewing {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 10.5px;
+  color: #7aa2f7;
+  letter-spacing: 0.03em;
+}
+.obs-reviewing-dot {
+  width: 4px; height: 4px;
+  border-radius: 50%;
+  background: #7aa2f7;
+  animation: obs-dot-bounce 1.1s ease-in-out infinite;
+}
+.obs-reviewing-dot:nth-child(2) { animation-delay: 0.15s; }
+.obs-reviewing-dot:nth-child(3) { animation-delay: 0.3s; margin-right: 4px; }
+@keyframes obs-dot-bounce {
+  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
+  30% { transform: translateY(-3px); opacity: 1; }
+}
+
+/* Pulsing eye badge while a model review is in flight */
+.obs-badge { position: relative; }
+.obs-badge.reviewing { color: #7aa2f7; }
+.obs-badge.reviewing::after {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  border: 1px solid #7aa2f7;
+  animation: obs-badge-pulse 1.6s ease-out infinite;
+  pointer-events: none;
+}
+@keyframes obs-badge-pulse {
+  0% { opacity: 0.9; transform: scale(1); }
+  70% { opacity: 0; transform: scale(1.35); }
+  100% { opacity: 0; transform: scale(1.35); }
+}