@oar-sh/oar 0.9.16 → 0.9.18

package/server/public/index.html

@@ -295,6 +295,18 @@
     --provider-cursor: #a78bfa;
     --provider-grok: #e879f9;
     --provider-claude-cloud: #7dd3fc;
+    /* DeepSeek's blue, toward indigo so it reads apart from Copilot's. */
+    --provider-deepseek: #8b9dff;
+    /* Claude on an API key: gold, beside the subscription's terracotta. */
+    --provider-claude-api: #e3b341;
+    /* The usage charts' series, in a fixed order (blue, orange, green,
+       amber; grey for "other"), stepped for the dark surface and checked
+       for colour-vision deficiency and contrast against it. */
+    --plan-usage-series-1: #3987e5;
+    --plan-usage-series-2: #d95926;
+    --plan-usage-series-3: #199e70;
+    --plan-usage-series-4: #c98500;
+    --plan-usage-series-5: #8b949e;
     --viewport-top-offset: 0px;
     --header-safe-top: max(env(safe-area-inset-top, 0px), var(--viewport-top-offset, 0px));
     --chat-header-top-base-desktop: 14px;
@@ -359,6 +371,14 @@
     --provider-cursor: #6b3fd4;
     --provider-grok: #a21caf;
     --provider-claude-cloud: #0369a1;
+    --provider-deepseek: #3b5bdb;
+    --provider-claude-api: #8a6100;
+    /* The same series order, stepped for the white surface. */
+    --plan-usage-series-1: #2a78d6;
+    --plan-usage-series-2: #eb6834;
+    --plan-usage-series-3: #1baf7a;
+    --plan-usage-series-4: #eda100;
+    --plan-usage-series-5: #656d76;
     --inline-code-bg: #eff1f3;
   }
   :root {
@@ -987,7 +1007,9 @@
   .conv-provider-indicator[data-provider="claude"] { color: var(--provider-claude); }
   .conv-provider-indicator[data-provider="cursor"] { color: var(--provider-cursor); }
   .conv-provider-indicator[data-provider="grok"] { color: var(--provider-grok); }
+  .conv-provider-indicator[data-provider="deepseek"] { color: var(--provider-deepseek); }
   .conv-provider-indicator[data-provider="claude-cloud"] { color: var(--provider-claude-cloud); }
+  .conv-provider-indicator[data-provider="claude-api"] { color: var(--provider-claude-api); }
   .conv-item.worker-ui-offline .conv-title,
   #chat-title[data-ui-state="offline"] { color: var(--conversation-title-offline); }
   /* Ready and idle: the darker green. Ready and working (a turn or
@@ -1455,6 +1477,112 @@
     font-size: var(--fs-meta-md);
     width: min(260px, 100%);
   }
+  /* The DeepSeek tab's key, base URL and monthly budget take the text
+     inputs' look (an input left to the browser is a white box in dark). */
+  #settings-provider-panel-deepseek input[type="password"],
+  #settings-provider-panel-deepseek input[type="url"],
+  #settings-provider-panel-deepseek input[type="number"] {
+    background: var(--bg);
+    color: var(--text);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 6px 12px;
+    outline: none;
+    font-size: var(--fs-meta-md);
+    width: min(360px, 100%);
+  }
+  /* A select is as wide as its longest option (the commit attribution's
+     runs to ~290 px): kept inside the panel on a narrow phone. */
+  #settings-provider-panel-deepseek select {
+    max-width: 100%;
+  }
+  /* Its links in the accent colour, as the usage card's: the browser's own
+     blue is unreadable on the dark panel. */
+  #settings-provider-panel-claude-api .settings-help a { color: var(--accent); text-decoration: none; }
+  #settings-provider-panel-claude-api .settings-help a:hover { text-decoration: underline; }
+  /* The Claude API tab's key and cap: the same text-input look. */
+  #settings-provider-panel-claude-api input[type="password"],
+  #settings-provider-panel-claude-api input[type="number"] {
+    background: var(--bg);
+    color: var(--text);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 6px 12px;
+    outline: none;
+    font-size: var(--fs-meta-md);
+    width: min(360px, 100%);
+  }
+  #settings-provider-panel-claude-api select {
+    max-width: 100%;
+  }
+  /* A cap the tab refuses: said under the field, which is marked too. */
+  /* Two classes: .settings-help, later in this sheet, would grey it out. */
+  .settings-help.claude-api-field-error { color: var(--danger); }
+  .settings-help.claude-api-field-error[hidden] { display: none; }
+  /* The native spin buttons of a number field follow the theme: light ones
+     on a dark field read as a glitch. */
+  :root:not([data-theme="light"]) input[type="number"] { color-scheme: dark; }
+  #settings-provider-panel-claude-api input[aria-invalid="true"] { border-color: var(--danger); }
+  /* Three buttons: they wrap on a phone instead of pushing the panel wide. */
+  .claude-api-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 8px;
+  }
+  .claude-api-shared-note .summary-btn {
+    margin-left: 6px;
+    padding: 2px 10px;
+  }
+  /* "No longer used" under the starting balance: the warning look of the
+     composer's model banner, apart from the help text above it. */
+  #deepseek-starting-balance-status {
+    background: var(--bg2);
+    background: color-mix(in srgb, var(--warn) 14%, var(--bg2));
+    border: 1px solid var(--warn);
+    color: var(--warn);
+    border-radius: 8px;
+    padding: 6px 10px;
+    margin-top: 6px;
+  }
+  /* Import usage export: the two file pickers in the panel's colours, their
+     button drawn like the panel's other buttons. */
+  .deepseek-usage-import {
+    margin-top: 14px;
+    padding-top: 12px;
+    border-top: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 0;
+  }
+  .deepseek-usage-import-files {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: 6px 10px;
+    align-items: center;
+  }
+  .deepseek-usage-import input[type="file"] {
+    color: var(--text);
+    font-size: var(--fs-meta-md);
+    min-width: 0;
+    max-width: 100%;
+  }
+  .deepseek-usage-import input[type="file"]::file-selector-button {
+    border: 1px solid var(--border);
+    background: var(--bg2);
+    color: var(--text);
+    border-radius: 8px;
+    height: 30px;
+    padding: 0 10px;
+    margin-right: 8px;
+    font: inherit;
+    cursor: pointer;
+  }
+  .deepseek-usage-import-status:empty { display: none; }
+  @media (max-width: 520px) {
+    .deepseek-usage-import-files { grid-template-columns: minmax(0, 1fr); }
+  }
   .settings-row input[type="checkbox"] {
     width: 18px;
     height: 18px;
@@ -1476,9 +1604,9 @@
     font-size: var(--fs-meta-sm);
     line-height: 1.35;
   }
