/* Ori — agent panel styling, in the spirit of Zed's agent panel: a quiet column of conversation, tool activity and a composer pinned at the bottom. Light is the default palette; the dark one applies when the theme store stamps data-theme="dark" on (see ui/src/theme.ts). */ :root { color-scheme: light; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; --bg: #fafafa; --panel: #ffffff; --text: #1c1c1c; --muted: #6b6b6b; --border: #e2e2e2; --accent: #3b82f6; --user-bubble: #e8f0fe; --error: #b91c1c; --error-bg: #fee2e2; --code-bg: #f2f2f2; } :root[data-theme="dark"] { color-scheme: dark; --bg: #1e2025; --panel: #26282e; --text: #e6e6e6; --muted: #9a9a9a; --border: #3a3d45; --accent: #60a5fa; --user-bubble: #2f3a4f; --error: #fca5a5; --error-bg: #3f2222; --code-bg: #1a1c20; } body { margin: 0; background: var(--bg); color: var(--text); } .app { display: flex; flex-direction: column; height: 100vh; } .app-body { flex: 1; display: flex; min-height: 0; justify-content: center; } .chat-column { display: flex; flex-direction: column; flex: 1; max-width: 52rem; min-width: 0; } .app-body.with-workspace .chat-column { max-width: none; flex: 0 0 42%; border-right: 1px solid var(--border); } /* ---- header ---- */ .topbar { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.6rem 1rem; border-bottom: 1px solid var(--border); } .topbar-title { font-size: 1.05rem; margin: 0; } .status { font-size: 0.75rem; color: var(--muted); } .status-online::before, .status-offline::before, .status-connecting::before { content: "●"; margin-right: 0.3rem; } .status-online::before { color: #22c55e; } .status-offline::before { color: #ef4444; } .status-connecting::before { color: #eab308; } .topbar-theme, .topbar-workspace { border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); font: inherit; font-size: 0.8rem; padding: 0.25rem 0.7rem; cursor: pointer; } .topbar-workspace-active { border-color: var(--accent); color: var(--accent); } .topbar-theme { margin-left: auto; padding: 0.25rem 0.5rem; } /* ---- workspace panel ---- */ .workspace { flex: 1; display: flex; min-width: 0; background: var(--bg); } .workspace-hidden { display: none; } .workspace-pane { height: 100%; } .workspace-pane-hidden { display: none; } /* ---- terminal pane ---- */ /* The terminal keeps a dark background whatever the app theme, like an IDE. */ .terminal { height: 100%; padding: 0.4rem; background: #1e1e1e; } .terminal .xterm { height: 100%; } .filetree { /* Width driven by the workspace store (see Workspace.tsx); 14rem default. */ flex: 0 0 var(--filetree-width, 14rem); overflow-y: auto; padding: 0.5rem; font-size: 0.85rem; } /* ---- resize handle between the file tree and the tabs ---- */ .resize-handle { /* The visible line is the 1px border; the padding widens the grab area. */ flex: 0 0 1px; box-sizing: content-box; padding: 0 3px; margin: 0 -3px; background: var(--border); background-clip: content-box; cursor: col-resize; touch-action: none; z-index: 1; } .resize-handle:hover, .resize-handle-active { background-color: var(--accent); } .resize-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; } .filetree-header { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.4rem; } .filetree-refresh { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; } .filetree-error { color: var(--error); font-size: 0.8rem; } .filetree-loading { color: var(--muted); font-style: italic; } .filetree-list { list-style: none; margin: 0; padding: 0; } .filetree-list-nested { /* VS Code-style indent guide */ margin-left: 0.55rem; border-left: 1px solid var(--border); } .filetree-entry { display: flex; align-items: center; gap: 0.3rem; width: 100%; text-align: left; border: none; background: none; color: var(--text); font: inherit; font-size: 0.82rem; padding: 0.14rem 0.3rem; border-radius: 4px; cursor: pointer; white-space: nowrap; } .filetree-entry:hover { background: var(--panel); } .filetree-active { background: var(--user-bubble); } .filetree-chevron { flex: 0 0 0.7rem; color: var(--muted); font-size: 0.8rem; line-height: 1; text-align: center; } .filetree-icon { flex: 0 0 1rem; width: 1rem; height: 1rem; } .filetree-name { overflow: hidden; text-overflow: ellipsis; } .workspace-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .workspace-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); padding: 0.3rem 0.5rem 0; } .workspace-tab { border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; background: none; color: var(--muted); font: inherit; font-size: 0.85rem; padding: 0.3rem 0.9rem; cursor: pointer; } .workspace-tab-active { border-color: var(--border); background: var(--panel); color: var(--text); } .workspace-content { flex: 1; min-height: 0; overflow: auto; position: relative; } .pane-empty { color: var(--muted); font-style: italic; padding: 1rem; } .pane-error { color: var(--error); padding: 1rem; } /* ---- preview pane ---- */ .preview { display: flex; flex-direction: column; height: 100%; } .pane-header { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.8rem; border-bottom: 1px solid var(--border); font-size: 0.85rem; } .pane-path { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pane-modes { display: flex; gap: 0.25rem; margin-left: auto; } .pane-mode { border: 1px solid var(--border); border-radius: 6px; background: none; color: var(--muted); font: inherit; font-size: 0.75rem; padding: 0.15rem 0.6rem; cursor: pointer; } .pane-mode-active { background: var(--panel); color: var(--text); border-color: var(--accent); } .pane-action { border: 1px solid var(--border); border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: 0.75rem; padding: 0.15rem 0.6rem; cursor: pointer; } .pane-modes + .pane-action { margin-left: 0; } .pane-header .pane-action:last-child { margin-left: auto; } .pane-modes + .pane-action:last-child { margin-left: 0; } .preview-body { flex: 1; min-height: 0; overflow: auto; } .preview-rendered { padding: 1rem; max-width: 48rem; } /* ---- image preview ---- */ .image-view { margin: 0; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; } .image-view-canvas { max-width: 100%; border: 1px solid var(--border); border-radius: 6px; --check: rgba(127, 127, 127, 0.18); background-color: var(--panel); background-image: linear-gradient(45deg, var(--check) 25%, transparent 25%), linear-gradient(-45deg, var(--check) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--check) 75%), linear-gradient(-45deg, transparent 75%, var(--check) 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; } .image-view-canvas img { display: block; max-width: 100%; height: auto; } .image-view-meta { color: var(--muted); font-size: 0.8rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* ---- draw.io preview ---- */ .drawio-view { display: flex; flex-direction: column; height: 100%; } .drawio-frame { flex: 1; width: 100%; min-height: 20rem; border: none; background: var(--panel); } .drawio-view-loading .drawio-frame { visibility: hidden; flex: 0; min-height: 0; } .drawio-notice { margin: 1rem; padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-size: 0.85rem; } /* ---- editor pane ---- */ .editor { display: flex; flex-direction: column; height: 100%; } .editor-body { flex: 1; min-height: 0; } .pane-saved { color: #22c55e; font-size: 0.75rem; } .pane-error-inline { color: var(--error); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .editor .pane-action { margin-left: auto; } .editor .pane-saved, .editor .pane-error-inline { margin-left: auto; } .editor .pane-saved + .pane-action, .editor .pane-error-inline + .pane-action { margin-left: 0.5rem; } /* ---- thread ---- */ .thread { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; } .thread-empty { color: var(--muted); font-size: 0.85rem; font-style: italic; } /* ---- working indicator ---- */ .working { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); font-size: 0.85rem; font-style: italic; } .spinner { width: 0.85rem; height: 0.85rem; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spinner-turn 0.8s linear infinite; } @keyframes spinner-turn { to { transform: rotate(360deg); } } .message { border-radius: 8px; padding: 0.55rem 0.8rem; line-height: 1.5; overflow-wrap: anywhere; } .message-user { align-self: flex-end; background: var(--user-bubble); white-space: pre-wrap; max-width: 85%; } .message-agent { background: var(--panel); border: 1px solid var(--border); } .message-error { background: var(--error-bg); color: var(--error); font-size: 0.85rem; } /* ---- markdown ---- */ .markdown > :first-child { margin-top: 0; } .markdown > :last-child { margin-bottom: 0; } .markdown pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: 6px; padding: 0.6rem; overflow-x: auto; } .markdown code { background: var(--code-bg); border-radius: 4px; padding: 0.1rem 0.3rem; font-size: 0.85em; } .markdown pre code { background: none; padding: 0; } .markdown table { border-collapse: collapse; } .markdown th, .markdown td { border: 1px solid var(--border); padding: 0.3rem 0.6rem; } /* ---- thoughts ---- */ .thought { border: 1px dashed var(--border); border-radius: 8px; padding: 0.35rem 0.8rem; color: var(--muted); font-size: 0.9rem; } .thought-summary { cursor: pointer; user-select: none; } .thought-live .thought-summary { cursor: default; margin: 0; } .thought-body { padding-top: 0.4rem; } /* ---- tool calls ---- */ .tool { border: 1px solid var(--border); border-left: 3px solid var(--muted); border-radius: 8px; padding: 0.35rem 0.8rem; background: var(--panel); font-size: 0.9rem; } .tool-in_progress { border-left-color: var(--accent); } .tool-completed { border-left-color: #22c55e; } .tool-failed { border-left-color: #ef4444; } .tool-summary { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; user-select: none; } .tool-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tool-status { font-size: 0.72rem; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 0.05rem 0.5rem; } .tool-status-failed { color: var(--error); } .tool-body { padding: 0.4rem 0 0.2rem; } .tool-locations { margin: 0 0 0.4rem; padding-left: 1.1rem; color: var(--muted); } .tool-diff { background: var(--code-bg); border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem; overflow-x: auto; } .tool-diff-path { display: block; margin-bottom: 0.3rem; color: var(--muted); } .tool-diff pre { margin: 0; font-size: 0.8rem; } .tool-diff-old { color: #dc2626; } .tool-diff-new { color: #16a34a; } .tool-terminal { color: var(--muted); font-style: italic; } .inline-code { background: var(--code-bg); border: 1px solid var(--border); border-radius: 4px; padding: 0 0.3rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.85em; } .tool-output { background: var(--code-bg); border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem; overflow-x: auto; margin: 0.3rem 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.8rem; line-height: 1.4; } /* ---- plan ---- */ .plan { margin: 0 1rem; border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.8rem; background: var(--panel); font-size: 0.85rem; } .plan-summary { cursor: pointer; user-select: none; color: var(--muted); } .plan-entries { list-style: none; margin: 0.4rem 0 0.2rem; padding: 0; } .plan-entry { padding: 0.1rem 0; } .plan-entry-completed { color: var(--muted); text-decoration: line-through; } .plan-entry-in_progress { color: var(--accent); } /* ---- permissions ---- */ .permission { margin: 0.5rem 1rem 0; border: 1px solid var(--accent); border-radius: 8px; padding: 0.6rem 0.8rem; background: var(--panel); } .permission-title { margin: 0 0 0.5rem; font-size: 0.9rem; } .permission-options { display: flex; gap: 0.5rem; flex-wrap: wrap; } .permission-option { border: 1px solid var(--border); border-radius: 6px; padding: 0.35rem 0.8rem; font: inherit; font-size: 0.85rem; cursor: pointer; background: var(--panel); color: var(--text); } .permission-allow_once, .permission-allow_always { background: var(--accent); border-color: var(--accent); color: #ffffff; } .permission-reject_once, .permission-reject_always { border-color: #dc2626; color: #dc2626; } /* ---- composer ---- */ .composer { display: flex; gap: 0.5rem; padding: 0.75rem 1rem 1rem; border-top: 1px solid var(--border); } .composer-field { flex: 1; position: relative; display: flex; } .composer-input { flex: 1; resize: none; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 0.55rem 0.7rem; font: inherit; } .composer-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .composer-send, .composer-stop { align-self: flex-end; border: none; border-radius: 8px; padding: 0.55rem 1rem; font: inherit; cursor: pointer; color: #ffffff; } .composer-send { background: var(--accent); } .composer-send:disabled { opacity: 0.5; cursor: default; } .composer-stop { background: #dc2626; } /* ---- completion popup (@ files, / skills) ---- */ .completion { position: absolute; left: 0; right: 0; bottom: calc(100% + 0.35rem); max-height: 16rem; overflow-y: auto; margin: 0; padding: 0.25rem; list-style: none; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); font-size: 0.85rem; z-index: 5; } .completion-item { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.35rem 0.6rem; border-radius: 6px; cursor: pointer; } .completion-item-active { background: var(--user-bubble); } .completion-label { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; } .completion-description { flex: 1; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .completion-source { margin-left: auto; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 0 0.45rem; } .completion-source-skill { color: var(--accent); border-color: var(--accent); }