bloby-bot 0.60.0 → 0.61.0

package/supervisor/channels/whatsapp.ts

@@ -518,11 +518,10 @@ export class WhatsAppChannel implements ChannelProvider {
           }
         }
 
-        // Skip if no text AND no images
-        if (!rawText && images.length === 0) continue;
-
-        // Use a default text for image-only messages
-        if (!rawText && images.length > 0) {
+        // Skip if no text AND no images; otherwise default text for image-only
+        // messages. Collapsing both branches also narrows `rawText` to `string`.
+        if (!rawText) {
+          if (images.length === 0) continue;
           rawText = '(image)';
         }
 

package/supervisor/chat/OnboardWizard.tsx

@@ -60,6 +60,8 @@ const PROVIDERS = [
 
 const MODELS: Record<string, { id: string; label: string }[]> = {
   anthropic: [
+    { id: 'claude-opus-4-8[1m]', label: 'Opus 4.8 (1M context)' },
+    { id: 'claude-opus-4-8', label: 'Opus 4.8' },
     { id: 'claude-opus-4-7[1m]', label: 'Opus 4.7 (1M context)' },
     { id: 'claude-opus-4-7', label: 'Opus 4.7' },
     { id: 'claude-sonnet-4-6', label: 'Sonnet 4.6 (1M context)' },
@@ -87,7 +89,7 @@ const HANDLES = [
 
 /* ── Dropdown ── */
 
-function ModelDropdown({ models, value, onChange, placeholder = 'Choose a model...' }: { models: { id: string; label: string }[]; value: string; onChange: (id: string) => void; placeholder?: string }) {
+function ModelDropdown({ models, value, onChange, placeholder = 'Choose a model...', menuMaxHeight = 'max-h-[320px]' }: { models: { id: string; label: string }[]; value: string; onChange: (id: string) => void; placeholder?: string; menuMaxHeight?: string }) {
   const [open, setOpen] = useState(false);
   const [pos, setPos] = useState<{ top: number; left: number; width: number } | null>(null);
   const btnRef = useRef<HTMLButtonElement>(null);
@@ -135,7 +137,7 @@ function ModelDropdown({ models, value, onChange, placeholder = 'Choose a model.
         <div
           ref={menuRef}
           style={{ position: 'fixed', top: pos.top, left: pos.left, width: pos.width, zIndex: 1000 }}
-          className="bg-[#222] border border-white/[0.08] rounded-xl shadow-xl py-1 max-h-[320px] overflow-y-auto"
+          className={`bg-[#222] border border-white/[0.08] rounded-xl shadow-xl py-1 ${menuMaxHeight} overflow-y-auto`}
         >
           {models.map((m) => (
             <button
@@ -215,7 +217,7 @@ function GoToMenu({ onJump }: { onJump: (step: number) => void }) {
         <div
           ref={menuRef}
           style={{ position: 'fixed', top: pos.top, right: pos.right, zIndex: 1000 }}
-          className="bg-[#222] border border-white/[0.08] rounded-xl shadow-xl py-1 min-w-[200px]"
+          className="bg-[#222] border border-white/[0.08] rounded-xl shadow-xl py-1 min-w-[200px] max-h-[188px] overflow-y-auto"
         >
           {SETTINGS_SCREENS.map((s) => (
             <button
@@ -242,6 +244,7 @@ interface EnvCache {
   values: Record<string, string>;
   originals: Record<string, string>;
   revealed: string[];
+  removed: string[];
   newRows: { id: number; name: string; value: string }[];
   newRowSeq: number;
   saved: boolean;
@@ -266,6 +269,7 @@ function EnvSettings({ cacheRef }: { cacheRef: MutableRefObject<EnvCache | null>
   const [values, setValues] = useState<Record<string, string>>(cached?.values ?? {});
   const [originals, setOriginals] = useState<Record<string, string>>(cached?.originals ?? {});
   const [revealed, setRevealed] = useState<Set<string>>(new Set(cached?.revealed ?? []));
+  const [removed, setRemoved] = useState<Set<string>>(new Set(cached?.removed ?? []));
   const [newRows, setNewRows] = useState<{ id: number; name: string; value: string }[]>(cached?.newRows ?? []);
   const newRowId = useRef(cached?.newRowSeq ?? 0);
   const [saving, setSaving] = useState(false);
@@ -295,12 +299,14 @@ function EnvSettings({ cacheRef }: { cacheRef: MutableRefObject<EnvCache | null>
   // Skip while loading so a navigate-away mid-fetch leaves the cache empty → refetch on return.
   useEffect(() => {
     if (loading) return;
-    cacheRef.current = { groups, values, originals, revealed: Array.from(revealed), newRows, newRowSeq: newRowId.current, saved };
+    cacheRef.current = { groups, values, originals, revealed: Array.from(revealed), removed: Array.from(removed), newRows, newRowSeq: newRowId.current, saved };
   });
 
   const validNewRows = newRows.filter((r) => r.name.trim() && r.value.trim() && ENV_NAME_RE.test(r.name.trim()));
-  const changedExisting = Object.keys(values).filter((k) => values[k] !== originals[k]);
-  const dirty = changedExisting.length > 0 || validNewRows.length > 0;
+  const removedExisting = [...removed].filter((k) => k in originals);
+  // An edit to a var that's also marked for removal doesn't count — removal wins.
+  const changedExisting = Object.keys(values).filter((k) => values[k] !== originals[k] && !removed.has(k));
+  const dirty = changedExisting.length > 0 || validNewRows.length > 0 || removedExisting.length > 0;
 
   const toggleReveal = (name: string) => {
     setRevealed((prev) => {
@@ -310,29 +316,41 @@ function EnvSettings({ cacheRef }: { cacheRef: MutableRefObject<EnvCache | null>
     });
   };
 
+  const toggleRemoved = (name: string) => {
+    setSaved(false);
+    setRemoved((prev) => {
+      const next = new Set(prev);
+      if (next.has(name)) next.delete(name); else next.add(name);
+      return next;
+    });
+  };
+
   const handleSave = async () => {
     if (!dirty || saving) return;
     setSaving(true); setSaveError(''); setSaved(false);
     const vars: Record<string, string> = {};
     for (const k of changedExisting) vars[k] = values[k];
     for (const r of validNewRows) vars[r.name.trim()] = r.value.trim();
+    const removeList = removedExisting;
     try {
       const res = await authFetch('/api/env', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ vars }),
+        body: JSON.stringify({ vars, remove: removeList }),
       });
       if (!res.ok) {
         const d = await res.json().catch(() => ({ error: 'Save failed' }));
         throw new Error(d.error || 'Save failed');
       }
-      // Snapshot of values including the just-added rows, so `dirty` resets after save.
+      // Snapshot of values including the just-added rows and minus the removed ones, so `dirty`
+      // resets after save.
       const merged = { ...values };
       for (const r of validNewRows) merged[r.name.trim()] = r.value.trim();
-      // Surface newly-added vars under a "Custom" group in the UI (the writer appends them
-      // to the file; on next load they'll re-group under whatever section precedes them).
+      for (const k of removeList) delete merged[k];
+      // Drop removed vars from the displayed groups; surface newly-added vars under a "Custom" group
+      // (the writer appends them; on next load they'll re-group under whatever section precedes them).
       setGroups((prev) => {
-        const next = prev.map((g) => ({ ...g, vars: [...g.vars] }));
+        let next = prev.map((g) => ({ ...g, vars: g.vars.filter((v) => !removed.has(v.name)) }));
         const existing = new Set(next.flatMap((g) => g.vars.map((v) => v.name)));
         const toAdd = validNewRows.map((r) => r.name.trim()).filter((nm) => !existing.has(nm));
         if (toAdd.length) {
@@ -340,11 +358,12 @@ function EnvSettings({ cacheRef }: { cacheRef: MutableRefObject<EnvCache | null>
           if (!custom) { custom = { title: 'Custom', vars: [] }; next.push(custom); }
           for (const nm of toAdd) custom.vars.push({ name: nm, value: merged[nm] });
         }
-        return next;
+        return next.filter((g) => g.vars.length > 0); // hide groups emptied by removal
       });
       setValues(merged);
       setOriginals(merged);
       setNewRows([]);
+      setRemoved(new Set());
       setSaved(true);
       setSaving(false);
     } catch (err: any) {
@@ -387,34 +406,60 @@ function EnvSettings({ cacheRef }: { cacheRef: MutableRefObject<EnvCache | null>
               </div>
               <div className="space-y-2.5">
                 {g.vars.map((v) => {
-                  const changed = values[v.name] !== originals[v.name];
+                  const isRemoved = removed.has(v.name);
+                  const changed = !isRemoved && values[v.name] !== originals[v.name];
                   const show = revealed.has(v.name);
                   return (
                     <div key={v.name}>
                       <label className="flex items-center gap-1.5 text-[11px] text-white/40 mb-1">
-                        <code className="font-mono text-white/50">{v.name}</code>
+                        <code className={`font-mono ${isRemoved ? 'text-white/30 line-through' : 'text-white/50'}`}>{v.name}</code>
                         {changed && <span className="text-[#0069FE] text-[10px] font-medium">• edited</span>}
+                        {isRemoved && <span className="text-red-400/80 text-[10px] font-medium">• will be removed</span>}
                       </label>
-                      <div className="relative">
-                        <input
-                          type={show ? 'text' : 'password'}
-                          value={values[v.name] ?? ''}
-                          onChange={(e) => setValues((p) => ({ ...p, [v.name]: e.target.value }))}
-                          autoComplete="off"
-                          spellCheck={false}
-                          data-1p-ignore
-                          data-lpignore="true"
-                          className="w-full bg-white/[0.03] border border-white/[0.08] text-white rounded-xl pl-4 pr-10 py-2.5 text-[13px] font-mono outline-none focus:border-[#0069FE]/30 transition-colors"
-                        />
-                        <button
-                          type="button"
-                          onClick={() => toggleReveal(v.name)}
-                          className="absolute right-3 top-1/2 -translate-y-1/2 text-white/30 hover:text-white/60 transition-colors"
-                          aria-label={show ? 'Hide value' : 'Reveal value'}
-                        >
-                          {show ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-                        </button>
-                      </div>
+                      {isRemoved ? (
+                        <div className="flex items-center gap-2 px-4 py-2.5 rounded-xl border border-red-500/20 bg-red-500/[0.04]">
+                          <span className="flex-1 text-[13px] text-white/30 font-mono">••••••••</span>
+                          <button
+                            type="button"
+                            onClick={() => toggleRemoved(v.name)}
+                            className="text-[11px] text-white/50 hover:text-white/80 transition-colors"
+                          >
+                            Undo
+                          </button>
+                        </div>
+                      ) : (
+                        <div className="flex items-center gap-2">
+                          <div className="relative flex-1">
+                            <input
+                              type={show ? 'text' : 'password'}
+                              value={values[v.name] ?? ''}
+                              onChange={(e) => setValues((p) => ({ ...p, [v.name]: e.target.value }))}
+                              autoComplete="off"
+                              spellCheck={false}
+                              data-1p-ignore
+                              data-lpignore="true"
+                              className="w-full bg-white/[0.03] border border-white/[0.08] text-white rounded-xl pl-4 pr-10 py-2.5 text-[13px] font-mono outline-none focus:border-[#0069FE]/30 transition-colors"
+                            />
+                            <button
+                              type="button"
+                              onClick={() => toggleReveal(v.name)}
+                              className="absolute right-3 top-1/2 -translate-y-1/2 text-white/30 hover:text-white/60 transition-colors"
+                              aria-label={show ? 'Hide value' : 'Reveal value'}
+                            >
+                              {show ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                            </button>
+                          </div>
+                          <button
+                            type="button"
+                            onClick={() => toggleRemoved(v.name)}
+                            className="shrink-0 p-2 text-white/25 hover:text-red-400 hover:bg-red-500/[0.06] rounded-lg transition-colors"
+                            title="Remove variable"
+                            aria-label="Remove variable"
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </button>
+                        </div>
+                      )}
                     </div>
                   );
                 })}
@@ -489,7 +534,7 @@ function EnvSettings({ cacheRef }: { cacheRef: MutableRefObject<EnvCache | null>
         <div className="mt-4 flex items-start gap-2.5 bg-amber-500/[0.06] border border-amber-500/20 rounded-xl px-4 py-3">
           <TriangleAlert className="h-4 w-4 text-amber-400 mt-0.5 shrink-0" />
           <p className="text-amber-300/80 text-[12px] leading-relaxed">
-            API key change detected. Your workspace backend will be restarted when you save.
+            Changes detected. Your workspace backend will be restarted when you save.
           </p>
         </div>
       )}
@@ -534,7 +579,6 @@ interface CronView {
   id: string;
   schedule: string;
   task: string;
-  enabled: boolean;
   oneShot?: boolean;
   paused?: boolean;
   hasTaskFile: boolean;
@@ -740,9 +784,7 @@ function PulseSection({ pulse, original, setPulse, onPulseSaved }: {
             />
           </div>
         </div>
-        <p className="text-white/35 text-[12px] mt-2 leading-relaxed">
-          No pulses fire between these times (your computer's local time). Spanning midnight is fine — e.g. 22:00 → 07:00.
-        </p>
+        <p className="text-white/35 text-[12px] mt-2 leading-relaxed">No pulses fire between these times.</p>
       </div>
 
       {saved && !dirty && (
@@ -777,8 +819,14 @@ function CronsSection({ crons, onChanged, onLocalUpdate }: {
   const [confirmId, setConfirmId] = useState<string | null>(null);
   const [downloading, setDownloading] = useState<Record<string, boolean>>({});
   const [actionError, setActionError] = useState('');
+  const [expanded, setExpanded] = useState<Set<string>>(new Set()); // collapsed by default
 
   const setRowBusy = (id: string, v: 'pause' | 'delete' | undefined) => setBusy((p) => ({ ...p, [id]: v }));
+  const toggleExpanded = (id: string) => setExpanded((prev) => {
+    const next = new Set(prev);
+    if (next.has(id)) next.delete(id); else next.add(id);
+    return next;
+  });
 
   const handleTogglePause = async (c: CronView) => {
     if (busy[c.id]) return;
@@ -869,105 +917,94 @@ function CronsSection({ crons, onChanged, onLocalUpdate }: {
         ) : (
           crons.map((c) => {
             const paused = !!c.paused;
-            const disabled = c.enabled === false;
-            const parked = paused || disabled;
             const rowBusy = busy[c.id];
+            const isOpen = expanded.has(c.id);
             const nextStr = formatNextRun(c.nextRun);
             return (
-              <div key={c.id} className={`rounded-xl border p-3.5 transition-colors ${parked ? 'border-white/[0.05] bg-white/[0.015] opacity-60' : 'border-white/[0.06] bg-white/[0.02]'}`}>
-                <div className="flex items-start gap-3">
-                  <div className={`w-9 h-9 rounded-lg flex items-center justify-center shrink-0 ${c.oneShot ? 'bg-amber-500/10' : 'bg-[#0069FE]/10'}`}>
-                    {c.oneShot ? <Zap className="h-[18px] w-[18px] text-amber-400" /> : <Clock className="h-[18px] w-[18px] text-[#0069FE]" />}
-                  </div>
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-start justify-between gap-2">
-                      <p className="text-[13px] text-white leading-snug">{c.task}</p>
-                      <div className="flex items-center gap-1 shrink-0">
-                        {c.oneShot && (
-                          <span className="inline-flex items-center gap-1 rounded-full bg-amber-500/10 border border-amber-500/20 text-amber-300/90 text-[10px] font-medium px-2 py-0.5">
-                            <Zap className="h-2.5 w-2.5" />One-time
-                          </span>
-                        )}
-                        {paused && (
-                          <span className="inline-flex items-center gap-1 rounded-full bg-white/[0.06] border border-white/[0.08] text-white/50 text-[10px] font-medium px-2 py-0.5">
-                            <Pause className="h-2.5 w-2.5" />Paused
-                          </span>
-                        )}
-                        {disabled && !paused && (
-                          <span className="inline-flex items-center gap-1 rounded-full bg-white/[0.06] border border-white/[0.08] text-white/50 text-[10px] font-medium px-2 py-0.5">
-                            Disabled
-                          </span>
-                        )}
-                      </div>
-                    </div>
-
-                    <div className="mt-1.5 flex items-center gap-1.5 text-[12px] text-white/45">
-                      <Clock className="h-3 w-3 shrink-0 text-white/30" />
-                      <span className="truncate">{c.description}</span>
-                    </div>
-
-                    <div className="mt-1.5">
-                      {parked ? (
-                        <span className="text-[11px] text-white/30">{paused ? "Paused — won't run" : "Disabled — won't run"}</span>
-                      ) : nextStr ? (
-                        <span className="inline-flex items-center gap-1 rounded-md bg-[#0069FE]/[0.08] border border-[#0069FE]/15 text-[#4AA8FF] text-[11px] font-medium px-2 py-0.5">
-                          Next: {nextStr}
-                        </span>
-                      ) : (
-                        <span className="text-[11px] text-white/30">No upcoming run</span>
-                      )}
+              <div key={c.id} className={`rounded-xl border transition-colors ${paused ? 'border-white/[0.05] bg-white/[0.015]' : 'border-white/[0.06] bg-white/[0.02]'}`}>
+                {/* Header row — title + actions (always visible) */}
+                <div className="flex items-center gap-2 p-2.5">
+                  <button
+                    type="button"
+                    onClick={() => toggleExpanded(c.id)}
+                    className="flex items-center gap-2.5 flex-1 min-w-0 text-left"
+                  >
+                    <div className={`w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${paused ? 'bg-white/[0.04]' : c.oneShot ? 'bg-amber-500/10' : 'bg-[#0069FE]/10'}`}>
+                      {c.oneShot
+                        ? <Zap className={`h-4 w-4 ${paused ? 'text-white/40' : 'text-amber-400'}`} />
+                        : <Clock className={`h-4 w-4 ${paused ? 'text-white/40' : 'text-[#0069FE]'}`} />}
                     </div>
-                  </div>
-                </div>
-
-                <div className="mt-3 flex items-center justify-between gap-2">
-                  {c.hasTaskFile ? (
-                    <button
-                      type="button" onClick={() => handleDownloadTask(c)} disabled={downloading[c.id]}
-                      className="group inline-flex items-center gap-1.5 rounded-md bg-white/[0.04] hover:bg-white/[0.07] border border-white/[0.06] hover:border-white/[0.12] text-white/50 hover:text-white/80 text-[11px] font-mono px-2 py-1 transition-colors disabled:opacity-50"
-                      title="Download task instructions"
-                    >
-                      {downloading[c.id] ? <LoaderCircle className="h-3 w-3 animate-spin" /> : <FileText className="h-3 w-3 shrink-0" />}
-                      {c.id}.md
-                      <Download className="h-3 w-3 opacity-0 group-hover:opacity-100 transition-opacity" />
-                    </button>
-                  ) : (<span />)}
+                    <span className={`flex-1 min-w-0 truncate text-[13px] ${paused ? 'text-white/45' : 'text-white'}`}>{c.task || '(untitled task)'}</span>
+                    {paused && (
+                      <span className="shrink-0 text-[10px] font-medium text-white/40 bg-white/[0.05] rounded-full px-2 py-0.5">Paused</span>
+                    )}
+                  </button>
 
                   {confirmId === c.id ? (
-                    <div className="flex items-center gap-1.5">
-                      <span className="text-[11px] text-white/50 mr-0.5">Delete?</span>
+                    <div className="flex items-center gap-1 shrink-0">
+                      <span className="text-[11px] text-white/45 mr-0.5">Delete?</span>
                       <button
                         type="button" onClick={() => handleDelete(c)} disabled={rowBusy === 'delete'}
-                        className="inline-flex items-center gap-1 rounded-md bg-red-500/15 hover:bg-red-500/25 border border-red-500/30 text-red-300 text-[11px] font-medium px-2.5 py-1 transition-colors disabled:opacity-50"
+                        className="inline-flex items-center gap-1 rounded-md bg-red-500/15 hover:bg-red-500/25 border border-red-500/30 text-red-300 text-[11px] font-medium px-2 py-1 transition-colors disabled:opacity-50"
                       >
-                        {rowBusy === 'delete' ? <LoaderCircle className="h-3 w-3 animate-spin" /> : <Trash2 className="h-3 w-3" />}
-                        Delete
+                        {rowBusy === 'delete' ? <LoaderCircle className="h-3 w-3 animate-spin" /> : <Trash2 className="h-3 w-3" />}Delete
                       </button>
                       <button
                         type="button" onClick={() => setConfirmId(null)} disabled={rowBusy === 'delete'}
-                        className="rounded-md text-white/40 hover:text-white/70 text-[11px] px-2 py-1 transition-colors"
+                        className="rounded-md text-white/40 hover:text-white/70 text-[11px] px-1.5 py-1 transition-colors"
                       >
                         Cancel
                       </button>
                     </div>
                   ) : (
-                    <div className="flex items-center gap-1">
+                    <div className="flex items-center gap-0.5 shrink-0">
                       <button
                         type="button" onClick={() => handleTogglePause(c)} disabled={!!rowBusy}
-                        className="inline-flex items-center gap-1 rounded-md text-white/45 hover:text-white/80 hover:bg-white/[0.04] text-[11px] font-medium px-2 py-1 transition-colors disabled:opacity-50"
+                        title={paused ? 'Resume' : 'Pause'} aria-label={paused ? 'Resume' : 'Pause'}
+                        className="p-1.5 rounded-lg text-white/40 hover:text-white/80 hover:bg-white/[0.05] transition-colors disabled:opacity-50"
                       >
-                        {rowBusy === 'pause' ? <LoaderCircle className="h-3 w-3 animate-spin" /> : paused ? <Play className="h-3 w-3" /> : <Pause className="h-3 w-3" />}
-                        {paused ? 'Resume' : 'Pause'}
+                        {rowBusy === 'pause' ? <LoaderCircle className="h-4 w-4 animate-spin" /> : paused ? <Play className="h-4 w-4" /> : <Pause className="h-4 w-4" />}
                       </button>
                       <button
                         type="button" onClick={() => setConfirmId(c.id)} disabled={!!rowBusy}
-                        className="inline-flex items-center gap-1 rounded-md text-white/30 hover:text-red-400 hover:bg-red-500/[0.06] text-[11px] font-medium px-2 py-1 transition-colors disabled:opacity-50"
+                        title="Delete" aria-label="Delete"
+                        className="p-1.5 rounded-lg text-white/30 hover:text-red-400 hover:bg-red-500/[0.06] transition-colors disabled:opacity-50"
                       >
-                        <Trash2 className="h-3 w-3" />Delete
+                        <Trash2 className="h-4 w-4" />
+                      </button>
+                      <button
+                        type="button" onClick={() => toggleExpanded(c.id)}
+                        title={isOpen ? 'Collapse' : 'Expand'} aria-label={isOpen ? 'Collapse' : 'Expand'}
+                        className="p-1.5 rounded-lg text-white/30 hover:text-white/70 hover:bg-white/[0.05] transition-colors"
+                      >
+                        <ChevronDown className={`h-4 w-4 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
                       </button>
                     </div>
                   )}
                 </div>
+
+                {/* Expanded detail — schedule, next run, task file */}
+                {isOpen && (
+                  <div className="px-2.5 pb-3 pl-[52px] -mt-0.5">
+                    <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-[12px] text-white/45">
+                      <span className="inline-flex items-center gap-1.5"><Clock className="h-3 w-3 text-white/30 shrink-0" />{c.description}</span>
+                      {c.oneShot && <span className="text-amber-300/70">· One-time</span>}
+                      {/* paused is already shown by the header pill — don't repeat it here */}
+                      {!paused && nextStr && <span className="text-[#4AA8FF]">· Next: {nextStr}</span>}
+                    </div>
+                    {c.hasTaskFile && (
+                      <button
+                        type="button" onClick={() => handleDownloadTask(c)} disabled={downloading[c.id]}
+                        className="group mt-2 inline-flex items-center gap-1.5 rounded-md bg-white/[0.04] hover:bg-white/[0.07] border border-white/[0.06] hover:border-white/[0.12] text-white/50 hover:text-white/80 text-[11px] font-mono px-2 py-1 transition-colors disabled:opacity-50"
+                        title="Download task instructions"
+                      >
+                        {downloading[c.id] ? <LoaderCircle className="h-3 w-3 animate-spin" /> : <FileText className="h-3 w-3 shrink-0" />}
+                        {c.id}.md
+                        <Download className="h-3 w-3 opacity-0 group-hover:opacity-100 transition-opacity" />
+                      </button>
+                    )}
+                  </div>
+                )}
               </div>
             );
           })
@@ -2087,6 +2124,7 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                     models={SETTINGS_SCREENS.map((s) => ({ id: String(s.step), label: s.label }))}
                     value=""
                     placeholder="Select a setting…"
+                    menuMaxHeight="max-h-[188px]"
                     onChange={(id) => setStep(Number(id))}
                   />
                 </div>
@@ -3477,6 +3515,21 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                 {/* ── Auth flow: Anthropic ── */}
                 {provider === 'anthropic' && (
                   <div className="space-y-2.5">
+                    {/* Anthropic third-party usage policy notice — shown to anyone considering Claude. */}
+                    <div className="rounded-xl border border-amber-500/20 bg-amber-500/[0.06] px-4 py-3.5">
+                      <div className="flex items-center gap-2 mb-2">
+                        <TriangleAlert className="h-4 w-4 text-amber-400 shrink-0" />
+                        <h3 className="text-[12.5px] font-semibold text-amber-200/90">Anthropic Third-Party App Policy Update</h3>
+                      </div>
+                      <div className="space-y-2 text-amber-100/70 text-[12px] leading-relaxed">
+                        <p>Starting June 15, 2026, Anthropic will provide a separate Third-Party App credit equal to the amount you pay for your subscription.</p>
+                        <p>For example, if you have the Max 5x plan at $100/month, you will receive $100 in credits to use with third-party tools like Bloby.</p>
+                        <p>Unfortunately, this is only a fraction of the usage Bloby users had before. We don&apos;t control Anthropic&apos;s rules, but we do need to follow them.</p>
+                        <p>The best alternative right now is a <span className="font-medium text-amber-100/90">ChatGPT subscription</span>, which also offers $100 and $200 plans with much higher usage limits for Bloby.</p>
+                        <p>In the short term, Bloby will be optimized for ChatGPT. In the long term, we are building our own model harness so Bloby has more control, more flexibility, and does not depend too heavily on providers that can change their rules at any moment.</p>
+                      </div>
+                    </div>
+
                     {isConnected && (
                       <div className="space-y-2.5">
                         <div className="bg-emerald-500/8 border border-emerald-500/15 rounded-lg px-3.5 py-2.5">

package/supervisor/harnesses/claude.ts

@@ -213,6 +213,11 @@ async function buildConversationOptions(
 
   return {
     model,
+    // Reasoning effort. 'high' = deep reasoning while staying more token-efficient
+    // than the CLI's xhigh default on Opus 4.7/4.8 — meaningful given Anthropic's
+    // tighter third-party usage limits. Supported on Opus 4.6+/Sonnet 4.6; silently
+    // ignored by models without effort support.
+    effort: 'high',
     cwd: WORKSPACE_DIR,
     permissionMode: 'bypassPermissions',
     allowDangerouslySkipPermissions: true,
@@ -648,6 +653,7 @@ export async function startBlobyAgentQuery(
       prompt: sdkPrompt,
       options: {
         model,
+        effort: 'high', // see buildConversationOptions — token-efficient deep reasoning
         cwd: WORKSPACE_DIR,
         permissionMode: 'bypassPermissions',
         allowDangerouslySkipPermissions: true,
@@ -762,6 +768,7 @@ export async function runAgentQuery(req: AgentQueryRequest): Promise<AgentQueryR
       prompt: req.message,
       options: {
         cwd: WORKSPACE_DIR,
+        effort: 'high', // see buildConversationOptions — token-efficient deep reasoning
         permissionMode: 'bypassPermissions',
         allowDangerouslySkipPermissions: true,
         maxTurns,

package/supervisor/harnesses/pi/index.ts

@@ -12,7 +12,7 @@
  */
 import { log } from '../../../shared/logger.js';
 import { WORKSPACE_DIR } from '../../../shared/paths.js';
-import type { SavedFile } from '../file-saver.js';
+import type { SavedFile } from '../../file-saver.js';
 import { assembleSystemPrompt } from '../../../worker/prompts/prompt-assembler.js';
 import fs from 'fs';
 import path from 'path';

package/supervisor/harnesses/pi/tools/path-safety.ts

@@ -12,7 +12,14 @@ export function safeResolve(cwd: string, requested: string): string {
   if (!requested || typeof requested !== 'string') {
     throw new Error('Missing file path');
   }
-  const root = fs.realpathSync.native ? fs.realpathSync(cwd) : path.resolve(cwd);
+  // Canonicalize cwd (resolves symlinks) so the traversal check below compares real
+  // paths. Falls back to a plain resolve when cwd doesn't exist yet (realpath throws).
+  let root: string;
+  try {
+    root = fs.realpathSync.native(cwd);
+  } catch {
+    root = path.resolve(cwd);
+  }
   const abs = path.isAbsolute(requested)
     ? path.normalize(requested)
     : path.normalize(path.join(root, requested));