ompchamber 0.3.0

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

@@ -0,0 +1,290 @@
+import { useCallback, useMemo, useState } from 'preact/hooks';
+import { useSearchParams } from '@/client/lib/router/search-params';
+import { AskDialog } from '@/client/components/workspace/chat-timeline/tool-renderers/ask-dialog/Lazy';
+import { EmptyWorkspacePrompt } from '@/client/components/workspace/chat-timeline/EmptyWorkspacePrompt';
+import { SessionSkeleton } from '@/client/components/workspace/chat-timeline/SessionSkeleton';
+import { UndoConfirmModal } from '@/client/components/workspace/chat-timeline/UndoConfirmModal';
+import { NewChatModal } from '@/client/components/workspace/chat-timeline/NewChatModal';
+import { SubagentView } from '@/client/components/workspace/chat-timeline/SubagentView';
+import { TimelineBody } from '@/client/components/workspace/chat-timeline/TimelineBody';
+import { ComposerDock } from '@/client/components/workspace/chat-timeline/ComposerDock';
+import { useChatTimeline } from '@/client/hooks/chat/timeline';
+import { useSessionTitle } from '@/client/hooks/chat/timeline/session-title';
+import { useSubagentView } from '@/client/hooks/chat/timeline/subagent-view';
+import { useUndoConfirmation } from '@/client/hooks/chat/timeline/undo-confirmation';
+import { useModelNames } from '@/client/hooks/models/use-model-names';
+import { useProviderNames } from '@/client/hooks/models/use-provider-names';
+import { useToasts } from '@/client/hooks/ui/toasts';
+import { ToastStack } from '@/client/components/common/ToastStack';
+import { normalizeNoticePositions } from '@/shared/lib/chat/order';
+import { composerRootFor } from '@/shared/lib/workspace/active-project';
+import { useSidebarData } from '@/client/hooks/chat/omp/session-list';
+
+interface ChatTimelineProps {
+  className?: string;
+  appSettings?: Record<string, any>;
+  onSessionTitle?: (title: string | null) => void;
+  /**
+   * `mobile` tightens the outer padding, drops the minimap rail (no room on a
+   * phone) and hands the composer a touch-sized layout. Everything else — the
+   * omp agent bridge, queue, steering, subagents, ask dialogs — is identical.
+   */
+  variant?: 'desktop' | 'mobile';
+}
+
+export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle, variant = 'desktop' }: ChatTimelineProps) {
+  const { folders } = useSidebarData();
+  const isMobile = variant === 'mobile';
+  const {
+    sessionId,
+    selectedFolderId,
+    setSelectedFolderId,
+    sessionData,
+    localMessages,
+    isGenerating,
+    hasMore,
+    loadingOlder, loadOlderError, sessionLoading,
+    loadOlder,
+    generatingVerb,
+    messageQueue,
+    setMessageQueue,
+    steeringQueue,
+    setSteeringQueue,
+    inputValue,
+    setInputValue,
+    inputAttachments,
+    setInputAttachments,
+    scrollRef,
+    contentRef,
+    showScrollBottom,
+    isScrolling,
+    handleScroll,
+    jumpToBottom,
+    handleSend,
+    handleEditQueueItem,
+    handleSendNowQueueItem,
+    handleUndo,
+    handleRetry,
+    submitNewChat,
+    stopGenerating,
+    handleThinkingLevelChange,
+    handleModelChange,
+    accessMode,
+    handleAccessModeChange,
+    composerModelRef,
+    extensionDialog,
+    closeExtensionDialog,
+    respondToExtensionUi,
+  } = useChatTimeline({ folders, appSettings });
+  const { toasts, pushToast, dismissToast } = useToasts();
+
+  const [newChatInitialContent, setNewChatInitialContent] = useState<string | null>(null);
+  const { pendingUndo, undoing, requestUndo: handleRequestUndo, closeUndoConfirm, confirmUndo } = useUndoConfirmation(handleUndo);
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  // Stop-all semantics: the run stops AND the queued follow-ups stay in the
+  // panel (the auto-process holds off). Surface what just happened and how to
+  // proceed — the toast action delivers the head item immediately.
+  const handleStop = useCallback(() => {
+    const heldCount = stopGenerating();
+    if (heldCount === 0) return;
+    pushToast(
+      `Stopped. ${heldCount} message${heldCount > 1 ? 's' : ''} still queued — nothing was sent.`,
+      'success',
+      {
+        action: { label: 'Send now', onClick: () => {
+          const first = messageQueue[0];
+          if (first) void handleSendNowQueueItem(first);
+        } },
+        duration: 8000,
+      },
+    );
+  }, [stopGenerating, pushToast, messageQueue, handleSendNowQueueItem]);
+  const { activeSubagent, back: handleSubagentBack } = useSubagentView(
+    sessionId,
+    searchParams.get('subagent'),
+    setSearchParams,
+  );
+
+  useSessionTitle(sessionId, sessionData?.title, onSessionTitle);
+
+  const handleScrollTo = useCallback((id: string) => {
+    const el = document.getElementById(id);
+    if (el) {
+      el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  }, []);
+
+  const handleNewChat = useCallback((content: string) => setNewChatInitialContent(content), []);
+
+  const modelNames = useModelNames();
+  const providerNames = useProviderNames();
+  const userMessages = useMemo(() => localMessages.filter(m => m.role === 'user'), [localMessages]);
+  const sessionProvider = typeof sessionData?.model === 'object' ? sessionData.model.provider : undefined;
+  const sessionModelName = typeof sessionData?.model === 'object'
+    ? (modelNames[sessionData.model.modelId] ?? sessionData.model.modelId)
+    : sessionData?.model;
+
+  const orderedMessages = useMemo(() => normalizeNoticePositions(localMessages), [localMessages]);
+
+  // A pending "new-…" session has no messages yet, so the workspace picker
+  // must stay available until the first chat is sent (which spawns the real
+  // omp session). Never lock the user into a folder before sending.
+  const isPendingSession = Boolean(sessionId?.startsWith('new-'));
+  const composerRoot = composerRootFor(folders, sessionId, selectedFolderId);
+
+  // Full-panel skeleton while a session's committed history is still loading:
+  // covers the whole chat timeline (body + composer) so a session switch shows
+  // one coherent placeholder instead of a half-drawn view. Skipped while an
+  // optimistic send owns the tail (fresh spawn adoption must keep its bubbles).
+  const showFullSkeleton = !isPendingSession && sessionLoading && orderedMessages.length === 0;
+
+  if (!sessionId || isPendingSession) {
+    return (
+      <EmptyWorkspacePrompt
+        className={className}
+        folders={folders}
+        selectedFolderId={selectedFolderId}
+        setSelectedFolderId={setSelectedFolderId}
+        rootPath={composerRoot}
+        inputValue={inputValue}
+        setInputValue={setInputValue}
+        inputAttachments={inputAttachments}
+        setInputAttachments={setInputAttachments}
+        onSend={handleSend}
+        isGenerating={isGenerating}
+        appSettings={appSettings}
+        localMessages={localMessages}
+        provider={sessionProvider}
+        providerNames={providerNames}
+        modelName={sessionModelName}
+        modelNames={modelNames}
+        onThinkingLevelChange={handleThinkingLevelChange}
+        onModelChange={handleModelChange}
+        accessMode={accessMode}
+        onAccessModeChange={handleAccessModeChange}
+        composerModelRef={composerModelRef}
+        sessionModel={typeof sessionData?.model === 'object' ? sessionData.model : null}
+        sessionThinkingLevel={sessionData?.thinkingLevel}
+        generatingVerb={generatingVerb}
+        variant={variant}
+      />
+    );
+  }
+
+  return (
+    <div className={`flex flex-col h-full min-h-0 overflow-hidden bg-canvas relative ${className}`}>
+      {showFullSkeleton ? (
+        <SessionSkeleton />
+      ) : (
+        <>
+          {/* Main chat container wrapper */}
+          <div className="relative flex-1 min-h-0 flex flex-col">
+            {activeSubagent ? (
+              <SubagentView
+                sessionId={sessionId}
+                subagent={activeSubagent}
+                onBack={handleSubagentBack}
+                provider={sessionProvider}
+                providerNames={providerNames}
+              />
+            ) : (
+              <TimelineBody
+                isMobile={isMobile}
+                userMessages={userMessages}
+                onScrollTo={handleScrollTo}
+                scrollRef={scrollRef}
+                contentRef={contentRef}
+                handleScroll={handleScroll}
+                isScrolling={isScrolling}
+                loadingOlder={loadingOlder}
+                hasMore={hasMore}
+                loadOlderError={loadOlderError}
+                loadOlder={loadOlder}
+                messages={orderedMessages}
+                isGenerating={isGenerating}
+                provider={sessionProvider}
+                providerNames={providerNames}
+                modelName={sessionModelName}
+                modelNames={modelNames}
+                thinkingLevel={sessionData?.thinkingLevel}
+                onUndo={handleRequestUndo}
+                onRetry={handleRetry}
+                onNewChat={handleNewChat}
+                showScrollBottom={showScrollBottom}
+                jumpToBottom={jumpToBottom}
+              />
+            )}
+          </div>
+
+          {/* Input Area Footer with Docked Generating Indicator (Seamless & Transparent) */}
+          {!activeSubagent && (
+            <ComposerDock
+              isMobile={isMobile}
+              isGenerating={isGenerating}
+              modelName={sessionModelName}
+              generatingVerb={generatingVerb}
+              provider={sessionProvider}
+              providerNames={providerNames}
+              messageQueue={messageQueue}
+              setMessageQueue={setMessageQueue}
+              onEditQueueItem={handleEditQueueItem}
+              onSendNowQueueItem={handleSendNowQueueItem}
+              steeringQueue={steeringQueue}
+              setSteeringQueue={setSteeringQueue}
+              inputValue={inputValue}
+              setInputValue={setInputValue}
+              rootPath={composerRoot}
+              attachments={inputAttachments}
+              setAttachments={setInputAttachments}
+              onSend={handleSend}
+              onStop={handleStop}
+              appSettings={appSettings}
+              onThinkingLevelChange={handleThinkingLevelChange}
+              onModelChange={handleModelChange}
+              accessMode={accessMode}
+              onAccessModeChange={handleAccessModeChange}
+              composerModelRef={composerModelRef}
+              sessionModel={typeof sessionData?.model === 'object' ? sessionData.model : null}
+              sessionThinkingLevel={sessionData?.thinkingLevel}
+              variant={variant}
+            />
+          )}
+        </>
+      )}
+
+      {pendingUndo && (
+        <UndoConfirmModal
+          isOmpSession={Boolean(sessionId) && !sessionId.startsWith('new-') && Number.isNaN(Number(sessionId))}
+          content={pendingUndo.content}
+          undoing={undoing}
+          onClose={closeUndoConfirm}
+          onConfirm={confirmUndo}
+        />
+      )}
+      {newChatInitialContent !== null && (
+        <NewChatModal
+          initialContent={newChatInitialContent}
+          onClose={() => setNewChatInitialContent(null)}
+          onSend={submitNewChat}
+          appSettings={appSettings}
+          accessMode={accessMode}
+          onAccessModeChange={handleAccessModeChange}
+          composerModelRef={composerModelRef}
+        />
+      )}
+
+      {extensionDialog && (
+        <AskDialog
+          request={extensionDialog}
+          onRespond={(request, response) => {
+            void respondToExtensionUi(request, response);
+            closeExtensionDialog();
+          }}
+        />
+      )}
+
+      <ToastStack toasts={toasts} onDismiss={dismissToast} />
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/tool-renderers/ask-dialog/Footer.tsx

@@ -0,0 +1,97 @@
+import { CornerDownLeft, X } from 'lucide-preact';
+
+interface AskDialogFooterProps {
+  method: string;
+  optionsLength: number;
+  selectedOption: string | null;
+  hasCustomAnswer?: boolean;
+  onCancel: () => void;
+  onSubmit: () => void;
+}
+
+export function AskDialogFooter({
+  method,
+  optionsLength,
+  selectedOption,
+  hasCustomAnswer = false,
+  onCancel,
+  onSubmit,
+}: AskDialogFooterProps) {
+  const isSelectDisabled = method === 'select' && !selectedOption && !hasCustomAnswer;
+
+  return (
+    <div className="flex flex-wrap items-center justify-between gap-3 border-t border-ink/8 bg-canvas/40 px-5 py-3.5">
+      {/* Keyboard hints */}
+      <div className="flex items-center gap-2 font-mono text-[11px] text-ink/50">
+        {method === 'select' && (
+          <>
+            <span className="hidden items-center gap-1 sm:inline-flex">
+              <kbd className="rounded border border-ink/15 bg-paper px-1.5 py-0.5 text-[10px] text-ink shadow-xs">
+                1-{Math.min(9, optionsLength)}
+              </kbd>
+              <span className="text-ink/40">choose</span>
+            </span>
+            <span className="hidden text-ink/30 sm:inline">•</span>
+            <span className="inline-flex items-center gap-1">
+              <kbd className="rounded border border-ink/15 bg-paper px-1.5 py-0.5 text-[10px] text-ink shadow-xs">
+                ↵
+              </kbd>
+              <span className="text-ink/40">select</span>
+            </span>
+          </>
+        )}
+        {method === 'confirm' && (
+          <span className="inline-flex items-center gap-1">
+            <kbd className="rounded border border-ink/15 bg-paper px-1.5 py-0.5 text-[10px] text-ink shadow-xs">
+              ↵
+            </kbd>
+            <span className="text-ink/40">confirm</span>
+          </span>
+        )}
+        {method === 'editor' && (
+          <span className="inline-flex items-center gap-1">
+            <kbd className="rounded border border-ink/15 bg-paper px-1.5 py-0.5 text-[10px] text-ink shadow-xs">
+              ⌘↵
+            </kbd>
+            <span className="text-ink/40">save buffer</span>
+          </span>
+        )}
+        <span className="text-ink/30">•</span>
+        <span className="inline-flex items-center gap-1">
+          <kbd className="rounded border border-ink/15 bg-paper px-1.5 py-0.5 text-[10px] text-ink shadow-xs">
+            Esc
+          </kbd>
+          <span className="text-ink/40">cancel</span>
+        </span>
+      </div>
+
+      {/* Action Buttons */}
+      <div className="flex items-center gap-2.5 ml-auto">
+        <button
+          type="button"
+          onClick={onCancel}
+          className="flex cursor-pointer items-center gap-1 rounded-lg border border-ink/15 bg-paper px-3.5 py-1.5 text-[12px] font-medium text-ink/70 transition-colors hover:border-ink/30 hover:bg-canvas/50 hover:text-ink"
+        >
+          <X size={12} className="opacity-60" />
+          <span>Cancel</span>
+        </button>
+
+        <button
+          type="button"
+          onClick={onSubmit}
+          disabled={isSelectDisabled}
+          className="flex cursor-pointer items-center gap-1.5 rounded-lg bg-ink px-4 py-1.5 text-[12px] font-semibold text-paper shadow-xs transition-all hover:opacity-90 active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-35"
+        >
+          <span>
+            {method === 'confirm'
+              ? 'Confirm'
+              : method === 'select'
+                ? 'Select Option'
+                : 'Submit Response'}
+          </span>
+          <CornerDownLeft size={12} className="opacity-70" />
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/tool-renderers/ask-dialog/Header.tsx

@@ -0,0 +1,52 @@
+import type { ReactNode } from 'preact/compat';
+import { Sparkles, X } from 'lucide-preact';
+
+interface AskDialogHeaderProps {
+  title?: string;
+  methodLabel: string;
+  badge: string;
+  icon: ReactNode;
+  onCancel: () => void;
+}
+
+export function AskDialogHeader({
+  title,
+  methodLabel,
+  badge,
+  icon,
+  onCancel,
+}: AskDialogHeaderProps) {
+  return (
+    <div className="flex items-center justify-between border-b border-ink/8 bg-canvas/40 px-5 py-3.5">
+      <div className="flex items-center gap-3 min-w-0">
+        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-ink/12 bg-paper text-ink shadow-xs">
+          {icon}
+        </div>
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <h3 className="truncate text-[14px] font-semibold tracking-tight text-ink">
+              {title || methodLabel}
+            </h3>
+            <span className="flex items-center gap-1 rounded-full border border-ink/10 bg-paper px-2 py-0.5 font-mono text-[9px] font-medium tracking-wider text-ink/60 uppercase">
+              <Sparkles size={9} className="text-ink/40" />
+              {badge}
+            </span>
+          </div>
+          <p className="mt-0.5 text-[11px] text-ink/50">
+            Autonomous agent inquiry requiring user confirmation
+          </p>
+        </div>
+      </div>
+
+      <button
+        type="button"
+        onClick={onCancel}
+        aria-label="Close dialog (Esc)"
+        title="Cancel (Esc)"
+        className="flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-lg border border-ink/10 text-ink/45 transition-colors hover:border-ink/25 hover:bg-ink/5 hover:text-ink"
+      >
+        <X size={14} />
+      </button>
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/tool-renderers/ask-dialog/Lazy.tsx

@@ -0,0 +1,24 @@
+import { Suspense, lazy } from 'preact/compat';
+import type { ExtensionUiDialogRequest } from '@/client/hooks/chat/omp';
+import type { ExtensionDialogResponse } from '@/client/components/workspace/chat-timeline/tool-renderers/ask-dialog/index';
+
+const AskDialogImpl = lazy(() =>
+  import('@/client/components/workspace/chat-timeline/tool-renderers/ask-dialog/index').then((m) => ({
+    default: m.AskDialog,
+  }))
+);
+
+interface AskDialogProps {
+  request: ExtensionUiDialogRequest;
+  onRespond: (request: ExtensionUiDialogRequest, response: ExtensionDialogResponse) => void;
+}
+
+export function AskDialog(props: AskDialogProps) {
+  return (
+    <Suspense fallback={null}>
+      <AskDialogImpl {...props} />
+    </Suspense>
+  );
+}
+
+export type { ExtensionDialogResponse } from '@/client/components/workspace/chat-timeline/tool-renderers/ask-dialog/index';

package/src/client/components/workspace/chat-timeline/tool-renderers/ask-dialog/SelectBody.tsx

@@ -0,0 +1,110 @@
+import type { RefObject } from 'preact/compat';
+import { CheckCircle2, Circle } from 'lucide-preact';
+
+interface AskDialogSelectBodyProps {
+  options: string[];
+  optionDetails: { description?: string }[];
+  selectedOption: string | null;
+  customValue: string;
+  onCustomChange: (value: string) => void;
+  customInputRef: RefObject<HTMLInputElement>;
+  onSelect: (option: string) => void;
+  onConfirmOption: (option: string) => void;
+}
+
+export function AskDialogSelectBody({
+  options,
+  optionDetails,
+  selectedOption,
+  customValue,
+  onCustomChange,
+  customInputRef,
+  onSelect,
+  onConfirmOption,
+}: AskDialogSelectBodyProps) {
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between text-[11px] font-medium tracking-wider text-ink/50 uppercase">
+        <span>Available Options</span>
+        <span className="font-mono text-[10px] text-ink/40">Press [1-{Math.min(9, options.length)}] to choose</span>
+      </div>
+      <div className="grid gap-2" role="radiogroup">
+        {options.map((option, index) => {
+          const isSelected = selectedOption === option;
+          const detail = optionDetails[index]?.description;
+
+          return (
+            <button
+              key={option}
+              type="button"
+              onClick={() => onSelect(option)}
+              onDblClick={() => onConfirmOption(option)}
+              aria-checked={isSelected}
+              role="radio"
+              className={`group flex w-full cursor-pointer items-start gap-3 rounded-xl border p-3.5 text-left transition-all ${
+                isSelected
+                  ? 'border-ink bg-paper shadow-sm ring-1 ring-ink/10'
+                  : 'border-ink/10 bg-canvas/30 hover:border-ink/25 hover:bg-paper'
+              }`}
+            >
+              {/* Shortcut key indicator */}
+              <span
+                className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-md font-mono text-[11px] font-semibold transition-colors ${
+                  isSelected
+                    ? 'bg-ink text-paper'
+                    : 'border border-ink/15 bg-paper text-ink/60 group-hover:border-ink/30 group-hover:text-ink'
+                }`}
+              >
+                {index + 1}
+              </span>
+
+              {/* Option label & description */}
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2">
+                  <span className={`text-[13px] font-medium leading-snug ${isSelected ? 'text-ink font-semibold' : 'text-ink/85'}`}>
+                    {option}
+                  </span>
+                </div>
+                {detail && (
+                  <div className="mt-1 text-[11.5px] leading-relaxed text-ink/55">
+                    {detail}
+                  </div>
+                )}
+              </div>
+
+              {/* Status Radio / Check */}
+              <span className="mt-0.5 shrink-0">
+                {isSelected ? (
+                  <CheckCircle2 size={16} className="text-ink" />
+                ) : (
+                  <Circle size={16} className="text-ink/20 group-hover:text-ink/40" />
+                )}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Free-text answer for "Other"-style options: typing here wins over the
+          highlighted option, since the literal option text is not an answer. */}
+      <div className="space-y-1.5 pt-1">
+        <div className="text-[11px] font-medium tracking-wider text-ink/50 uppercase">Other — type your own answer</div>
+        <input
+          ref={customInputRef}
+          type="text"
+          value={customValue}
+          placeholder="Type a custom answer and press Enter..."
+          onChange={(e) => onCustomChange(e.currentTarget.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              e.stopPropagation();
+              if (customValue.trim()) onConfirmOption(customValue.trim());
+            }
+          }}
+          className="w-full rounded-xl border border-ink/15 bg-paper px-4 py-3 text-[13.5px] text-ink placeholder:text-ink/35 outline-none transition-all focus:border-ink focus:ring-2 focus:ring-ink/15"
+        />
+      </div>
+    </div>
+  );
+}