AkurAI-IDP / src/routes/agent_os.css

Latest change 3fec4c3d88aac124d3a5f8b6d141401220458111 - Simplify agent console workspace by Ólafur Búi Ólafsson

/* Framework theme tokens, vendored from AkurAI Framework v0.8 `/themes.css`. */
:root{--bg:#060912;--bg-2:#0b1224;--panel:#0e162b;--panel-2:#1b2742;--border:#1b2742;--border-2:#9fb0d4;--fg:#eef3ff;--muted:#9fb0d4;--dim:#1b2742;--accent:#5b8cff;--accent-2:#7af0d0;--ok:#7af0d0;--warn:#ffcf8b;--info:#6bb8ff;--danger:#ff6b81;--shadow:0 24px 60px -28px rgba(0,0,0,.55);color-scheme:dark;}
:root[data-theme="akurai"]{--bg:#060912;--bg-2:#0b1224;--panel:#0e162b;--panel-2:#1b2742;--border:#1b2742;--border-2:#9fb0d4;--fg:#eef3ff;--muted:#9fb0d4;--dim:#1b2742;--accent:#5b8cff;--accent-2:#7af0d0;--ok:#7af0d0;--warn:#ffcf8b;--info:#6bb8ff;--danger:#ff6b81;--shadow:0 24px 60px -28px rgba(0,0,0,.55);color-scheme:dark;}
:root[data-theme="akurai-light"]{--bg:#f7f8fb;--bg-2:#eef1f6;--panel:#e2e7f0;--panel-2:#cdd5e2;--border:#cdd5e2;--border-2:#5b657d;--fg:#1d2430;--muted:#5b657d;--dim:#cdd5e2;--accent:#2e56b8;--accent-2:#6d4bd8;--ok:#1f9d57;--warn:#b7791f;--info:#2570d4;--danger:#d92d20;--shadow:0 18px 45px -24px rgba(20,22,30,.16);color-scheme:light;}
:root[data-theme="claude-code"]{--bg:#1f1e1b;--bg-2:#262320;--panel:#2f2b27;--panel-2:#3a352f;--border:#3a352f;--border-2:#8a8279;--fg:#e6e0d6;--muted:#8a8279;--dim:#3a352f;--accent:#cc785c;--accent-2:#a87b9e;--ok:#8a9a5b;--warn:#d9a05b;--info:#5b9aa0;--danger:#bf4d43;--shadow:0 24px 60px -28px rgba(0,0,0,.55);color-scheme:dark;}
:root[data-theme="claude-code-light"]{--bg:#f5f1e8;--bg-2:#ece7da;--panel:#e0dac9;--panel-2:#cfc8b5;--border:#cfc8b5;--border-2:#6b6457;--fg:#3d3a34;--muted:#6b6457;--dim:#cfc8b5;--accent:#c15f3c;--accent-2:#8a5a7e;--ok:#5f7a3a;--warn:#b07a2e;--info:#3f7a80;--danger:#bf4d43;--shadow:0 18px 45px -24px rgba(20,22,30,.16);color-scheme:light;}
:root[data-theme="nord"]{--bg:#2e3440;--bg-2:#3b4252;--panel:#434c5e;--panel-2:#4c566a;--border:#4c566a;--border-2:#d8dee9;--fg:#e5e9f0;--muted:#d8dee9;--dim:#4c566a;--accent:#81a1c1;--accent-2:#b48ead;--ok:#a3be8c;--warn:#ebcb8b;--info:#88c0d0;--danger:#bf616a;--shadow:0 24px 60px -28px rgba(0,0,0,.55);color-scheme:dark;}
:root[data-theme="nord-light"]{--bg:#eceff4;--bg-2:#e5e9f0;--panel:#d8dee9;--panel-2:#aebacf;--border:#aebacf;--border-2:#4c566a;--fg:#2e3440;--muted:#4c566a;--dim:#aebacf;--accent:#5e81ac;--accent-2:#8a5a7e;--ok:#6e8b4f;--warn:#a9863a;--info:#2d7d8a;--danger:#b1444e;--shadow:0 18px 45px -24px rgba(20,22,30,.16);color-scheme:light;}
:root[data-theme="catppuccin-mocha"]{--bg:#1e1e2e;--bg-2:#181825;--panel:#313244;--panel-2:#45475a;--border:#45475a;--border-2:#585b70;--fg:#cdd6f4;--muted:#585b70;--dim:#45475a;--accent:#89b4fa;--accent-2:#cba6f7;--ok:#a6e3a1;--warn:#f9e2af;--info:#94e2d5;--danger:#f38ba8;--shadow:0 24px 60px -28px rgba(0,0,0,.55);color-scheme:dark;}
:root[data-theme="catppuccin-latte"]{--bg:#eff1f5;--bg-2:#e6e9ef;--panel:#ccd0da;--panel-2:#bcc0cc;--border:#bcc0cc;--border-2:#acb0be;--fg:#4c4f69;--muted:#acb0be;--dim:#bcc0cc;--accent:#1e66f5;--accent-2:#8839ef;--ok:#40a02b;--warn:#df8e1d;--info:#179299;--danger:#d20f39;--shadow:0 18px 45px -24px rgba(20,22,30,.16);color-scheme:light;}
:root[data-theme="solarized-dark"]{--bg:#002b36;--bg-2:#073642;--panel:#586e75;--panel-2:#657b83;--border:#657b83;--border-2:#839496;--fg:#93a1a1;--muted:#839496;--dim:#657b83;--accent:#268bd2;--accent-2:#6c71c4;--ok:#859900;--warn:#b58900;--info:#2aa198;--danger:#dc322f;--shadow:0 24px 60px -28px rgba(0,0,0,.55);color-scheme:dark;}
:root[data-theme="solarized-light"]{--bg:#fdf6e3;--bg-2:#eee8d5;--panel:#93a1a1;--panel-2:#839496;--border:#839496;--border-2:#657b83;--fg:#586e75;--muted:#657b83;--dim:#839496;--accent:#268bd2;--accent-2:#6c71c4;--ok:#859900;--warn:#b58900;--info:#2aa198;--danger:#dc322f;--shadow:0 18px 45px -24px rgba(20,22,30,.16);color-scheme:light;}
:root[data-theme="gruvbox-dark"]{--bg:#282828;--bg-2:#3c3836;--panel:#504945;--panel-2:#665c54;--border:#665c54;--border-2:#bdae93;--fg:#d5c4a1;--muted:#bdae93;--dim:#665c54;--accent:#83a598;--accent-2:#d3869b;--ok:#b8bb26;--warn:#fabd2f;--info:#8ec07c;--danger:#fb4934;--shadow:0 24px 60px -28px rgba(0,0,0,.55);color-scheme:dark;}
:root[data-theme="gruvbox-light"]{--bg:#fbf1c7;--bg-2:#ebdbb2;--panel:#d5c4a1;--panel-2:#bdae93;--border:#bdae93;--border-2:#665c54;--fg:#504945;--muted:#665c54;--dim:#bdae93;--accent:#076678;--accent-2:#8f3f71;--ok:#79740e;--warn:#b57614;--info:#427b58;--danger:#9d0006;--shadow:0 18px 45px -24px rgba(20,22,30,.16);color-scheme:light;}
:root[data-theme="tokyo-night"]{--bg:#1a1b26;--bg-2:#16161e;--panel:#2f3549;--panel-2:#444b6a;--border:#444b6a;--border-2:#787c99;--fg:#a9b1d6;--muted:#787c99;--dim:#444b6a;--accent:#2ac3de;--accent-2:#bb9af7;--ok:#9ece6a;--warn:#0db9d7;--info:#b4f9f8;--danger:#c0caf5;--shadow:0 24px 60px -28px rgba(0,0,0,.55);color-scheme:dark;}
:root[data-theme="tokyo-night-light"]{--bg:#d5d6db;--bg-2:#cbccd1;--panel:#dfe0e5;--panel-2:#9699a3;--border:#9699a3;--border-2:#4c505e;--fg:#343b59;--muted:#4c505e;--dim:#9699a3;--accent:#34548a;--accent-2:#5a4a78;--ok:#485e30;--warn:#166775;--info:#3e6968;--danger:#343b58;--shadow:0 18px 45px -24px rgba(20,22,30,.16);color-scheme:light;}
:root[data-theme="rose-pine"]{--bg:#191724;--bg-2:#1f1d2e;--panel:#26233a;--panel-2:#6e6a86;--border:#6e6a86;--border-2:#908caa;--fg:#e0def4;--muted:#908caa;--dim:#6e6a86;--accent:#c4a7e7;--accent-2:#f6c177;--ok:#31748f;--warn:#ebbcba;--info:#9ccfd8;--danger:#eb6f92;--shadow:0 24px 60px -28px rgba(0,0,0,.55);color-scheme:dark;}
:root[data-theme="rose-pine-dawn"]{--bg:#faf4ed;--bg-2:#fffaf3;--panel:#f2e9de;--panel-2:#9893a5;--border:#9893a5;--border-2:#797593;--fg:#575279;--muted:#797593;--dim:#9893a5;--accent:#907aa9;--accent-2:#ea9d34;--ok:#286983;--warn:#d7827e;--info:#56949f;--danger:#b4637a;--shadow:0 18px 45px -24px rgba(20,22,30,.16);color-scheme:light;}
:root[data-theme="dracula"]{--bg:#282a36;--bg-2:#21222c;--panel:#44475a;--panel-2:#6272a4;--border:#6272a4;--border-2:#9ea8c7;--fg:#f8f8f2;--muted:#9ea8c7;--dim:#6272a4;--accent:#bd93f9;--accent-2:#ff79c6;--ok:#50fa7b;--warn:#f1fa8c;--info:#8be9fd;--danger:#ff5555;--shadow:0 24px 60px -28px rgba(0,0,0,.55);color-scheme:dark;}

:root {
  --radius: 14px;
  --radius-sm: 8px;
  --radius-btn: 10px;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --soft-border: color-mix(in srgb, var(--border) 76%, transparent);
}

body {
  min-height: 100dvh;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.5 var(--font-sans);
}

.console-wrap {
  width: 100%;
  margin: 0;
}

.console-topbar {
  height: 52px;
  margin: 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--soft-border);
  background: var(--bg);
}

.console-topbar .wordmark {
  margin: 0;
}

.console-status {
  gap: 8px;
}

.console-dot {
  padding: 4px 9px;
  border-color: var(--soft-border);
  background: color-mix(in srgb, var(--bg-2) 78%, transparent);
  color: var(--muted);
  font: 12px/1.2 var(--mono);
}

.console-dot::before {
  background: var(--accent);
  box-shadow: none;
}

.console-card {
  min-height: calc(100dvh - 52px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.console-card::before {
  display: none;
}

.agent-os {
  min-height: calc(100dvh - 52px);
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  background: var(--bg);
  color: var(--fg);
}

.agent-sidebar {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr auto;
  align-content: start;
  gap: 14px;
  padding: 16px 12px;
  border-right: 1px solid var(--soft-border);
  background: var(--bg-2);
}

.agent-product {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
}

.agent-avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--soft-border);
  border-radius: 8px;
  color: var(--accent);
  background: color-mix(in srgb, var(--panel) 78%, var(--bg));
  font: 12px/1 var(--mono);
}

.agent-brand {
  min-width: 0;
  color: var(--fg);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.15;
}

.agent-brand small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.agent-new-task,
.agent-mode,
.agent-nav a,
.agent-nav span,
.agent-account a {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  text-decoration: none;
  font-size: 13px;
}

.agent-new-task {
  color: var(--fg);
  border-color: var(--soft-border);
  background: color-mix(in srgb, var(--panel) 72%, var(--bg-2));
  font-weight: 650;
}

.agent-modebar,
.agent-nav {
  display: grid;
  gap: 4px;
}

.agent-mode {
  justify-content: flex-start;
}

.agent-mode::before {
  content: attr(data-icon);
  width: 16px;
  color: var(--accent);
  font: 12px/1 var(--mono);
  text-align: center;
}

.agent-mode-active,
.agent-nav .active,
.agent-new-task:hover,
.agent-mode:hover,
.agent-nav a:hover,
.agent-nav span:hover,
.agent-account a:hover {
  color: var(--fg);
  border-color: var(--soft-border);
  background: color-mix(in srgb, var(--panel) 72%, var(--bg-2));
}

.agent-section {
  display: grid;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--soft-border);
}

.agent-section h2 {
  margin: 0 0 2px;
  padding: 0 10px;
  color: color-mix(in srgb, var(--muted) 78%, var(--bg));
  font: 11px/1.2 var(--mono);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.agent-count {
  color: var(--muted);
  font: 11px/1 var(--mono);
}

.agent-main {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 56px minmax(0, 1fr) auto;
  background: var(--bg);
}

.agent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 22px;
  border-bottom: 1px solid var(--soft-border);
}

.agent-title {
  margin: 0;
  color: var(--fg);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0;
}

.agent-subtitle {
  margin: 1px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.agent-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font: 12px/1.2 var(--mono);
}

.agent-meta span {
  padding: 4px 8px;
  border: 1px solid var(--soft-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 52%, transparent);
}

.agent-timeline {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 34px 24px 28px;
}

.agent-empty,
.agent-event,
.agent-run-details {
  width: min(760px, 100%);
  margin: 0 auto;
}

.agent-empty {
  align-self: center;
  padding-top: min(18vh, 120px);
  text-align: center;
}

.agent-empty h2 {
  margin: 0 0 8px;
  color: var(--fg);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 650;
  letter-spacing: 0;
}

.agent-empty p {
  margin: 0;
  color: var(--muted);
}

.agent-suggestions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.agent-suggestions span {
  padding: 8px 11px;
  border: 1px solid var(--soft-border);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 50%, transparent);
  font-size: 13px;
}

.agent-event {
  display: grid;
  gap: 7px;
}

.agent-event-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: color-mix(in srgb, var(--muted) 78%, var(--bg));
  font: 12px/1.2 var(--mono);
  text-transform: uppercase;
}

.chat-message-content {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--fg);
  font: 15px/1.65 var(--font-sans);
}

.agent-event-user {
  justify-items: end;
}

.agent-event-user .chat-message-content {
  max-width: min(620px, 88%);
  padding: 10px 13px;
  border: 1px solid var(--soft-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 68%, var(--bg));
}

.agent-event-assistant .chat-message-content {
  max-width: 720px;
}

.agent-event-error .chat-message-content {
  color: var(--danger);
}

.agent-run-details {
  color: var(--muted);
  font: 12px/1.4 var(--mono);
}

.agent-run-details summary {
  cursor: pointer;
  list-style: none;
}

.agent-run-details summary::-webkit-details-marker {
  display: none;
}

.agent-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.agent-kv {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--soft-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 45%, transparent);
}

.agent-kv dt {
  margin: 0 0 3px;
  color: color-mix(in srgb, var(--muted) 72%, var(--bg));
}

.agent-kv dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.agent-composer {
  width: min(760px, calc(100% - 48px));
  margin: 0 auto 22px;
  padding: 10px;
  border: 1px solid var(--soft-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 76%, var(--bg));
  box-shadow: var(--shadow);
}

.agent-composer textarea {
  min-height: 78px;
  max-height: 260px;
  padding: 6px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--fg);
  box-shadow: none;
  font: 15px/1.55 var(--font-sans);
  resize: vertical;
}

.agent-composer textarea:focus {
  border: 0;
  box-shadow: none;
}

.agent-composer-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.agent-state {
  min-width: 0;
  color: var(--muted);
  font: 11px/1.2 var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-os .btn-primary {
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--border));
  border-radius: 999px;
  background: var(--accent);
  color: color-mix(in srgb, var(--fg) 8%, white);
  box-shadow: none;
}

.agent-context {
  display: none;
}

.mono {
  font-family: var(--mono);
}

@media (max-width: 820px) {
  .console-topbar {
    height: auto;
    min-height: 52px;
    padding: 10px 12px;
  }

  .agent-os {
    min-height: calc(100dvh - 74px);
    grid-template-columns: 1fr;
  }

  .agent-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--soft-border);
  }

  .agent-main {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .agent-head {
    align-items: flex-start;
    flex-direction: column;
    padding: 12px 16px;
  }

  .agent-timeline {
    padding: 24px 16px 22px;
  }

  .agent-composer {
    width: calc(100% - 24px);
    margin-bottom: 12px;
  }

  .agent-tool-grid {
    grid-template-columns: 1fr;
  }
}