-  .settings-provider-status[data-state="active"] { color: #3fb950; }
+  .settings-provider-status[data-state="active"] { color: var(--success); }
   .settings-provider-status[data-state="saved"] { color: var(--accent); }
-  .settings-provider-status[data-state="error"] { color: #f85149; }
+  .settings-provider-status[data-state="error"] { color: var(--danger); }
   /* These rows are laid out as flex and hidden from script via `.hidden = true`.
      Their `display: flex` lives HERE rather than in a style="" attribute on
      purpose: an inline declaration outranks every selector-based rule (short of
@@ -2863,6 +2991,25 @@
     padding: 2px 0;
   }
   .plan-usage-details summary:hover { color: var(--text); }
+  /* A card's figures (plan-usage-view.mjs renderFact): label and hint on the
+     left, the value on the right, one row each. */
+  .plan-usage-facts {
+    display: grid;
+    gap: 8px;
+    margin: 12px 0 0;
+    padding-top: 10px;
+    border-top: 1px solid var(--border);
+  }
+  .plan-usage-fact {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+    font-size: 0.84rem;
+  }
+  .plan-usage-fact dt { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-weight: 500; }
+  .plan-usage-fact-hint { font-size: 0.72rem; font-weight: 400; color: var(--muted); }
+  .plan-usage-fact dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
   .plan-usage-detail-note {
     font-size: 0.74rem;
     color: var(--muted);
@@ -2872,14 +3019,22 @@
   .plan-usage-detail-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
   .plan-usage-detail-table td { padding: 5px 2px; border-bottom: 1px solid var(--border); }
   .plan-usage-detail-table tr:last-child td { border-bottom: none; }
-  .plan-usage-detail-label { display: flex; flex-direction: column; gap: 2px; }
-  .plan-usage-detail-hint { font-size: 0.7rem; color: var(--muted); }
+  /* The label cell stays a table cell (a flex cell does not stretch to the
+     row, and its border then steps against the value's): the hint goes
+     under the label as a block. */
+  .plan-usage-detail-hint { display: block; margin-top: 2px; font-size: 0.7rem; color: var(--muted); }
   .plan-usage-detail-value {
     text-align: right;
     font-variant-numeric: tabular-nums;
     white-space: nowrap;
     vertical-align: top;
   }
+  /* On a phone a long value (tokens by model) wraps instead of pushing the
+     card wider than the screen. */
+  @media (max-width: 520px) {
+    .plan-usage-details .plan-usage-detail-value { white-space: normal; }
+  }
+  .plan-usage-detail-part { white-space: nowrap; }
   .plan-usage-card-foot {
     display: flex;
     align-items: center;
@@ -2892,6 +3047,145 @@
   }
   .plan-usage-link { color: var(--accent); text-decoration: none; }
   .plan-usage-link:hover { text-decoration: underline; }
+  /* Usage charts (plan-usage-view.mjs renderChart): stacked columns and
+     bars from the theme's series colours; text stays in the text colours. */
+  .plan-usage-chart {
+    margin: 12px 0 0;
+    padding-top: 10px;
+    border-top: 1px solid var(--border);
+  }
+  .plan-usage-chart-head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 10px;
+    flex-wrap: wrap;
+    margin-bottom: 8px;
+  }
+  .plan-usage-chart-label { font-size: 0.88rem; font-weight: 600; }
+  .plan-usage-chart-summary { font-size: 0.82rem; color: var(--text); font-variant-numeric: tabular-nums; }
+  .plan-usage-chart-columns {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(var(--plan-usage-columns, 30), minmax(0, 1fr));
+    gap: 2px;
+    height: 72px;
+    padding-bottom: 18px;
+    border-bottom: 1px solid var(--border);
+  }
+  .plan-usage-chart-col {
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+    min-width: 0;
+    height: 100%;
+    border-radius: 2px;
+    outline: none;
+  }
+  .plan-usage-chart-col:hover, .plan-usage-chart-col:focus-visible { background: var(--bg3); }
+  .plan-usage-chart-col:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
+  .plan-usage-chart-stack {
+    display: flex;
+    flex-direction: column-reverse;
+    width: 100%;
+    height: 100%;
+    justify-content: flex-start;
+  }
+  .plan-usage-chart-col-empty .plan-usage-chart-stack::before {
+    content: '';
+    display: block;
+    height: 2px;
+    background: var(--border);
+  }
+  .plan-usage-chart-columns .plan-usage-chart-seg {
+    display: block;
+    width: 100%;
+    min-height: 2px;
+    margin-top: 2px;
+  }
+  .plan-usage-chart-columns .plan-usage-chart-seg:last-child { border-radius: 4px 4px 0 0; }
+  .plan-usage-chart-axis {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.68rem;
+    color: var(--muted);
+  }
+  .plan-usage-chart-bars { display: flex; flex-direction: column; gap: 8px; }
+  .plan-usage-chart-row {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(80px, 1fr) 3fr auto;
+    align-items: center;
+    gap: 10px;
+    font-size: 0.82rem;
+    border-radius: 4px;
+    outline: none;
+  }
+  .plan-usage-chart-row:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
+  /* A model's name wraps on a narrow screen rather than being cut. */
+  .plan-usage-chart-row-label { min-width: 0; line-height: 1.25; overflow-wrap: anywhere; }
+  .plan-usage-chart-row-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
+  .plan-usage-chart-bar {
+    display: flex;
+    gap: 2px;
+    height: 14px;
+    border-radius: 4px;
+    overflow: hidden;
+    background: var(--bg3);
+  }
+  .plan-usage-chart-bar .plan-usage-chart-seg { display: block; height: 100%; min-width: 2px; }
+  .plan-usage-chart-bar .plan-usage-chart-seg:first-child { border-radius: 4px 0 0 4px; }
+  .plan-usage-chart-bar .plan-usage-chart-seg:last-child { border-radius: 0 4px 4px 0; }
+  .plan-usage-chart-tip {
+    display: none;
+    position: absolute;
+    bottom: calc(100% + 4px);
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 2;
+    max-width: 260px;
+    padding: 4px 8px;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    background: var(--bg2);
+    color: var(--text);
+    font-size: 0.74rem;
+    line-height: 1.4;
+    white-space: normal;
+    text-align: center;
+    pointer-events: none;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  }
+  .plan-usage-chart-col:hover .plan-usage-chart-tip,
+  .plan-usage-chart-col:focus .plan-usage-chart-tip,
+  .plan-usage-chart-row:hover .plan-usage-chart-tip,
+  .plan-usage-chart-row:focus .plan-usage-chart-tip { display: block; }
+  .plan-usage-chart-col .plan-usage-chart-tip { width: 180px; }
+  .plan-usage-chart-col:first-child .plan-usage-chart-tip,
+  .plan-usage-chart-col:nth-child(-n+6) .plan-usage-chart-tip { left: 0; transform: none; text-align: left; }
+  .plan-usage-chart-col:nth-last-child(-n+7):not(.plan-usage-chart-axis) .plan-usage-chart-tip { left: auto; right: 0; transform: none; text-align: right; }
+  .plan-usage-chart-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px 14px;
+    margin: 8px 0 0;
+    padding: 0;
+    list-style: none;
+    font-size: 0.74rem;
+    color: var(--muted);
+  }
+  .plan-usage-chart-legend li { display: inline-flex; align-items: center; gap: 5px; }
+  .plan-usage-chart-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
+  /* A table wider than a narrow screen scrolls inside the card. */
+  .plan-usage-chart-table { margin-top: 6px; font-size: 0.78rem; max-width: 100%; overflow-x: auto; }
+  .plan-usage-chart-table summary { cursor: pointer; color: var(--muted); padding: 2px 0; }
+  .plan-usage-chart-table summary:hover { color: var(--text); }
+  .plan-usage-chart-table th { text-align: left; font-weight: 500; color: var(--muted); padding: 4px 2px; border-bottom: 1px solid var(--border); }
+  .plan-usage-chart-table thead th:not(:first-child) { text-align: right; }
   /* About OAR: the plan-usage cards and tables, stacked. */
   .about-modal { display: flex; flex-direction: column; gap: 12px; }
   .about-section .plan-usage-card-head { margin-bottom: 4px; }
@@ -3083,6 +3377,9 @@
     box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
     pointer-events: none;
   }
