ompchamber 0.3.0

package/src/client/components/workspace/chat-timeline/chat-input/Toolbar.tsx

@@ -0,0 +1,108 @@
+import { Send, Square } from 'lucide-preact';
+import type { AIModelOption } from '@/shared/types';
+import { ModelDropdown } from '@/client/components/workspace/model-dropdown/index';
+import { ThinkingLevelDropdown } from '@/client/components/workspace/chat-timeline/chat-input/ThinkingLevelDropdown';
+import { AccessDropdown } from '@/client/components/workspace/chat-timeline/chat-input/AccessDropdown';
+import type { ApprovalMode } from '@/shared/lib/omp/config/access-mode';
+
+export interface ComposerToolbarProps {
+  isMobile: boolean;
+  /** Null until `/api/models` resolves — the dropdown renders its own placeholder. */
+  selectedModel: AIModelOption | null;
+  onSelectModel: (model: AIModelOption) => void;
+  thinkingLevels: string[];
+  currentThinking: string;
+  onSelectThinking: (level: string) => void;
+  /** Thinking pill inside the model dropdown; mirrors onSelectThinking so both
+   *  entry points reach the live session. */
+  onThinkingLevelChange?: (level: string) => void;
+  isGenerating: boolean;
+  onStop?: () => void;
+  onSend: () => void;
+  /** Send is blocked while no workspace context is selected or nothing is typed. */
+  sendDisabled: boolean;
+  accessMode: ApprovalMode;
+  onSelectAccess: (mode: ApprovalMode) => void;
+}
+
+/**
+ * Bottom config row of the composer: model + thinking + access selectors on the
+ * left, Stop/Send on the right.
+ *
+ * Stop never displaces Send on mobile: a touch keyboard has no Enter-to-send
+ * (see ComposerTextarea `variant`), so hiding Send mid-run would leave no way to
+ * submit a follow-up — queued or steering.
+ */
+export function ComposerToolbar({
+  isMobile,
+  selectedModel,
+  onSelectModel,
+  thinkingLevels,
+  currentThinking,
+  onSelectThinking,
+  onThinkingLevelChange,
+  isGenerating,
+  onStop,
+  onSend,
+  sendDisabled,
+  accessMode,
+  onSelectAccess,
+}: ComposerToolbarProps) {
+  const showStop = isGenerating && (isMobile ? Boolean(onStop) : true);
+
+  return (
+    <div className={`flex items-center justify-between border-t border-ink/5 bg-canvas/50 rounded-b-md ${isMobile ? 'px-2 py-2' : 'px-3 py-2'}`}>
+      <div className={`flex items-center min-w-0 ${isMobile ? 'space-x-1' : 'space-x-2'}`}>
+        <ModelDropdown
+          selectedModel={selectedModel ?? undefined}
+          onSelectModel={onSelectModel}
+          onThinkingLevelChange={onThinkingLevelChange}
+          className={isMobile ? 'min-w-0 max-w-[58%]' : undefined}
+        />
+
+        <div className="w-[1px] h-3 bg-ink/10" />
+
+        <ThinkingLevelDropdown
+          thinkingLevels={thinkingLevels}
+          currentThinking={currentThinking}
+          onSelect={onSelectThinking}
+        />
+
+        <div className="w-[1px] h-3 bg-ink/10" />
+
+        <AccessDropdown value={accessMode} onSelect={onSelectAccess} />
+      </div>
+
+      <div className="flex items-center gap-1.5 flex-shrink-0">
+        {showStop && (
+          <button
+            type="button"
+            onClick={onStop}
+            className={`flex items-center justify-center rounded transition-colors cursor-pointer shadow-xs animate-in zoom-in-90 duration-150 flex-shrink-0 ${
+              isMobile
+                ? 'w-10 h-10 rounded-lg border border-ink/25 text-ink hover:bg-error hover:text-canvas hover:border-error'
+                : 'w-7 h-7 bg-ink text-canvas hover:bg-error hover:text-canvas'
+            }`}
+            title="Stop generation"
+          >
+            <Square size={isMobile ? 14 : 10} className="fill-current" />
+          </button>
+        )}
+
+        {(!isGenerating || isMobile) && (
+          <button
+            type="button"
+            onClick={onSend}
+            disabled={sendDisabled}
+            className={`flex items-center justify-center rounded bg-ink text-canvas hover:bg-ink/80 transition-colors disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer flex-shrink-0 ${
+              isMobile ? 'w-10 h-10 rounded-lg' : 'w-7 h-7'
+            }`}
+            title={isGenerating ? 'Queue follow-up message' : 'Send message'}
+          >
+            <Send size={isMobile ? 16 : 12} className="ml-px" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/chat-input/access-levels.ts

@@ -0,0 +1,14 @@
+import type { ApprovalMode } from '@/shared/lib/omp/config/access-mode';
+
+/** Composer labels for omp's tool-approval modes (see ApprovalMode). */
+export const ACCESS_LEVEL_LABELS: Record<ApprovalMode, string> = {
+  'always-ask': 'Always ask',
+  write: 'Minimal',
+  yolo: 'Full bypass',
+};
+
+export const ACCESS_LEVEL_DESCRIPTIONS: Record<ApprovalMode, string> = {
+  'always-ask': 'Read-only tools run automatically; writes and shell commands ask first.',
+  write: 'Reads and edits run automatically; shell commands ask first.',
+  yolo: 'Everything runs without asking.',
+};

package/src/client/components/workspace/chat-timeline/chat-input/index.tsx

@@ -0,0 +1,341 @@
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import type { ClipboardEvent, SetStateAction } from 'preact/compat';
+import type { AIModelOption, Attachment, ModelEntry } from '@/shared/types';
+import type { ApprovalMode } from '@/shared/lib/omp/config/access-mode';
+import { ComposerToolbar } from '@/client/components/workspace/chat-timeline/chat-input/Toolbar';
+import { ComposerTextarea } from '@/client/components/common/ComposerTextarea';
+import { AttachmentToolbar } from '@/client/components/workspace/chat-timeline/chat-input/AttachmentToolbar';
+import { selectableThinkingLevels } from '@/shared/lib/models/thinking-levels';
+import { fetchModelsData, subscribeModelsUpdated } from '@/shared/lib/models/client';
+
+export function ChatInput({ 
+  value, 
+  onChange, 
+  onSend, 
+  isGenerating,
+  onStop,
+  className = '',
+  disabled = false,
+  appSettings = {},
+  attachments: externalAttachments,
+  onAttachmentsChange,
+  onThinkingLevelChange,
+  onModelChange,
+  sessionModel,
+  sessionThinkingLevel,
+  rootPath,
+  variant = 'desktop',
+  accessMode,
+  onAccessModeChange,
+  /** Written on every model/thinking pick so the send path can snapshot the
+   *  selection into queued items without lifting ChatInput state. */
+  composerModelRef,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  onSend: (attachments: Attachment[], options?: { steering?: boolean }) => void;
+  isGenerating: boolean;
+  onStop?: () => void;
+  className?: string;
+  disabled?: boolean;
+  appSettings?: Record<string, any>;
+  attachments?: Attachment[];
+  onAttachmentsChange?: (attachments: SetStateAction<Attachment[]>) => void;
+  onThinkingLevelChange?: (level: string) => void;
+  onModelChange?: (provider: string, modelId: string) => void;
+  /** Model last used by the active session (omp `model_change` entry). */
+  sessionModel?: { provider: string; modelId: string } | null;
+  /** Thinking level last used by the active session (omp `thinking_level_change` entry). */
+  sessionThinkingLevel?: string | null;
+  rootPath?: string | null;
+  accessMode: ApprovalMode;
+  onAccessModeChange: (mode: ApprovalMode) => void;
+  /**
+   * `mobile` sizes the composer for a phone: 16px text (iOS Safari zooms the
+   * viewport when focusing an input below that), thumb-sized send/stop
+   * targets, and Enter-to-newline instead of Enter-to-send.
+   */
+  variant?: 'desktop' | 'mobile';
+  composerModelRef: { current: { provider: string; modelId: string; thinkingLevel: string } | null };
+}) {
+  const [internalAttachments, setInternalAttachments] = useState<Attachment[]>([]);
+
+  const attachments = externalAttachments !== undefined ? externalAttachments : internalAttachments;
+  const setAttachments = (updater: SetStateAction<Attachment[]>) => {
+    if (onAttachmentsChange) {
+      // Forward the updater untouched: onAttachmentsChange is a state setter,
+      // so functional updates stay functional. Evaluating them here against
+      // the closure `attachments` would resurrect stale state (e.g. the async
+      // FileReader callback wiping the just-added image).
+      onAttachmentsChange(updater);
+    } else {
+      setInternalAttachments(updater);
+    }
+  };
+
+  // Selected Model State — starts null and is filled from `/api/models` (session
+  // pick → persisted pick → registry default). Seeding a demo catalog entry here
+  // showed a fabricated provider in the composer before the real list arrived.
+  const [selectedModel, setSelectedModel] = useState<AIModelOption | null>(null);
+  const [currentThinking, setCurrentThinking] = useState('auto');
+  // Live mirror for the send path's queue snapshot (see composerModelRef).
+  useEffect(() => {
+    if (!selectedModel?.id) return;
+    composerModelRef.current = {
+      provider: selectedModel.provider,
+      modelId: selectedModel.id,
+      thinkingLevel: selectedModel.thinkingLevel ?? 'auto',
+    };
+  }, [selectedModel?.provider, selectedModel?.id, selectedModel?.thinkingLevel, composerModelRef]);
+  // Mirrors sessionThinkingLevel for the async model-sync effects below,
+  // which may resolve after the session-level effect and must not erase it.
+  const sessionThinkingLevelRef = useRef<string | null>(null);
+  sessionThinkingLevelRef.current = sessionThinkingLevel ?? null;
+  // Mirrors sessionModel for the async model-sync effect below, which resolves
+  // after the session-adoption effect and must not clobber it.
+  const sessionModelRef = useRef<{ provider: string; modelId: string } | null>(sessionModel ?? null);
+  sessionModelRef.current = sessionModel ?? null;
+
+  // Preserve the session's last-used thinking level when applying a model
+  // picked from the catalog: the session level is authoritative and an async
+  // fetch resolving later must not reset it to the ladder default.
+  const resolveSessionLevel = (ladder: readonly string[] | undefined, fallback: string): string => {
+    const sessionLevel = sessionThinkingLevelRef.current;
+    if (!sessionLevel) return fallback;
+    const selectable = selectableThinkingLevels(ladder ?? []);
+    return selectable.length === 0 || selectable.includes(sessionLevel) ? sessionLevel : fallback;
+  };
+
+  // Adopt the active session's last-used model as the selected model. The
+  // thinking level must fall back to the CURRENT one, never the ladder
+  // default: this effect re-runs right after a spawn (sessionModel changes
+  // while the session's own thinking_level_change entry is not written yet),
+  // and an `off` fallback here is the "thinking resets to off on send" bug.
+  useEffect(() => {
+    if (!sessionModel?.provider || !sessionModel.modelId) return;
+    let active = true;
+    fetchModelsData()
+      .then((data) => {
+        if (!active || !sessionModel) return;
+        const match = (data.modelList || []).find(
+          (m) => m.id === sessionModel.modelId && m.provider === sessionModel.provider
+        );
+        if (match) {
+          setSelectedModel(prev => ({
+            id: match.id,
+            name: match.name,
+            provider: match.provider,
+            contextWindow: match.contextWindow,
+            thinkingLevels: match.thinkingLevels,
+            thinkingLevel: resolveSessionLevel(match.thinkingLevels, prev?.thinkingLevel ?? match.thinkingLevels?.[0] ?? 'off'),
+          }));
+        }
+      })
+      .catch(() => {});
+    return () => {
+      active = false;
+    };
+  }, [sessionModel?.provider, sessionModel?.modelId]);
+
+  // Adopt the active session's last-used thinking level. Runs after the model
+  // sync effect above so it overrides the catalog default for this session.
+  useEffect(() => {
+    if (!sessionThinkingLevel) return;
+    setSelectedModel(prev => {
+      if (!prev) return prev;
+      const selectable = selectableThinkingLevels(prev.thinkingLevels ?? []);
+      // The session level is authoritative (omp recorded it for this model).
+      // Only reject it when the ladder is KNOWN and explicitly excludes it;
+      // an empty ladder (catalog not resolved / model exposes none) must not
+      // fall back to 'off' and erase the session's actual level.
+      const level = selectable.length === 0 || selectable.includes(sessionThinkingLevel)
+        ? sessionThinkingLevel
+        : prev.thinkingLevel;
+      return level === prev.thinkingLevel ? prev : { ...prev, thinkingLevel: level };
+    });
+  }, [sessionThinkingLevel]);
+
+  // Sync selected model from server and event listener
+  useEffect(() => {
+    let active = true;
+    const syncModel = async () => {
+      try {
+        const data = await fetchModelsData();
+        if (!active) return;
+        if (Array.isArray(data.modelList) && data.modelList.length > 0) {
+          // 1. The active session's last-used model is authoritative; even when
+          // it is missing from the catalog, never replace it with the default.
+          const sm = sessionModelRef.current;
+          if (sm?.provider && sm.modelId) {
+            const match = data.modelList.find((m: ModelEntry) => m.id === sm.modelId && m.provider === sm.provider);
+            if (match) {
+              setSelectedModel(prev => ({
+                id: match.id,
+                name: match.name,
+                provider: match.provider,
+                thinkingLevels: match.thinkingLevels,
+                thinkingLevel: resolveSessionLevel(match.thinkingLevels, prev?.thinkingLevel ?? match.thinkingLevels?.[0] ?? 'off'),
+              }));
+            }
+            return;
+          }
+          // 2. The user's persisted pick (survives new sessions).
+          const persisted = data.selectedModel;
+          if (persisted?.provider && persisted.id) {
+            const match = data.modelList.find((m: ModelEntry) => m.id === persisted.id && m.provider === persisted.provider);
+            if (match) {
+              setSelectedModel(prev => ({
+                id: match.id,
+                name: match.name,
+                provider: match.provider,
+                thinkingLevels: match.thinkingLevels,
+                thinkingLevel: resolveSessionLevel(match.thinkingLevels, prev?.thinkingLevel ?? match.thinkingLevels?.[0] ?? 'off'),
+              }));
+              return;
+            }
+          }
+          // 3. Registry default.
+          const defaultModel = data.defaultModel;
+          if (defaultModel) {
+            const match = data.modelList.find((m: ModelEntry) => m.id === defaultModel.modelId && m.provider === defaultModel.provider);
+            if (match) {
+              setSelectedModel(prev => ({
+                id: match.id,
+                name: match.name,
+                provider: match.provider,
+                thinkingLevels: match.thinkingLevels,
+                thinkingLevel: resolveSessionLevel(match.thinkingLevels, prev?.thinkingLevel ?? match.thinkingLevels?.[0] ?? 'off'),
+              }));
+            }
+          }
+        } else if (data.selectedModel) {
+          const selected = data.selectedModel;
+          setSelectedModel(prev => ({
+            ...selected,
+            thinkingLevel: resolveSessionLevel(selected.thinkingLevels, prev?.thinkingLevel ?? selected.thinkingLevel ?? 'off'),
+          }));
+        }
+      } catch {}
+    };
+
+    syncModel();
+    const unsubscribe = subscribeModelsUpdated(syncModel);
+    return () => {
+      active = false;
+      unsubscribe();
+    };
+  }, []);
+
+  // Thinking Dropdown State - Reactive with selectedModel
+  const thinkingLevels = useMemo(() => {
+    return selectableThinkingLevels(selectedModel?.thinkingLevels);
+  }, [selectedModel]);
+
+  const handleSelectThinking = (level: string) => {
+    setCurrentThinking(level);
+    setSelectedModel(prev => (prev ? { ...prev, thinkingLevel: level } : prev));
+    onThinkingLevelChange?.(level);
+  };
+
+  // Re-sync the thinking dropdown label when the model dropdown's thinking
+  // pill cycles the level (it updates `selectedModel.thinkingLevel`).
+  useEffect(() => {
+    if (selectedModel?.thinkingLevel) {
+      setCurrentThinking(selectedModel.thinkingLevel);
+    }
+  }, [selectedModel?.thinkingLevel]);
+
+  const handlePaste = (e: ClipboardEvent<HTMLTextAreaElement>) => {
+    const clipboard = e.clipboardData;
+    if (!clipboard) return;
+    if (clipboard.files.length > 0) {
+      e.preventDefault();
+      const files = Array.from(clipboard.files);
+      addFiles(files);
+    }
+  };
+
+  const addFiles = (files: File[]) => {
+    const newAttachments = files.map(file => ({
+      id: Math.random().toString(36).substring(7),
+      file,
+      preview: file.type.startsWith('image/') ? URL.createObjectURL(file) : ''
+    }));
+    setAttachments(prev => [...prev, ...newAttachments]);
+    // Read image payloads as base64 so the omp model can receive them.
+    for (const att of newAttachments) {
+      if (!att.file.type.startsWith('image/')) continue;
+      const reader = new FileReader();
+      reader.onload = () => {
+        const result = reader.result as string;
+        const base64 = result.split(',')[1];
+        if (!base64) return;
+        setAttachments(prev => prev.map(a => (a.id === att.id ? { ...a, dataBase64: base64 } : a)));
+      };
+      reader.readAsDataURL(att.file);
+    }
+  };
+
+  const removeAttachment = (id: string) => {
+    setAttachments(prev => {
+      const att = prev.find(p => p.id === id);
+      if (att && att.preview) URL.revokeObjectURL(att.preview);
+      return prev.filter(p => p.id !== id);
+    });
+  };
+
+  const handleSendClick = (options?: { steering?: boolean }) => {
+    if (!value.trim() && attachments.length === 0) return;
+    onSend(attachments, options);
+    setAttachments([]);
+  };
+
+  const isMobile = variant === 'mobile';
+
+  return (
+    <div className={`relative border border-ink/20 rounded-md bg-paper focus-within:border-ink transition-colors flex flex-col shadow-sm ${className}`}>
+      
+      <AttachmentToolbar
+        attachments={attachments}
+        onFilesSelected={addFiles}
+        onRemove={removeAttachment}
+      />
+
+      {/* Textarea */}
+      <ComposerTextarea
+        value={value}
+        onChange={onChange}
+        onSend={handleSendClick}
+        disabled={disabled}
+        appSettings={appSettings}
+        rootPath={rootPath}
+        placeholder={disabled ? "Please select a workspace above to start prompting..." : "@ for files/agents; / for commands and skills; ! for shell; # for snippets (Paste images/files here)"}
+        className={`w-full bg-transparent border-none focus:outline-none resize-none text-ink placeholder-ink/40 disabled:opacity-50 disabled:cursor-not-allowed ${
+          isMobile ? 'px-3 py-3 text-base min-h-[68px] max-h-40' : 'px-3 py-3 text-sm min-h-[80px]'
+        }`}
+        onPaste={handlePaste}
+        variant={variant}
+      />
+
+      {/* Bottom Config Toolbar */}
+      <ComposerToolbar
+        isMobile={isMobile}
+        selectedModel={selectedModel}
+        onSelectModel={(model) => {
+          setSelectedModel(model);
+          onModelChange?.(model.provider, model.id);
+        }}
+        thinkingLevels={thinkingLevels}
+        currentThinking={currentThinking}
+        onSelectThinking={handleSelectThinking}
+        onThinkingLevelChange={onThinkingLevelChange}
+        isGenerating={isGenerating}
+        onStop={onStop}
+        onSend={() => handleSendClick()}
+        sendDisabled={disabled || (!value.trim() && attachments.length === 0)}
+        accessMode={accessMode}
+        onSelectAccess={onAccessModeChange}
+      />
+    </div>
+  );
+}