ompchamber 0.7.0 → 1.0.0

package/dist/client/static/js/index.eccad0b70a.js.LICENSE.txt

@@ -1,4 +0,0 @@
-/**
- * @license
- * SPDX-License-Identifier: Apache-2.0
- */

package/src/client/components/workspace/chat-timeline/tool-renderers/panels/Ask.tsx

@@ -1,205 +0,0 @@
-import { useMemo } from 'preact/hooks';
-import { CheckCircle2, HelpCircle, XCircle } from 'lucide-preact';
-import type { ToolCallData } from '@/shared/types';
-import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
-import { highlightCode, isCodeLike, tryParseJson } from '@/shared/lib/code/syntax-highlight';
-import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
-import { JsonCodeBlock } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/JsonCodeBlock';
-import { CopyButton } from '@/client/components/common/CopyButton';
-
-interface OptionItem {
-  label: string;
-  description?: string;
-}
-
-/** Panel khusus untuk tool `ask` — dialog pertanyaan agent ke user atau konfirmasi. */
-export function Ask({ tool }: { tool: ToolCallData }) {
-  const input = tool.input;
-  const inputObj = typeof input === 'object' && input !== null ? (input as Record<string, any>) : undefined;
-
-  // 1. Support omp questions array: input.questions[0]
-  const questionEntry = Array.isArray(inputObj?.questions) && inputObj.questions.length > 0
-    ? inputObj.questions[0]
-    : undefined;
-
-  const header = questionEntry?.header;
-
-  const question =
-    questionEntry?.question ||
-    (typeof inputObj?.question === 'string'
-      ? inputObj.question
-      : typeof inputObj?.prompt === 'string'
-        ? inputObj.prompt
-        : typeof inputObj?.message === 'string'
-          ? inputObj.message
-          : typeof input === 'string'
-            ? input
-            : tool.detail || 'Question from agent');
-
-  // Parse options: can be array of { label, description } or strings
-  const rawOptions = questionEntry?.options || inputObj?.options || inputObj?.choices || [];
-  const options: OptionItem[] = Array.isArray(rawOptions)
-    ? rawOptions.map((opt: unknown) => {
-        if (typeof opt === 'string') return { label: opt };
-        if (typeof opt === 'object' && opt !== null) {
-          const o = opt as Record<string, any>;
-          return {
-            label: typeof o.label === 'string' ? o.label : typeof o.text === 'string' ? o.text : String(opt),
-            description: typeof o.description === 'string' ? o.description : undefined,
-          };
-        }
-        return { label: String(opt) };
-      })
-    : [];
-
-  const rawOutput = useMemo(() => {
-    if (typeof tool.output === 'string') return tool.output;
-    if (tool.output && typeof tool.output === 'object') return JSON.stringify(tool.output, null, 2);
-    if (typeof inputObj?.answer === 'string') return inputObj.answer;
-    if (inputObj?.answer && typeof inputObj?.answer === 'object') return JSON.stringify(inputObj.answer, null, 2);
-    return '';
-  }, [tool.output, inputObj?.answer]);
-
-  const isCancelled =
-    (typeof rawOutput === 'string' && /cancelled|aborted|interrupted|disconnected/i.test(rawOutput)) ||
-    tool.status === 'aborted' ||
-    (tool.status === 'error' && typeof rawOutput === 'string' && /disconnect|error/i.test(rawOutput));
-
-  // Extract selected answer if e.g. "User selected: Blue"
-  const selectedMatch = typeof rawOutput === 'string' ? rawOutput.match(/selected:\s*(.+)$/i) : null;
-  const selectedAnswer = selectedMatch ? selectedMatch[1].trim() : rawOutput;
-
-  const jsonResult = useMemo(
-    () => (!isCancelled && rawOutput ? tryParseJson(rawOutput) : { isValid: false }),
-    [rawOutput, isCancelled]
-  );
-
-  const isMultilineText = typeof rawOutput === 'string' && rawOutput.includes('\n') && !selectedMatch;
-
-  const syntaxReady = useSyntaxReady();
-  const highlightedResponse = useMemo(
-    () => (typeof rawOutput === 'string' && isCodeLike(rawOutput) ? highlightCode(rawOutput, 'javascript') : ''),
-    [rawOutput, syntaxReady]
-  );
-
-  return (
-    <div className="space-y-2">
-      <div className="rounded-lg border border-ink/10 bg-paper p-3 shadow-xs">
-        <div className="flex items-start gap-2 min-w-0">
-          <HelpCircle size={14} className="mt-0.5 shrink-0 text-ink/60" />
-          <div className="min-w-0 flex-1">
-            <span className="text-[10px] font-semibold uppercase tracking-wider text-ink/40">
-              {header ? `Agent Question · ${header}` : 'Agent Question'}
-            </span>
-            <div className="mt-1 text-[12.5px] leading-relaxed text-ink/90 select-text">
-              <MarkdownRenderer content={question} />
-            </div>
-          </div>
-        </div>
-
-        {options.length > 0 && (
-          <div className="mt-3 space-y-1.5 border-t border-ink/6 pt-2.5">
-            <span className="text-[9.5px] font-semibold uppercase tracking-wider text-ink/40">
-              Options
-            </span>
-            <div className="grid gap-1.5">
-              {options.map((opt, idx) => {
-                const isSelected =
-                  !isCancelled &&
-                  Boolean(selectedAnswer) &&
-                  selectedAnswer.toLowerCase().includes(opt.label.toLowerCase());
-
-                return (
-                  <div
-                    key={idx}
-                    className={`flex flex-col gap-0.5 rounded-md px-2.5 py-1.5 text-[11px] transition-colors ${
-                      isSelected
-                        ? 'border border-ink/30 bg-ink/5 font-medium text-ink'
-                        : 'border border-ink/6 bg-canvas/30 text-ink/75'
-                    }`}
-                  >
-                    <div className="flex items-center gap-2">
-                      <span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded bg-ink/5 font-mono text-[9px] text-ink/60 font-semibold">
-                        {idx + 1}
-                      </span>
-                      <span className="min-w-0 flex-1 truncate font-medium text-ink/90">
-                        {opt.label}
-                      </span>
-                      {isSelected && <CheckCircle2 size={12} className="shrink-0 text-success" />}
-                    </div>
-                    {opt.description && (
-                      <div className="pl-5.5 text-[10px] leading-relaxed text-ink/50">
-                        {opt.description}
-                      </div>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* User Response Section — compact, proportional styling */}
-      {isCancelled && rawOutput && (
-        <div className="flex items-center gap-2 rounded-md border border-ink/8 bg-ink/[0.02] px-2.5 py-1 text-[10.5px] text-ink/60">
-          <XCircle size={11} className="shrink-0 text-ink/40" />
-          <span className="text-[9px] font-semibold uppercase tracking-wider text-ink/40 shrink-0">
-            Status:
-          </span>
-          <span className="font-mono text-ink/60 truncate select-text">{rawOutput}</span>
-        </div>
-      )}
-
-      {!isCancelled && jsonResult.isValid && jsonResult.pretty && (
-        <JsonCodeBlock
-          jsonString={jsonResult.pretty}
-          title="User Response"
-          maxHeightClass="max-h-40"
-          compact={true}
-          icon={<CheckCircle2 size={10.5} className="text-success shrink-0" />}
-          showHeader={true}
-        />
-      )}
-
-      {!isCancelled && !jsonResult.isValid && rawOutput && (
-        isMultilineText ? (
-          <div className="overflow-hidden rounded-md border border-ink/8 bg-paper">
-            <div className="flex items-center justify-between border-b border-ink/6 bg-canvas/40 px-2.5 py-1">
-              <div className="flex items-center gap-1.5">
-                <CheckCircle2 size={10.5} className="shrink-0 text-success" />
-                <span className="text-[9px] font-semibold uppercase tracking-wider text-ink/50">
-                  User Response
-                </span>
-              </div>
-              <CopyButton
-                text={rawOutput}
-                className="flex cursor-pointer items-center gap-1 rounded px-1.5 py-0.5 text-[9px] text-ink/45 transition-colors hover:bg-ink/5 hover:text-ink shrink-0"
-                title="Copy response"
-                label="Copy"
-              />
-            </div>
-            <pre className="max-h-32 overflow-y-auto p-2 font-mono text-[10.5px] leading-snug whitespace-pre-wrap break-words text-ink/85 select-text">
-              {highlightedResponse ? (
-                <span dangerouslySetInnerHTML={{ __html: highlightedResponse }} />
-              ) : (
-                rawOutput
-              )}
-            </pre>
-          </div>
-        ) : (
-          <div className="flex items-center gap-2 rounded-md border border-ink/8 bg-canvas/30 px-2.5 py-1 text-[10.5px]">
-            <CheckCircle2 size={11} className="shrink-0 text-success" />
-            <span className="text-[9px] font-semibold uppercase tracking-wider text-ink/40 shrink-0">
-              User Response:
-            </span>
-            <span className="font-mono text-ink/90 font-medium truncate select-text">
-              {selectedMatch ? selectedMatch[1].trim().replace(/^["']|["']$/g, '') : rawOutput}
-            </span>
-          </div>
-        )
-      )}
-    </div>
-  );
-}
-

package/src/client/components/workspace/terminal-panel/InputBar.tsx

@@ -1,82 +0,0 @@
-import { useEffect, useRef } from 'preact/hooks';
-import type { FormEvent, KeyboardEvent } from 'preact/compat';
-import { CornerDownLeft, Square } from 'lucide-preact';
-
-interface TerminalInputBarProps {
-  value: string;
-  onChange: (val: string) => void;
-  onSubmit: () => void;
-  onKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
-  onCancel: () => void;
-  isRunning: boolean;
-}
-
-export function TerminalInputBar({
-  value,
-  onChange,
-  onSubmit,
-  onKeyDown,
-  onCancel,
-  isRunning,
-}: TerminalInputBarProps) {
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  // Auto focus input
-  useEffect(() => {
-    inputRef.current?.focus();
-  }, []);
-
-  const handleSubmit = (e: FormEvent) => {
-    e.preventDefault();
-    if (!isRunning) {
-      onSubmit();
-    }
-  };
-
-  return (
-    <form
-      onSubmit={handleSubmit}
-      className="p-2 border-t border-ink/10 bg-paper flex items-center space-x-2 flex-shrink-0"
-    >
-      <div className="flex items-center space-x-2 flex-1 min-w-0 bg-canvas border border-ink/20 rounded-lg px-2.5 py-1.5 focus-within:border-ink/50 focus-within:ring-1 focus-within:ring-ink/10 transition-all">
-        <span className="text-warning font-mono text-xs select-none font-bold">
-          $
-        </span>
-        <input
-          ref={inputRef}
-          type="text"
-          value={value}
-          onChange={e => onChange(e.currentTarget.value)}
-          onKeyDown={onKeyDown}
-          disabled={isRunning}
-          placeholder={isRunning ? "Command is executing in live session..." : "bun run build, git status, ls -la..."}
-          className="flex-1 bg-transparent font-mono text-xs text-ink placeholder:text-ink/40 outline-none min-w-0"
-        />
-        <span className="hidden sm:inline-block text-[10px] font-mono text-ink/40 select-none">
-          ↑↓ history
-        </span>
-      </div>
-
-      {isRunning ? (
-        <button
-          type="button"
-          onClick={onCancel}
-          className="px-2.5 py-1.5 rounded-lg bg-error text-white hover:bg-error/90 active:scale-95 transition-all flex items-center space-x-1 cursor-pointer shadow-xs font-mono text-xs"
-          title="Interrupt process (Ctrl+C)"
-        >
-          <Square size={12} fill="currentColor" />
-          <span className="hidden xs:inline text-[10px]">Stop</span>
-        </button>
-      ) : (
-        <button
-          type="submit"
-          disabled={!value.trim()}
-          className="p-2 rounded-lg bg-ink text-paper hover:bg-ink/85 active:scale-95 transition-all flex items-center justify-center disabled:opacity-40 disabled:pointer-events-none cursor-pointer shadow-xs"
-          title="Execute command (Enter)"
-        >
-          <CornerDownLeft size={13} />
-        </button>
-      )}
-    </form>
-  );
-}

package/src/client/components/workspace/terminal-panel/LogEntry.tsx

@@ -1,70 +0,0 @@
-import type { TerminalLogItem } from '@/shared/types';
-import { Check, Clock, Loader2, X } from 'lucide-preact';
-
-interface TerminalLogEntryProps {
-  item: TerminalLogItem;
-}
-
-export function TerminalLogEntry({ item }: TerminalLogEntryProps) {
-  const isRunning = item.exitCode === -1;
-  const isError = !isRunning && item.exitCode !== 0;
-  const isSuccess = !isRunning && item.exitCode === 0;
-
-  return (
-    <div className="space-y-1 font-mono text-[11px] leading-relaxed select-text">
-      {/* Command prompt line */}
-      <div className="flex items-center justify-between text-ink bg-canvas px-2.5 py-1 rounded border border-ink/15">
-        <div className="flex items-center space-x-2 min-w-0">
-          <span className="text-warning font-bold select-none">$</span>
-          <span className="font-semibold text-ink truncate">{item.command}</span>
-        </div>
-
-        <div className="flex items-center space-x-2 text-[10px] text-ink/50 flex-shrink-0 ml-2 select-none">
-          {isRunning ? (
-            <span className="flex items-center space-x-1 text-warning">
-              <Loader2 size={10} className="animate-spin" />
-              <span>executing...</span>
-            </span>
-          ) : (
-            <>
-              {typeof item.durationMs === 'number' && (
-                <span className="flex items-center space-x-0.5">
-                  <Clock size={9} />
-                  <span>{item.durationMs}ms</span>
-                </span>
-              )}
-              {isSuccess && (
-                <span className="flex items-center text-success" title="Exit code: 0">
-                  <Check size={11} />
-                </span>
-              )}
-              {isError && (
-                <span
-                  className="flex items-center space-x-0.5 text-error font-bold"
-                  title={`Exit code: ${item.exitCode}`}
-                >
-                  <X size={11} />
-                  <span>{item.exitCode}</span>
-                </span>
-              )}
-            </>
-          )}
-        </div>
-      </div>
-
-      {/* Stdout block */}
-      {item.stdout && (
-        <pre className="text-ink/85 whitespace-pre-wrap break-all px-2.5 py-1 overflow-x-auto selection:bg-ink/15 bg-canvas/40 rounded">
-          {item.stdout}
-        </pre>
-      )}
-
-      {/* Stderr block in signal red */}
-      {item.stderr && (
-        <pre className="text-error font-medium whitespace-pre-wrap break-all px-2.5 py-1 bg-error/10 rounded border border-error/20 selection:bg-error/30">
-          {item.stderr}
-        </pre>
-      )}
-    </div>
-  );
-}

package/src/client/hooks/workspace/terminal-output.ts

@@ -1,66 +0,0 @@
-import { useCallback, useEffect, useRef } from 'preact/hooks';
-import type { RefObject } from 'preact/compat';
-import type { Terminal } from '@xterm/xterm';
-import { useSessionState } from '@/client/hooks/workspace/session-state';
-import { useSessionStateContext } from '@/client/hooks/workspace/session-state/context';
-import { getSessionValue } from '@/shared/lib/workspace/session-state/store';
-import { appendTerminalSessionOutput, clearTerminalSessionOutput, getTerminalOutputSnapshot, setTerminalOutputSnapshot } from '@/client/data/theme/terminal';
-
-interface TerminalOutputSync {
-  recordOutput: (chunk: string) => void;
-  clearOutput: () => void;
-}
-
-const OUTPUT_PERSIST_INTERVAL_MS = 1000;
-
-export function useTerminalOutputSync(terminalRef: RefObject<Terminal>): TerminalOutputSync {
-  const { sessionId, ready } = useSessionStateContext();
-  const [, setStoredOutput] = useSessionState<string>('terminal.output', '');
-  const setStoredOutputRef = useRef(setStoredOutput);
-  setStoredOutputRef.current = setStoredOutput;
-  const readyRef = useRef(ready);
-  readyRef.current = ready;
-  const lastPersistRef = useRef(0);
-  const hydratedSessionRef = useRef<string | null>(null);
-  const prevHydratedSessionRef = useRef<string | null>(null);
-
-  const recordOutput = useCallback((chunk: string) => {
-    appendTerminalSessionOutput(chunk);
-    if (!readyRef.current) return;
-    const now = Date.now();
-    if (now - lastPersistRef.current < OUTPUT_PERSIST_INTERVAL_MS) return;
-    lastPersistRef.current = now;
-    setStoredOutputRef.current(getTerminalOutputSnapshot());
-  }, []);
-
-  const clearOutput = useCallback(() => {
-    clearTerminalSessionOutput();
-    if (!readyRef.current) return;
-    lastPersistRef.current = Date.now();
-    setStoredOutputRef.current('');
-  }, []);
-
-  // On restore, seed the module singleton before xterm rehydrates it; when the
-  // term is already live, replace its buffer. A session switch always re-seeds,
-  // while an initial mount without a stored snapshot keeps the live output.
-  useEffect(() => {
-    if (!ready || hydratedSessionRef.current === sessionId) return;
-    const isSessionSwitch = prevHydratedSessionRef.current !== null;
-    hydratedSessionRef.current = sessionId;
-    prevHydratedSessionRef.current = sessionId;
-    const restored = getSessionValue<string>(sessionId, 'terminal.output');
-    if (restored === undefined && !isSessionSwitch) return;
-    setTerminalOutputSnapshot(restored ?? '');
-    const term = terminalRef.current;
-    if (!term) return;
-    term.clear();
-    if (restored) {
-      term.write(restored);
-      term.scrollToBottom();
-    } else {
-      term.write('\x1b[33m$\x1b[0m ');
-    }
-  }, [ready, sessionId, terminalRef]);
-
-  return { recordOutput, clearOutput };
-}