+  /* The light theme's --warn on the toast's tinted ground is about 3.6:1;
+     its text takes a darker amber (about 5.6:1), the border keeps --warn. */
+  :root[data-theme="light"] #relay-toast { color: #7d4e00; }
   #relay-toast.visible { display: block; }
   #relay-toast.has-action { pointer-events: auto; }
   .relay-toast-action {
@@ -3186,7 +3483,50 @@
   #model-lock-note[data-provider="claude"] { color: var(--provider-claude); }
   #model-lock-note[data-provider="cursor"] { color: var(--provider-cursor); }
   #model-lock-note[data-provider="grok"] { color: var(--provider-grok); }
+  #model-lock-note[data-provider="deepseek"] { color: var(--provider-deepseek); }
   #model-lock-note[data-provider="claude-cloud"] { color: var(--provider-claude-cloud); }
+  #model-lock-note[data-provider="claude-api"] { color: var(--provider-claude-api); }
+  /* The billing toggle of a Claude chat: a two-way switch in the provider
+     colours, with what a pending switch waits for beside it. It wraps under
+     the switch on a phone instead of widening the composer. */
+  .claude-billing-toggle {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px 10px;
+    margin-bottom: 6px;
+    min-width: 0;
+    font-size: var(--fs-meta-sm);
+  }
+  .claude-billing-toggle[hidden] { display: none; }
+  .claude-billing-label { color: var(--muted); font-weight: 600; }
+  .claude-billing-options {
+    display: inline-flex;
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    overflow: hidden;
+    flex: 0 0 auto;
+  }
+  .claude-billing-option {
+    border: 0;
+    background: transparent;
+    color: var(--muted);
+    font: inherit;
+    font-weight: 600;
+    padding: 3px 12px;
+    min-height: 26px;
+    cursor: pointer;
+  }
+  .claude-billing-option + .claude-billing-option { border-left: 1px solid var(--border); }
+  .claude-billing-option[aria-pressed="true"] { cursor: default; color: var(--bg); }
+  .claude-billing-option[aria-pressed="true"][data-billing="claude"] { background: var(--provider-claude); }
+  .claude-billing-option[aria-pressed="true"][data-billing="claude-api"] { background: var(--provider-claude-api); }
+  .claude-billing-option[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
+  .claude-billing-option:not([aria-pressed="true"]):not([aria-disabled="true"]):hover { color: var(--text); }
+  .claude-billing-option:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+  .claude-billing-status { flex: 1 1 14em; min-width: 0; color: var(--muted); line-height: 1.4; }
+  .claude-billing-status:empty { display: none; }
+  .claude-billing-status[data-kind="warning"] { color: var(--warn); }
   /* Claude Cloud conversations (claude-cloud-conversation-ui.js): where the
      session runs and what it pushed, above the composer like the lock note.
      The items wrap instead of scrolling, so a long branch name can never push
@@ -4092,6 +4432,7 @@
   body.shared-reader-mode #reasoning-effort-select,
   body.shared-reader-mode #send-btn,
   body.shared-reader-mode #model-lock-note,
+  body.shared-reader-mode #claude-billing-toggle,
   body.shared-reader-mode #cloud-session-line,
   body.shared-reader-mode #model-pricing-details {
     display: none !important;
@@ -4578,6 +4919,14 @@
     min-height: 42px;
     margin-top: 8px;
   }
+  /* The selects take the inputs' look too: left to the browser they stay a
+     white box with black text in the dark theme. */
+  #new-conversation-provider-select,
+  #new-conversation-model-select,
+  #new-conversation-reasoning-select,
+  #new-conversation-context-select,
+  #new-conversation-size-select,
+  #new-conversation-cwd-select,
   #new-conversation-cwd-manual,
   #new-conversation-cloud-repo,
   #new-conversation-cloud-branch {
@@ -4589,6 +4938,18 @@
     color: var(--text);
   }
   #new-conversation-cwd-manual[hidden] { display: none; }
+  /* With the inputs' colours a disabled select (the read-only context row,
+     the effort before a model is chosen) would look editable: dimmed as in
+     the composer. */
+  #new-conversation-provider-select:disabled,
+  #new-conversation-model-select:disabled,
+  #new-conversation-reasoning-select:disabled,
+  #new-conversation-context-select:disabled,
+  #new-conversation-size-select:disabled,
+  #new-conversation-cwd-select:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
   #new-conversation-cloud-repo[aria-invalid="true"],
   #new-conversation-cloud-branch[aria-invalid="true"] { border-color: var(--danger); }
   /* Warning lines under Repository/Branch: what the cloud clone will not see. */
@@ -4961,6 +5322,13 @@
     line-height: 1.5;
   }
   .new-conversation-setup-note[hidden] { display: none; }
