shraga 0.0.2 → 0.1.1

package/src/client/components/CliAuthConsent.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import { Terminal, ShieldCheck } from 'lucide-react';
+import { Button } from './ui/button';
+
+/**
+ * CLI auth consent — rendered when the SPA is loaded at /cli-auth (opened by `shraga term`/`shraga
+ * login`). The user is already authenticated by the app's auth layer; here they approve a terminal
+ * on a specific machine. Approve mints a scoped API key (owned by THIS user) via the normal
+ * /api/api-keys endpoint and hands it back to the CLI's loopback listener — so CLI-spawned terminals
+ * appear in the web UI under the user's own identity. No secret is ever shown or copied by hand.
+ */
+export function CliAuthConsent({ getToken, userEmail }: { getToken: () => Promise<string | null>; userEmail: string }) {
+  const [busy, setBusy] = useState(false);
+  const [done, setDone] = useState(false);
+  const [error, setError] = useState('');
+
+  const params = new URLSearchParams(window.location.search);
+  const port = params.get('port') || '';
+  const state = params.get('state') || '';
+  const host = params.get('host') || 'this machine';
+  const missing = !port || !state;
+
+  async function approve() {
+    setBusy(true);
+    setError('');
+    try {
+      const token = await getToken();
+      if (!token) throw new Error('Not signed in');
+      // Mint a key under the signed-in user (existing endpoint) — this is what ties CLI terminals to you.
+      const res = await fetch('/api/api-keys', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+        body: JSON.stringify({ label: `shraga term @ ${host}` }),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || `Request failed (${res.status})`);
+      }
+      const { key } = (await res.json()) as { key: string };
+      // Hand the key to the CLI's loopback listener (127.0.0.1:<port>). CORS-preflighted POST.
+      const cb = await fetch(`http://127.0.0.1:${port}/token`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ token: key, state }),
+      });
+      if (!cb.ok) throw new Error('Could not reach the CLI on this machine — is `shraga term` still waiting?');
+      setDone(true);
+    } catch (e: any) {
+      setError(e.message || 'Authorization failed');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="flex h-full items-center justify-center bg-background">
+      <div className="flex flex-col items-center gap-5 p-8 rounded-xl border bg-card shadow-sm w-full max-w-sm text-center">
+        <div className="flex items-center gap-2">
+          <div className="flex items-center justify-center w-11 h-11 rounded-full bg-primary text-primary-foreground">
+            <Terminal className="w-5 h-5" />
+          </div>
+          <ShieldCheck className="w-5 h-5 text-muted-foreground" />
+        </div>
+
+        {done ? (
+          <>
+            <h1 className="text-lg font-semibold">Terminal authorized</h1>
+            <p className="text-sm text-muted-foreground">
+              Your terminal on <span className="font-medium text-foreground">{host}</span> is connected. You can close
+              this tab and return to it.
+            </p>
+          </>
+        ) : (
+          <>
+            <div>
+              <h1 className="text-lg font-semibold">Authorize terminal</h1>
+              <p className="text-sm text-muted-foreground mt-1">
+                A terminal on <span className="font-medium text-foreground">{host}</span> wants to spawn and view shells
+                as you. Its terminals will show up here in the web UI.
+              </p>
+            </div>
+            <p className="text-xs text-muted-foreground">Signed in as {userEmail}</p>
+            {missing && <p className="text-sm text-destructive">Invalid request — missing parameters.</p>}
+            {error && <p className="text-sm text-destructive">{error}</p>}
+            <div className="flex gap-2 w-full">
+              <Button variant="outline" className="flex-1" onClick={() => window.close()} disabled={busy}>
+                Cancel
+              </Button>
+              <Button className="flex-1" onClick={approve} disabled={busy || missing}>
+                {busy ? 'Authorizing…' : 'Authorize'}
+              </Button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/client/components/ConfigPanel.tsx

@@ -0,0 +1,328 @@
+import { useEffect, useRef, useState } from 'react';
+import { SlidersHorizontal } from 'lucide-react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Textarea } from './ui/textarea';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogBody, DialogFooter } from './ui/dialog';
+import { useSlots } from '@/lib/slots';
+
+interface AgentConfig {
+  model?: string;
+  engine?: string;
+  systemPrompt?: string;
+  allowedTools?: string[];
+  permissionMode?: string;
+  maxTurns?: number;
+  skillDiscovery?: boolean;
+  thinking?: 'adaptive' | 'enabled' | 'disabled';
+  effort?: 'low' | 'medium' | 'high' | 'max';
+}
+
+interface EngineModel {
+  value: string;
+  label: string;
+  provider?: string;
+}
+
+interface EngineInfo {
+  name: string;
+  models: EngineModel[];
+}
+
+const FALLBACK_MODELS: EngineModel[] = [
+  { value: '', label: 'Default (claude-sonnet-4-6)' },
+  { value: 'claude-fable-5', label: 'Fable 5 — frontier, most capable' },
+  { value: 'claude-opus-4-8', label: 'Opus 4.8 — most capable, best for complex/agentic tasks' },
+  { value: 'claude-opus-4-7', label: 'Opus 4.7' },
+  { value: 'claude-opus-4-6', label: 'Opus 4.6' },
+  { value: 'claude-sonnet-4-6', label: 'Sonnet 4.6 — balanced speed & intelligence' },
+  { value: 'claude-haiku-4-5', label: 'Haiku 4.5 — fastest' },
+];
+
+const PERMISSION_MODES = [
+  { value: 'acceptEdits', label: 'Accept Edits (auto-approve file changes)' },
+  { value: 'plan', label: 'Plan (read-only, suggest changes)' },
+  { value: 'bypassPermissions', label: 'Bypass All (dangerous — no prompts)' },
+];
+
+interface SessionDirectives { engine?: string; model?: string; turns?: number; thinking?: string }
+
+interface Props {
+  getToken: () => Promise<string | null>;
+  onSaved?: (config: AgentConfig) => void;
+  trigger?: React.ReactNode;
+  /** When set, the runtime knobs (engine/model/turns/thinking) edit THIS session's directives. */
+  sessionId?: string;
+  sessionDirectives?: SessionDirectives;
+  onDirectivesSaved?: (directives: SessionDirectives) => void;
+}
+
+export function ConfigPanel({ getToken, onSaved, trigger, sessionId, sessionDirectives, onDirectivesSaved }: Props) {
+  const slots = useSlots();
+  const [config, setConfig] = useState<AgentConfig>({});
+  const [open, setOpen] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [engines, setEngines] = useState<EngineInfo[]>([]);
+  const [multiEngine, setMultiEngine] = useState(false);
+  // Global config as loaded — so a per-session runtime change doesn't clobber the global defaults.
+  const globalRef = useRef<AgentConfig>({});
+
+  useEffect(() => {
+    if (!open) return;
+    getToken().then((token) => {
+      if (!token) return;
+      fetch('/api/config', { headers: { Authorization: `Bearer ${token}` } })
+        .then((r) => r.json())
+        .then((global: AgentConfig) => {
+          globalRef.current = global;
+          // For an active session, the runtime knobs reflect the session's own directives
+          // (falling back to the global default when the session hasn't overridden them).
+          const sd = sessionId ? sessionDirectives : undefined;
+          setConfig({
+            ...global,
+            ...(sd?.engine !== undefined ? { engine: sd.engine } : {}),
+            ...(sd?.model !== undefined ? { model: sd.model } : {}),
+            ...(sd?.turns !== undefined ? { maxTurns: sd.turns } : {}),
+            ...(sd?.thinking !== undefined ? { thinking: sd.thinking as AgentConfig['thinking'] } : {}),
+          });
+        })
+        .catch(() => {});
+      fetch('/api/engines', { headers: { Authorization: `Bearer ${token}` } })
+        .then((r) => r.json())
+        .then((data) => {
+          setEngines(data.engines ?? []);
+          setMultiEngine(data.multiEngine ?? false);
+        })
+        .catch(() => {});
+    });
+  }, [open, getToken, sessionId, sessionDirectives]);
+
+  const save = async () => {
+    setSaving(true);
+    const token = await getToken();
+    const auth = { Authorization: `Bearer ${token ?? ''}`, 'Content-Type': 'application/json' };
+    try {
+      if (sessionId) {
+        // Runtime knobs apply to THIS conversation (session directives shadow global at send time).
+        const runtime: SessionDirectives = {
+          engine: config.engine, model: config.model, turns: config.maxTurns, thinking: config.thinking,
+        };
+        const r = await fetch(`/api/sessions/${sessionId}/directives`, { method: 'PUT', headers: auth, body: JSON.stringify(runtime) })
+          .then((res) => res.json()).catch((e) => { console.warn('[config] directives save failed', e); return null; });
+        if (r?.directives) onDirectivesSaved?.(r.directives);
+        // Persist only the non-runtime fields globally — keep the global engine/model/turns/thinking intact.
+        const global: AgentConfig = {
+          ...config,
+          engine: globalRef.current.engine, model: globalRef.current.model,
+          maxTurns: globalRef.current.maxTurns, thinking: globalRef.current.thinking,
+        };
+        await fetch('/api/config', { method: 'PUT', headers: auth, body: JSON.stringify(global) });
+        onSaved?.(global);
+      } else {
+        await fetch('/api/config', { method: 'PUT', headers: auth, body: JSON.stringify(config) });
+        onSaved?.(config);
+      }
+      setOpen(false);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const currentEngine = config.engine || 'claude-code';
+  const engineInfo = engines.find(e => e.name === currentEngine);
+  const models = engineInfo?.models ?? FALLBACK_MODELS;
+
+  // A <select> whose value matches no option silently shows the first option while state stays
+  // unchanged — so switching to an engine without a "" Default entry (e.g. cursor) would persist
+  // model: undefined and the header pill would fall back to the global default. Snap to the first
+  // valid model when the current one isn't offered by the selected engine.
+  useEffect(() => {
+    if (!engineInfo || !models.length) return;
+    if (!models.some(m => (m.value || '') === (config.model ?? ''))) {
+      setConfig((c) => ({ ...c, model: models[0].value || undefined }));
+    }
+  }, [engineInfo, models, config.model]);
+
+  // Group models by provider if the engine has multi-provider models
+  const hasProviders = models.some(m => m.provider);
+  const groupedModels = hasProviders
+    ? Array.from(
+        models.reduce((groups, m) => {
+          const key = m.provider || 'default';
+          if (!groups.has(key)) groups.set(key, []);
+          groups.get(key)!.push(m);
+          return groups;
+        }, new Map<string, EngineModel[]>())
+      )
+    : null;
+
+  const selectClass = 'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2';
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {trigger || (
+          <Button variant="ghost" size="icon" title="Agent Config">
+            <SlidersHorizontal className="w-4 h-4" />
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Agent Configuration</DialogTitle>
+        </DialogHeader>
+
+        <DialogBody className="space-y-4">
+          {sessionId && (
+            <p className="text-xs text-muted-foreground rounded-md bg-muted/50 px-3 py-2">
+              Engine, Model, Max Turns & Thinking apply to <strong>this conversation</strong>. Other settings are global defaults for new sessions.
+            </p>
+          )}
+          {multiEngine && (
+            <div>
+              <label className="text-sm font-medium mb-1.5 block">Engine</label>
+              <select
+                value={config.engine ?? ''}
+                onChange={(e) => {
+                  const engine = e.target.value || undefined;
+                  setConfig((c) => ({ ...c, engine, model: undefined }));
+                }}
+                className={selectClass}
+              >
+                {engines.map((e) => (
+                  <option key={e.name} value={e.name}>
+                    {e.name === 'claude-code' ? 'Claude Code (default)' : e.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+
+          <div>
+            <label className="text-sm font-medium mb-1.5 block">Model</label>
+            <select
+              value={config.model ?? ''}
+              onChange={(e) => setConfig((c) => ({ ...c, model: e.target.value || undefined }))}
+              className={selectClass}
+            >
+              {groupedModels ? (
+                groupedModels.map(([provider, providerModels]) => (
+                  <optgroup key={provider} label={provider.charAt(0).toUpperCase() + provider.slice(1)}>
+                    {providerModels.map((m) => (
+                      <option key={m.value} value={m.value}>{m.label}</option>
+                    ))}
+                  </optgroup>
+                ))
+              ) : (
+                models.map((m) => (
+                  <option key={m.value} value={m.value}>{m.label}</option>
+                ))
+              )}
+            </select>
+          </div>
+
+          {slots.settingsSections?.({ getToken, sessionId })}
+
+          <div>
+            <label className="text-sm font-medium mb-1.5 block">Permission Mode</label>
+            <select
+              value={config.permissionMode ?? 'acceptEdits'}
+              onChange={(e) => setConfig((c) => ({ ...c, permissionMode: e.target.value }))}
+              className={selectClass}
+            >
+              {PERMISSION_MODES.map((m) => (
+                <option key={m.value} value={m.value}>{m.label}</option>
+              ))}
+            </select>
+          </div>
+
+          <div>
+            <label className="text-sm font-medium mb-1.5 block">Max Turns</label>
+            <Input
+              type="number"
+              min={1}
+              max={200}
+              value={config.maxTurns ?? 50}
+              onChange={(e) => setConfig((c) => ({ ...c, maxTurns: Number(e.target.value) || 50 }))}
+            />
+          </div>
+
+          <div>
+            <label className="text-sm font-medium mb-1.5 block">Thinking</label>
+            <select
+              value={config.thinking ?? ''}
+              onChange={(e) => setConfig((c) => ({ ...c, thinking: (e.target.value || undefined) as AgentConfig['thinking'] }))}
+              className={selectClass}
+            >
+              <option value="">Default (off)</option>
+              <option value="adaptive">Adaptive (Claude decides)</option>
+              <option value="enabled">Enabled (always think)</option>
+              <option value="disabled">Disabled</option>
+            </select>
+          </div>
+
+          <div>
+            <label className="text-sm font-medium mb-1.5 block">Effort</label>
+            <select
+              value={config.effort ?? ''}
+              onChange={(e) => setConfig((c) => ({ ...c, effort: (e.target.value || undefined) as AgentConfig['effort'] }))}
+              className={selectClass}
+            >
+              <option value="">Default</option>
+              <option value="low">Low — fast</option>
+              <option value="medium">Medium</option>
+              <option value="high">High</option>
+              <option value="max">Max</option>
+            </select>
+          </div>
+
+          <div>
+            <label className="text-sm font-medium mb-1.5 block">Allowed Tools</label>
+            <Input
+              placeholder="Read, Edit, Bash, WebSearch, Glob, LS"
+              value={(config.allowedTools ?? []).join(', ')}
+              onChange={(e) => setConfig((c) => ({
+                ...c,
+                allowedTools: e.target.value.split(',').map((s) => s.trim()).filter(Boolean),
+              }))}
+            />
+            <p className="text-xs text-muted-foreground mt-1">Comma-separated list of tools Claude can use</p>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div>
+              <label className="text-sm font-medium">Skill Discovery</label>
+              <p className="text-xs text-muted-foreground">Index all skills + auto-inject on trigger match</p>
+            </div>
+            <button
+              type="button"
+              role="switch"
+              aria-checked={config.skillDiscovery !== false}
+              onClick={() => setConfig((c) => ({ ...c, skillDiscovery: c.skillDiscovery === false ? true : false }))}
+              className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors ${config.skillDiscovery !== false ? 'bg-primary' : 'bg-muted'}`}
+            >
+              <span className={`pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform ${config.skillDiscovery !== false ? 'translate-x-5' : 'translate-x-0'}`} />
+            </button>
+          </div>
+
+          <div>
+            <label className="text-sm font-medium mb-1.5 block">System Prompt (optional)</label>
+            <Textarea
+              placeholder="Additional instructions appended to Claude's system prompt…"
+              value={config.systemPrompt ?? ''}
+              onChange={(e) => setConfig((c) => ({ ...c, systemPrompt: e.target.value || undefined }))}
+              rows={4}
+            />
+          </div>
+        </DialogBody>
+
+        <DialogFooter>
+          <Button onClick={save} disabled={saving}>
+            {saving ? 'Saving…' : 'Save Configuration'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/client/components/ConversationHeader.tsx

@@ -0,0 +1,156 @@
+import { useState } from 'react';
+import { Copy, Check, Clock, GitFork, Layers } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { ConfigPanel } from '@/components/ConfigPanel';
+import type { AgentConfig } from '@/lib/workspaceContext';
+
+interface SessionDirectives {
+  model?: string;
+  turns?: number;
+  thinking?: string;
+  engine?: string;
+}
+
+function InfoBadges({
+  sessionId,
+  config,
+  sessionDirectives,
+  actualModel,
+  scheduleId,
+  onScheduleClick,
+}: {
+  sessionId?: string;
+  config: AgentConfig;
+  sessionDirectives?: SessionDirectives;
+  /** Model the engine actually resolved at runtime (session meta `lastModel`) — beats configured/requested. */
+  actualModel?: string;
+  scheduleId?: string;
+  onScheduleClick?: () => void;
+}) {
+  const [copied, setCopied] = useState(false);
+  const engine = sessionDirectives?.engine || config.engine || 'claude-code';
+  // The native Claude Code engine records a bare `claude-*` id; a multi-provider add-on engine records
+  // a `provider/model` id. Trust the recorded model only when its shape matches the current engine
+  // family, or a session that has since switched engines would show the previous engine's model.
+  const recordedByNative = actualModel ? !actualModel.includes('/') : undefined;
+  const engineIsNative = engine === 'claude-code' || engine === 'cursor';
+  const trustedActual = recordedByNative !== undefined && recordedByNative === engineIsNative ? actualModel : undefined;
+  const rawModel =
+    trustedActual || sessionDirectives?.model || config.model || (engine === 'cursor' ? 'cursor/composer-2.5' : 'sonnet-4-6');
+  // A multi-provider add-on engine runs any provider's model through its own loop, so it must be
+  // distinguishable from a native runtime running the same model. Prefix such a model with the engine
+  // name; native engines (claude-code, cursor) show the model plainly. Engine name comes from data.
+  const model = !engineIsNative ? `${engine} · ${rawModel.replace('claude-', '')}` : rawModel.replace('claude-', '');
+  const perms = config.permissionMode || 'acceptEdits';
+  const permLabel =
+    perms === 'bypassPermissions' ? 'bypass' : perms === 'plan' ? 'plan' : perms === 'default' ? 'prompt' : 'edits';
+  const thinking = (sessionDirectives?.thinking || config.thinking) as string | undefined;
+
+  const copySessionId = () => {
+    if (!sessionId) return;
+    navigator.clipboard.writeText(sessionId);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+
+  return (
+    <div className="flex items-center gap-1.5 flex-wrap">
+      <span className="inline-flex items-center rounded-md bg-blue-50 px-1.5 py-0.5 text-[10px] font-medium text-blue-700 ring-1 ring-inset ring-blue-600/20 dark:bg-blue-950/50 dark:text-blue-300 dark:ring-blue-400/30">
+        {model}
+      </span>
+      <span className="inline-flex items-center rounded-md bg-amber-50 px-1.5 py-0.5 text-[10px] font-medium text-amber-700 ring-1 ring-inset ring-amber-600/20 dark:bg-amber-950/50 dark:text-amber-300 dark:ring-amber-400/30">
+        {permLabel}
+      </span>
+      <span className="inline-flex items-center rounded-md bg-green-50 px-1.5 py-0.5 text-[10px] font-medium text-green-700 ring-1 ring-inset ring-green-600/20 dark:bg-green-950/50 dark:text-green-300 dark:ring-green-400/30">
+        {sessionDirectives?.turns ?? config.maxTurns ?? 50} steps
+      </span>
+      {thinking && thinking !== 'disabled' && (
+        <span className="inline-flex items-center rounded-md bg-violet-50 px-1.5 py-0.5 text-[10px] font-medium text-violet-700 ring-1 ring-inset ring-violet-600/20 dark:bg-violet-950/50 dark:text-violet-300 dark:ring-violet-400/30">
+          think
+        </span>
+      )}
+      {sessionId && (
+        <button
+          onClick={copySessionId}
+          className="inline-flex items-center gap-0.5 rounded-md bg-muted px-1.5 py-0.5 text-[10px] font-mono text-muted-foreground ring-1 ring-inset ring-border hover:bg-accent transition-colors"
+          title={`Session: ${sessionId}\nClick to copy`}
+        >
+          {sessionId.slice(0, 8)}
+          {copied ? <Check className="w-2.5 h-2.5" /> : <Copy className="w-2.5 h-2.5" />}
+        </button>
+      )}
+      {scheduleId && (
+        <button
+          onClick={onScheduleClick}
+          className="inline-flex items-center gap-0.5 rounded-md bg-purple-50 px-1.5 py-0.5 text-[10px] font-mono text-purple-700 ring-1 ring-inset ring-purple-600/20 dark:bg-purple-950/50 dark:text-purple-300 dark:ring-purple-400/30 hover:bg-purple-100 dark:hover:bg-purple-950/70 transition-colors"
+          title="Open schedule details"
+        >
+          <Clock className="w-2.5 h-2.5" />
+          {scheduleId.slice(0, 8)}
+        </button>
+      )}
+    </div>
+  );
+}
+
+export interface ConversationHeaderProps {
+  sessionId?: string;
+  agentConfig: AgentConfig;
+  sessionDirectives?: SessionDirectives;
+  sessionLastModel?: string;
+  sessionScheduleId?: string;
+  artifactCount: number;
+  getToken: () => Promise<string | null>;
+  onConfigSaved: (c: AgentConfig) => void;
+  onDirectivesSaved: (d: SessionDirectives | undefined) => void;
+  onFork: () => void;
+  onToggleArtifacts: () => void;
+  onScheduleClick: () => void;
+}
+
+/** Per-conversation control strip (badges, fork, config, artifacts) rendered at the top of each pane. */
+export function ConversationHeader({
+  sessionId,
+  agentConfig,
+  sessionDirectives,
+  sessionLastModel,
+  sessionScheduleId,
+  artifactCount,
+  getToken,
+  onConfigSaved,
+  onDirectivesSaved,
+  onFork,
+  onToggleArtifacts,
+  onScheduleClick,
+}: ConversationHeaderProps) {
+  return (
+    <div className="flex items-center gap-1.5 px-2 sm:px-3 py-1.5 border-b bg-background/60 overflow-x-auto">
+      <InfoBadges
+        sessionId={sessionId}
+        config={agentConfig}
+        sessionDirectives={sessionDirectives}
+        actualModel={sessionLastModel}
+        scheduleId={sessionScheduleId}
+        onScheduleClick={onScheduleClick}
+      />
+      <div className="flex-1" />
+      {sessionId && (
+        <Button variant="ghost" size="icon" className="h-7 w-7 shrink-0" onClick={onFork} title="Fork conversation">
+          <GitFork className="w-3.5 h-3.5" />
+        </Button>
+      )}
+      <ConfigPanel
+        getToken={getToken}
+        onSaved={onConfigSaved}
+        sessionId={sessionId}
+        sessionDirectives={sessionDirectives}
+        onDirectivesSaved={onDirectivesSaved}
+      />
+      {artifactCount > 0 && (
+        <Button variant="ghost" size="icon" className="h-7 w-7 shrink-0" onClick={onToggleArtifacts} title="Toggle artifacts panel">
+          <Layers className="w-3.5 h-3.5" />
+        </Button>
+      )}
+    </div>
+  );
+}