+  .new-conversation-refusal { border-left-color: var(--warn); }
+  .new-conversation-refusal-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 8px;
+  }
   .summary-close {
     width: 32px;
     padding: 0;
@@ -6389,37 +6757,51 @@
     .conv-item.conv-drag-ghost { margin: -18px 0 0; }
     .conv-item.conv-drop-before::before,
     .conv-item.conv-drop-after::after { height: 4px; }
+    /* Two rows on a phone: ☰, the title and the buttons on the first; the
+       origin line, the chips and the folder on a second row across the whole
+       header. The title column dissolves (display: contents) so its lines
+       become the header's own flex items; ::after breaks the row after the
+       buttons. The row gap is 0 and the second row's items carry their own
+       top margin, so a header with nothing below the title stays one row. */
     #chat-header {
       padding: var(--chat-header-top-pad-mobile) 10px 10px;
-      gap: 6px 8px;
-      flex-wrap: nowrap;
+      gap: 0 8px;
+      flex-wrap: wrap;
       align-items: center;
       position: relative;
       z-index: 30;
     }
-    #chat-title-wrap {
-      flex: 1 1 auto;
-      width: auto;
-      min-width: 0;
-      flex-wrap: nowrap;
-      align-items: flex-start;
-      gap: 6px;
-    }
-    #chat-title-slot {
-      display: flex;
-      flex-direction: column;
-      flex: 1 1 auto;
-      width: auto;
-      margin: 0;
-      min-width: 0;
+    #chat-header::after {
+      content: '';
+      order: 4;
+      flex: 0 0 100%;
+      height: 0;
     }
+    #chat-title-wrap,
+    #chat-title-slot { display: contents; }
     #chat-title-primary {
-      display: block;
+      order: 2;
+      flex: 1 1 0;
       min-width: 0;
     }
+    #chat-title-origin,
+    #chat-title-relay-events,
+    #chat-title-relay-schedules,
+    #chat-title-cwd,
+    #chat-title-session-usage {
+      order: 5;
+      flex: 0 1 auto;
+      max-width: 100%;
+      margin-top: 4px;
+    }
+    #chat-title-relay-events,
+    #chat-title-relay-schedules { flex-shrink: 0; }
+    #chat-title-relay-events .relay-watch-chip,
+    #chat-title-relay-events .conv-watched-badge,
+    #chat-title-relay-schedules .relay-watch-chip { white-space: nowrap; }
+    #chat-title-primary { display: block; }
     #chat-title-cwd {
       display: block;
-      margin-top: 1px;
       font-size: clamp(0.62rem, 2vw, 0.7rem);
       line-height: 1.2;
       min-width: 0;
@@ -6429,7 +6811,6 @@
     }
     #chat-title-session-usage {
       display: block;
-      margin-top: 1px;
       font-size: clamp(0.62rem, 2vw, 0.7rem);
       line-height: 1.2;
       min-width: 0;
@@ -6437,10 +6818,7 @@
       overflow: hidden;
       text-overflow: ellipsis;
     }
-    #chat-title-origin {
-      margin-top: 1px;
-      font-size: clamp(0.62rem, 2vw, 0.7rem);
-    }
+    #chat-title-origin { font-size: clamp(0.62rem, 2vw, 0.7rem); }
     #chat-header-actions {
       margin-left: auto;
     }
@@ -6449,6 +6827,7 @@
       flex: 0 0 auto;
     }
     #chat-title-editor {
+      order: 2;
       flex: 1 0 100%;
       width: 100%;
       flex-wrap: wrap;
@@ -6457,9 +6836,6 @@
     body.chat-title-editing #chat-header-actions {
       align-self: flex-start;
     }
-    body.chat-title-editing #chat-title-wrap {
-      z-index: 40;
-    }
     body.chat-title-editing #chat-title-editor {
       position: fixed;
       left: 10px;
@@ -6504,7 +6880,6 @@
       color: var(--relay-tone-tunnelled);
       text-shadow: 0 0 8px rgba(210, 153, 34, 0.35);
     }
-    #chat-title-wrap { order: 2; }
     #chat-header-actions { order: 3; }
     #chat-title { font-size: clamp(0.92rem, 3vw, 0.98rem); }
     #chat-title-input,
@@ -6777,13 +7152,20 @@
       flex: 0 0 auto;
       min-width: 40px;
     }
-    /* About OAR: the same, with Refresh beside the close button. */
-    #summary-modal[data-kind="about"] .summary-header-actions {
+    /* About OAR, Plan usage and Settings: the same, with Refresh (where
+       there is one) beside the close button, and the title cut with an
+       ellipsis if it must be. */
+    #summary-modal[data-kind="about"] .summary-header-actions,
+    #summary-modal[data-kind="usage"] .summary-header-actions,
+    #settings-modal .summary-header-actions {
       width: auto;
       flex: 0 0 auto;
     }
     #summary-modal[data-kind="about"] .summary-header-actions .summary-btn,
-    #summary-modal[data-kind="about"] .summary-header-actions .summary-close {
+    #summary-modal[data-kind="about"] .summary-header-actions .summary-close,
+    #summary-modal[data-kind="usage"] .summary-header-actions .summary-btn,
+    #summary-modal[data-kind="usage"] .summary-header-actions .summary-close,
+    #settings-modal .summary-header-actions .summary-close {
       flex: 0 0 auto;
       min-width: 40px;
     }
@@ -7111,6 +7493,8 @@
       <div id="model-banner"></div>
       <div id="usage-limit-banner" role="status" aria-live="polite" hidden></div>
       <div id="model-lock-note" hidden></div>
+      <!-- Subscription | API key in a Claude chat (claude-billing-toggle-ui.js). -->
+      <div id="claude-billing-toggle" class="claude-billing-toggle" hidden></div>
       <div id="cloud-session-line" aria-label="Cloud session" hidden></div>
       <div id="model-metadata-blocker" aria-live="polite">
         <span id="model-metadata-blocker-text">Model metadata is unavailable. Refresh to choose a model and reasoning effort.</span>
@@ -7580,6 +7964,16 @@
             tabindex="-1"
             data-settings-provider-tab="claude"
           >Claude</button>
+          <button
+            id="settings-provider-tab-claude-api"
+            class="settings-tab settings-subtab"
+            type="button"
+            role="tab"
+            aria-selected="false"
+            aria-controls="settings-provider-panel-claude-api"
+            tabindex="-1"
+            data-settings-provider-tab="claude-api"
+          >Claude API</button>
           <button
             id="settings-provider-tab-claude-cloud"
             class="settings-tab settings-subtab"
@@ -7610,6 +8004,16 @@
             tabindex="-1"
             data-settings-provider-tab="cursor"
           >Cursor</button>
+          <button
+            id="settings-provider-tab-deepseek"
+            class="settings-tab settings-subtab"
+            type="button"
+            role="tab"
+            aria-selected="false"
+            aria-controls="settings-provider-panel-deepseek"
+            tabindex="-1"
+            data-settings-provider-tab="deepseek"
+          >DeepSeek</button>
         </div>
         <div
           id="settings-provider-panel-copilot"
@@ -7804,6 +8208,63 @@
             <div class="settings-help">Runs Claude conversations through the Claude Agent SDK using the relay host's logged-in Claude credentials (no API key stored). Disabling also rebinds conversations that have not sent a message yet.</div>
           </div>
         </div>
+        <!-- Claude API (claude-api-settings-ui.js): Claude chats on a Claude Console
+             API key. The key is write-only; the relay never sends it back. -->
+        <div
+          id="settings-provider-panel-claude-api"
+          class="settings-panel"
+          role="tabpanel"
+          tabindex="0"
+          aria-labelledby="settings-provider-tab-claude-api"
+          data-settings-provider-panel="claude-api"
+          hidden
+        >
+          <div class="settings-row settings-row-column" style="margin-top: 12px; margin-bottom: 0;">
+            <label for="claude-api-key-input">Claude API</label>
+            <div class="settings-row" style="width: 100%; margin-bottom: 8px;">
+              <label for="claude-api-enabled-toggle">Enable Claude API for New Chat and the billing switch</label>
+              <input id="claude-api-enabled-toggle" type="checkbox" onchange="toggleClaudeApiProvider(this.checked)" disabled>
+            </div>
+            <input
+              id="claude-api-key-input"
+              type="password"
+              autocomplete="new-password"
+              autocapitalize="off"
+              spellcheck="false"
+              placeholder="Claude Console API key…"
+              aria-label="Claude API key"
+              aria-describedby="claude-api-key-help"
+            >
+            <div id="claude-api-key-help" class="settings-help">An API key from the Claude Console (<a href="https://platform.claude.com/settings/keys" target="_blank" rel="noopener noreferrer">platform.claude.com → API keys</a>). It is stored on the relay host, never sent back to a browser, and used only for Claude API chats and for listing the key's models. Claude login tokens and Admin keys are refused.</div>
+            <label for="claude-api-model-select" style="margin-top: 8px;">Default model</label>
+            <select id="claude-api-model-select" aria-label="Claude API default model"></select>
+            <div id="claude-api-models-status" class="settings-help" hidden></div>
+            <label for="claude-api-monthly-cap-input" style="margin-top: 8px;">Monthly cap in US dollars (optional)</label>
+            <input
+              id="claude-api-monthly-cap-input"
+              type="number"
+              inputmode="decimal"
+              min="0.01"
+              max="1000000"
+              step="0.01"
+              placeholder="No cap"
+              aria-label="Claude API monthly cap in US dollars"
+              aria-describedby="claude-api-monthly-cap-error claude-api-monthly-cap-help"
+            >
+            <div id="claude-api-monthly-cap-error" class="settings-help claude-api-field-error" role="alert" hidden></div>
+            <div id="claude-api-monthly-cap-help" class="settings-help">Once this relay's estimated Claude API spend of the calendar month reaches the cap, new API key turns and switches to the API key are refused; a running turn finishes. Leave it empty for no cap. Spend limits set in the Claude Console apply on top.</div>
+            <div id="claude-api-settings-status" class="settings-help settings-provider-status">Loading Claude API settings…</div>
+            <div class="claude-api-actions">
+              <button id="claude-api-save-btn" type="button" class="summary-btn" onclick="saveClaudeApiSettings()">Save Claude API settings</button>
+              <button id="claude-api-refresh-btn" type="button" class="summary-btn" onclick="refreshClaudeApiModels()" disabled>Refresh models</button>
+              <button id="claude-api-remove-btn" type="button" class="summary-btn" onclick="removeClaudeApiSettings()" disabled>Remove saved key</button>
+            </div>
+            <div class="settings-help">Claude API chats run Claude Code on the relay host like Claude chats, on this key instead of the host's Claude login, and are billed to the Claude Console organisation the key belongs to. A Claude chat can switch between the subscription and the API key from its composer. Credit and spend limits are in the Console: <a href="https://platform.claude.com/settings/billing" target="_blank" rel="noopener noreferrer">billing</a>, <a href="https://platform.claude.com/settings/limits" target="_blank" rel="noopener noreferrer">limits</a>.</div>
+            <div class="settings-help claude-api-shared-note">Commit attribution, the background command limit, the effort levels and the compaction window are shared with Claude chats and set on the Claude tab.
+              <button id="claude-api-open-claude-tab-btn" type="button" class="summary-btn" onclick="openClaudeTabFromClaudeApi()">Claude tab</button>
+            </div>
+          </div>
+        </div>
         <!-- Claude Cloud (claude-cloud-settings-ui.js). The login itself is managed on
              the Claude tab; this panel only says which account pays. -->
         <div
@@ -8047,6 +8508,104 @@
             <div class="settings-help">Unlocks the live percentage bars on Check Usage: "Plan usage (total)", "Auto + Composer" and "API". Detected automatically from this machine's Cursor IDE login when one exists; paste the <code>WorkosCursorSessionToken</code> cookie from a logged-in cursor.com tab (DevTools → Application → Cookies) only for headless relay hosts or to use a different account. Headless hosts can also set <code>CURSOR_SESSION_TOKEN</code> in the relay environment. Tokens stay on the relay.</div>
           </div>
         </div>
+        <div
+          id="settings-provider-panel-deepseek"
+          class="settings-panel"
+          role="tabpanel"
+          tabindex="0"
+          aria-labelledby="settings-provider-tab-deepseek"
+          data-settings-provider-panel="deepseek"
+          hidden
+        >
+          <div class="settings-row settings-row-column" style="margin-top: 12px; margin-bottom: 0;">
+            <label for="deepseek-api-key-input">DeepSeek</label>
+            <div class="settings-row" style="width: 100%; margin-bottom: 8px;">
+              <label for="deepseek-enabled-toggle">Enable DeepSeek for New Chat model selection</label>
+              <input id="deepseek-enabled-toggle" type="checkbox" onchange="toggleDeepSeekProvider(this.checked)" disabled>
+            </div>
+            <input
+              id="deepseek-api-key-input"
+              type="password"
+              autocomplete="off"
+              placeholder="DeepSeek API key…"
+              aria-label="DeepSeek API key"
+            >
+            <label for="deepseek-model-select" style="margin-top: 8px;">Default model</label>
+            <select id="deepseek-model-select" aria-label="DeepSeek default model">
+              <option value="deepseek-flash">deepseek-flash</option>
+              <option value="deepseek-v4-pro">deepseek-v4-pro</option>
+            </select>
+            <label for="deepseek-attribution-select" style="margin-top: 8px;">Commit attribution</label>
+            <select id="deepseek-attribution-select" aria-label="DeepSeek commit attribution">
+              <option value="oar">OAR: Co-authored-by: Open Agent Relay (DeepSeek …)</option>
+              <option value="off">Off: no attribution</option>
+            </select>
+            <label for="deepseek-monthly-budget-input" style="margin-top: 8px;">Monthly budget (optional)</label>
+            <input
+              id="deepseek-monthly-budget-input"
+              type="number"
+              inputmode="decimal"
+              min="0"
+              step="0.01"
+              autocomplete="off"
+              placeholder="No budget bar"
+              aria-label="DeepSeek monthly budget"
+            >
+            <label for="deepseek-monthly-budget-currency-select" style="margin-top: 8px;">Budget currency</label>
+            <select id="deepseek-monthly-budget-currency-select" aria-label="DeepSeek monthly budget currency">
+              <option value="USD">USD ($)</option>
+              <option value="CNY">CNY (¥)</option>
+              <option value="">The balance's currency (may change)</option>
+            </select>
+            <div class="settings-help">The usage card shows this relay's estimated DeepSeek spend of the calendar month (UTC) against the budget, in the budget's currency. The bar changes colour at 50 % and 75 % of the budget and turns red at 90 %. Leave the amount empty for no budget bar.</div>
+            <label for="deepseek-starting-balance-input" style="margin-top: 8px;">Starting balance (optional)</label>
+            <input
+              id="deepseek-starting-balance-input"
+              type="number"
+              inputmode="decimal"
+              min="0"
+              step="0.01"
+              autocomplete="off"
+              placeholder="The balance after the last top-up"
+              aria-label="DeepSeek starting balance"
+              aria-describedby="deepseek-starting-balance-help"
+            >
+            <div id="deepseek-starting-balance-help" class="settings-help">The usage card's balance bar measures what is left against this amount, in the balance's currency, for example your first top-up. Leave it empty to measure from the balance after the last top-up this relay has seen (before it has seen one, the highest balance it has read).</div>
+            <div id="deepseek-starting-balance-status" class="settings-help" hidden></div>
+            <details id="deepseek-advanced" style="margin-top: 8px;">
+              <summary>Advanced</summary>
+              <label for="deepseek-base-url-input" style="margin-top: 8px;">Base URL</label>
+              <input
+                id="deepseek-base-url-input"
+                type="url"
+                autocomplete="off"
+                placeholder="https://api.deepseek.com"
+                aria-label="DeepSeek base URL"
+              >
+              <div class="settings-help">Leave empty for DeepSeek's own API. Another address must use https (http only on this machine, for a local proxy); the key is sent there and nowhere else.</div>
+            </details>
+            <div id="deepseek-settings-status" class="settings-help settings-provider-status">Loading DeepSeek settings…</div>
+            <div style="display: flex; gap: 8px; margin-top: 8px;">
+              <button id="deepseek-save-btn" type="button" class="summary-btn" onclick="saveDeepSeekSettings()">Save DeepSeek settings</button>
+              <button id="deepseek-remove-btn" type="button" class="summary-btn" onclick="removeDeepSeekSettings()">Remove saved key</button>
+            </div>
+            <div class="settings-help">DeepSeek chats run Claude Code on the relay host against DeepSeek's Anthropic-compatible API, with all four modes, tools and question cards. The key is stored on the relay host and never sent to browsers; saving it lists DeepSeek's models. Turns are billed to the DeepSeek account the key belongs to.</div>
+            <div id="deepseek-usage-import" class="deepseek-usage-import" role="group" aria-labelledby="deepseek-usage-import-title">
+              <label id="deepseek-usage-import-title">Import usage export</label>
+              <div class="settings-help">DeepSeek's usage page exports two files for a period, amount and cost. Imported here, their figures for the saved key replace the estimate on the usage card for the days they cover; the other days stay estimated.</div>
+              <div class="deepseek-usage-import-files">
+                <label for="deepseek-usage-amount-input" class="settings-help">Amount file</label>
+                <input id="deepseek-usage-amount-input" type="file" accept=".csv,text/csv" aria-label="DeepSeek usage export: amount file">
+                <label for="deepseek-usage-cost-input" class="settings-help">Cost file</label>
+                <input id="deepseek-usage-cost-input" type="file" accept=".csv,text/csv" aria-label="DeepSeek usage export: cost file">
+              </div>
+              <div>
+                <button id="deepseek-usage-import-btn" type="button" class="summary-btn" onclick="importDeepSeekUsageExport()">Import usage export</button>
+              </div>
+              <div id="deepseek-usage-import-status" class="settings-help settings-provider-status deepseek-usage-import-status" role="status" aria-live="polite"></div>
+            </div>
+          </div>
+        </div>
       </div>
       <div
         id="settings-panel-relays"
@@ -8383,6 +8942,8 @@
            Settings is the main button; Start stays as "anyway", because the
            Copilot signal can be wrong. -->
       <div id="new-conversation-setup-note" class="new-conversation-setup-note" role="status" hidden></div>
+      <!-- Claude API refused to start the chat (journal-view.js). -->
+      <div id="new-conversation-refusal" class="new-conversation-setup-note new-conversation-refusal" role="alert" hidden></div>
       <div class="summary-modal-actions">
         <button type="button" class="summary-btn" onclick="closeNewConversationModelModal()">Cancel</button>
         <button id="new-conversation-open-settings" type="button" class="summary-btn summary-btn-accent" hidden>Open Settings → Providers</button>