@oar-sh/oar 0.9.5 → 0.9.7

package/server/public/index.html

@@ -173,7 +173,7 @@
 </script>
 <title>OAR — Open Agent Relay</title>
 <script>document.write('<scr'+'ipt src="'+__APP_BASE+'/socket.io/socket.io.js"><\/scr'+'ipt>');</script>
-<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/marked@15.0.12/marked.min.js"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css">
 <script src="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/contrib/mhchem.min.js"></script>
@@ -256,6 +256,7 @@
     --provider-claude: #e0855a;
     --provider-cursor: #a78bfa;
     --provider-grok: #e879f9;
+    --provider-claude-cloud: #7dd3fc;
     --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;
@@ -317,6 +318,7 @@
     --provider-claude: #b4531f;
     --provider-cursor: #6b3fd4;
     --provider-grok: #a21caf;
+    --provider-claude-cloud: #0369a1;
     --inline-code-bg: #eff1f3;
   }
   :root {
@@ -541,7 +543,7 @@
     border-radius: 8px;
     background: var(--bg2);
     color: var(--text);
-    padding: 0 38px 0 10px;
+    padding: 0 76px 0 10px;
     font-size: var(--fs-meta-md);
   }
   /* iOS Safari zooms the page on focus for inputs under 16px, and the mobile
@@ -724,6 +726,7 @@
   .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="claude-cloud"] { color: var(--provider-claude-cloud); }
   .conv-item.worker-ui-offline .conv-title,
   #chat-title[data-ui-state="offline"] { color: var(--conversation-title-offline); }
   .conv-item.worker-ui-ready .conv-title,
@@ -744,6 +747,70 @@
   }
   .conv-item:hover .conv-delete { opacity: 1; }
   .conv-delete:hover { color: var(--danger); }
+  /* Archive / unarchive sits left of the bin, shown on hover like it. */
+  .conv-archive {
+    position: absolute; right: 34px; top: 50%; transform: translateY(-50%);
+    background: none; border: none; color: var(--muted); cursor: pointer; font-size: var(--fs-ui-icon);
+    opacity: 0; transition: opacity 0.15s; padding: 4px;
+  }
+  .conv-item:hover .conv-archive { opacity: 1; }
+  .conv-archive:hover { color: var(--text); }
+  .conv-item.archived .conv-title { color: var(--muted); }
+  /* The Archived view: a toggle in the filter row, a banner above the list. */
+  #conv-archived-toggle {
+    position: absolute;
+    top: 50%;
+    right: 46px;
+    transform: translateY(-50%);
+    height: 28px;
+    min-width: 28px;
+    padding: 0 6px;
+    border: 1px solid transparent;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--muted);
+    cursor: pointer;
+    font-size: var(--fs-meta-md);
+  }
+  #conv-archived-toggle:hover { color: var(--text); border-color: var(--border); }
+  #conv-archived-toggle[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
+  #conv-archived-banner {
+    display: flex; align-items: center; justify-content: space-between; gap: 8px;
+    margin: 0 16px 6px; padding: 6px 10px;
+    border: 1px solid var(--border); border-radius: 8px; background: var(--bg2);
+    font-size: var(--fs-meta-sm); color: var(--muted);
+  }
+  #conv-archived-banner[hidden] { display: none; }
+  .conv-archived-back {
+    border: 1px solid var(--border); border-radius: 6px; background: var(--bg3); color: var(--text);
+    font-size: var(--fs-meta-xs); padding: 2px 8px; cursor: pointer;
+  }
+  /* The conversation context menu (context-menu.mjs): right-click / long press. */
+  .context-menu {
+    position: fixed;
+    z-index: 1200;
+    min-width: 200px;
+    max-width: min(320px, calc(100vw - 8px));
+    padding: 4px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    background: var(--bg2);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+  }
+  .context-menu-item {
+    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px;
+    border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text);
+    padding: 0 10px; font: inherit; font-size: var(--fs-meta-md); text-align: left; cursor: pointer;
+    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
+  }
+  .context-menu-item:hover, .context-menu-item:focus-visible { background: var(--bg3); border-color: var(--border); outline: none; }
+  .context-menu-item:disabled { opacity: 0.5; cursor: not-allowed; }
+  .context-menu-item-danger { color: var(--danger); }
+  .context-menu-sep { height: 1px; margin: 3px 6px; background: var(--border); }
+  #conv-list .conv-item { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
   .conv-open-questions {
     display: inline-flex;
     margin-left: 6px;
@@ -1434,6 +1501,17 @@
     overflow-wrap: normal;
     word-break: normal;
   }
+  /* An inline formula breaks only between its terms: one long term is a box
+     wider than the bubble and made the whole bubble scroll sideways. It
+     scrolls inside itself instead. */
+  .msg-bubble :not(.katex-display) > .katex {
+    display: inline-block;
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    vertical-align: bottom;
+    -webkit-overflow-scrolling: touch;
+  }
   .katex-error {
     color: var(--danger);
     white-space: pre-wrap;
@@ -1451,6 +1529,7 @@
   .thinking-bubble a,
   .subagent-bubble a,
   .relay-question-card a,
+  .relay-board-body a,
   .workspace-file-link {
     color: var(--bubble-link);
     text-decoration-thickness: 1.2px;
@@ -1460,6 +1539,7 @@
   .thinking-bubble a:visited,
   .subagent-bubble a:visited,
   .relay-question-card a:visited,
+  .relay-board-body a:visited,
   .workspace-file-link:visited { color: var(--bubble-link); }
   .msg.user .msg-bubble code:not(pre code) {
     background: var(--user-bubble-chip-bg);
@@ -1701,6 +1781,44 @@
     margin-bottom: 6px;
     font-size: var(--fs-meta-sm);
   }
+  .subagent-bubble-header {
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .subagent-bubble-header:focus-visible {
+    outline: 2px solid var(--accent-color);
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+  .subagent-bubble-fold {
+    flex-shrink: 0;
+    width: 1em;
+    color: var(--muted);
+    text-align: center;
+  }
+  .subagent-bubble-fold::before { content: '▾'; }
+  .subagent-bubble.folded > .subagent-bubble-header > .subagent-bubble-fold::before { content: '▸'; }
+  /* Folded: the header alone. What the run wrote, thought and did, and the
+     runs it started, come back with a tap. */
+  .subagent-bubble.folded > :not(.subagent-bubble-header) { display: none; }
+  .subagent-bubble.folded > .subagent-bubble-header { margin-bottom: 0; }
+  .subagent-stop-btn[hidden] { display: none; }
+  /* The folded header's one line about the run. It takes the room the name
+     and the controls leave and is cut with an ellipsis; on a narrow bubble
+     that is little or nothing, and the name keeps its place. */
+  .subagent-bubble-summary {
+    display: none;
+    flex: 1 1 0;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--muted);
+    font-weight: 400;
+  }
+  .subagent-bubble.folded > .subagent-bubble-header > .subagent-bubble-summary { display: block; }
+  .subagent-bubble.folded > .subagent-bubble-header > .subagent-bubble-name { flex: 0 1 auto; max-width: 55%; }
+  .subagent-bubble.folded > .subagent-bubble-header > .subagent-bubble-summary:empty { flex-grow: 1; }
   .subagent-bubble-name {
     font-weight: 600;
     color: var(--text);
@@ -1981,6 +2099,14 @@
   }
   /* Claude-only thinking control (on/off + text visibility), under the
      auto-compact slider. */
+  /* The folder's commit attribution (attribution-control.mjs), styled like
+     the thinking rows above it. */
+  .ctx-attribution { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
+  .ctx-attribution-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+  .ctx-attribution-label { font-size: var(--fs-meta-sm); color: var(--muted); }
+  .ctx-attribution-select { font-size: var(--fs-meta-sm); max-width: 100%; }
+  .ctx-attribution-note { margin-top: 6px; font-size: var(--fs-meta-sm); color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
+  .ctx-attribution-note code { font-size: inherit; }
   .ctx-thinking {
     margin-top: 14px;
     padding-top: 12px;
@@ -2079,6 +2205,13 @@
   }
   .plan-usage-card[data-status="unavailable"],
   .plan-usage-card[data-status="not-configured"] { opacity: 0.72; }
+  /* A card whose provider is being read live while the kept reading shows. */
+  .plan-usage-card[data-updating] .plan-usage-card-title::after {
+    content: " · updating…";
+    font-weight: 400;
+    font-size: 0.78rem;
+    color: var(--muted);
+  }
   .plan-usage-card-head {
     display: flex;
     align-items: center;
@@ -2339,6 +2472,26 @@
     text-align: center;
   }
   #model-banner.visible { display: block; }
+  /* The Claude usage limit (usage-limit-ui.js): a warning before the limit,
+     and a turn paused at it with Resume now / Cancel. In the flow of the
+     composer like #model-banner, for the same reason. */
+  #usage-limit-banner {
+    display: none;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 6px 10px;
+    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-bottom: 10px;
+    font-size: var(--fs-meta-sm);
+  }
+  #usage-limit-banner.visible { display: flex; }
+  #usage-limit-banner .usage-limit-text { flex: 1 1 12em; min-width: 0; }
+  #usage-limit-banner .relay-toast-action { flex: 0 0 auto; }
   /* Transient relay notices (saves, errors, action confirmations) float as a
      fixed toast above every overlay — the annotation editor's error paths
      rely on being readable over its full-screen modal. pointer-events: none
@@ -2456,6 +2609,40 @@
   #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="claude-cloud"] { color: var(--provider-claude-cloud); }
+  /* 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
+     the composer wider than a phone. */
+  #cloud-session-line {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 2px 10px;
+    margin-bottom: 6px;
+    min-width: 0;
+    color: var(--muted);
+    font-size: var(--fs-meta-sm);
+    line-height: 1.4;
+  }
+  #cloud-session-line[hidden] { display: none; }
+  .cloud-line-item {
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  a.cloud-line-item { color: var(--accent); text-decoration: none; }
+  a.cloud-line-item:hover { text-decoration: underline; }
+  .cloud-line-repo { color: var(--provider-claude-cloud); font-weight: 600; }
+  a.cloud-line-repo { color: var(--provider-claude-cloud); }
+  /* No relay modes, no effort choice and no context tier in a cloud chat. */
+  body.claude-cloud-conversation #mode-select,
+  body.claude-cloud-conversation #context-tier-select,
+  body.claude-cloud-conversation #reasoning-effort-select {
+    display: none;
+  }
   #model-select:disabled,
   #reasoning-effort-select:disabled {
     opacity: 0.55;
@@ -2762,6 +2949,46 @@
     flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
     color: var(--muted); font-size: var(--fs-ui-chip);
   }
+  /* "via agent · “title”": an agent on this relay started the conversation.
+     A button while the conversation it runs in can be opened, a span when it
+     is gone. The title is long, so in the sidebar the date keeps its share. */
+  .conv-origin-marker.conv-origin-agent { max-width: 60%; }
+  button.conv-origin-agent,
+  button.msg-origin-badge {
+    font-family: inherit; cursor: pointer; text-align: left;
+    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
+  }
+  button.conv-origin-agent {
+    background: none; border: none; padding: 0; margin: 0; line-height: inherit;
+    color: var(--accent);
+  }
+  /* A finger needs more than one line of chip text: the padding grows the
+     button, the negative margin keeps the row's height. */
+  button.conv-origin-marker.conv-origin-agent { padding: 6px 0; margin: -6px 0; }
+  button.conv-origin-agent:hover,
+  button.msg-origin-badge:hover { text-decoration: underline; }
+  button.msg-origin-badge { color: inherit; }
+  #chat-title-origin {
+    display: block; margin-top: 2px; min-width: 0;
+    font-size: var(--fs-meta-xs); line-height: 1.2; color: var(--muted);
+    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
+  }
+  #chat-title-origin[hidden] { display: none; }
+  #chat-title-origin .conv-origin-agent {
+    display: block; max-width: 100%; font-size: inherit;
+    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
+  }
+  #chat-title-origin button.conv-origin-agent { padding: 3px 0; }
+  /* Agent sessions (Settings → Relays). The slider spans the row so a thumb
+     has room to travel at phone width, with a taller touch area than the
+     track itself. */
+  #agent-sessions-section[hidden] { display: none; }
+  #agent-sessions-max-wait-slider {
+    width: min(420px, 100%); min-height: 32px; margin: 0; box-sizing: border-box;
+    accent-color: var(--accent); touch-action: pan-y;
+  }
+  #agent-sessions-max-wait-slider:disabled { opacity: 0.5; }
+  #agent-sessions-status { overflow-wrap: anywhere; }
   /* Transcript card: a preview published during this turn, pinned into the
      response bubble. Compact single row; closed previews keep the label but
      lose the dead link. */
@@ -2805,6 +3032,11 @@
     background: rgba(63, 185, 80, 0.12); color: var(--relay-tone-online);
     border-radius: 6px; padding: 0 6px; font-size: var(--fs-meta-sm);
   }
+  /* The relay's note while a session's worker cannot be started
+     (worker-launch-note-service.mjs): a notice of the relay's, not a reply.
+     Amber while the relay keeps trying or has stopped, green once started. */
+  .msg.assistant.msg-worker-launch .msg-bubble { border-left: 3px solid #d29922; }
+  .msg.assistant.msg-worker-launch-started .msg-bubble { border-left-color: var(--relay-tone-online); }
   /* Mid-turn steering. The CLI usually FOLDS a steered message into the
      running turn and answers everything with one reply; the steered row then
      settles as a compact marker under its own message (kind='folded'). More
@@ -2866,6 +3098,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 #cloud-session-line,
   body.shared-reader-mode #model-pricing-details {
     display: none !important;
   }
@@ -3008,6 +3241,17 @@
   .file-preview-markdown th, .file-preview-markdown td { border: 1px solid var(--border); padding: 6px 9px; }
   .file-preview-markdown th { background: var(--bg3); }
   .file-preview-markdown img { display: block; max-width: 100%; height: auto; }
+  /* Without a colour of their own, links fell back to the browser's default
+     blue, which cannot be read on the dark background. The accent is the
+     calmer of the two blues: the bubbles' link colour is for a tinted bubble,
+     and on the viewer's plain background it glares. */
+  .file-preview-markdown a,
+  .file-preview-markdown a:visited {
+    color: var(--accent);
+    text-decoration-thickness: 1.2px;
+    text-underline-offset: 2px;
+  }
+  .file-preview-markdown a code { color: inherit; }
   .file-preview-markdown pre,
   .file-preview-code pre {
     background: #0b0f14;
@@ -3227,12 +3471,16 @@
   #new-conversation-context-select,
   #new-conversation-size-select,
   #new-conversation-cwd-select,
-  #new-conversation-cwd-manual {
+  #new-conversation-cwd-manual,
+  #new-conversation-cloud-repo,
+  #new-conversation-cloud-branch {
     width: 100%;
     min-height: 42px;
     margin-top: 8px;
   }
-  #new-conversation-cwd-manual {
+  #new-conversation-cwd-manual,
+  #new-conversation-cloud-repo,
+  #new-conversation-cloud-branch {
     box-sizing: border-box;
     padding: 0 10px;
     border-radius: 8px;
@@ -3241,6 +3489,84 @@
     color: var(--text);
   }
   #new-conversation-cwd-manual[hidden] { display: none; }
+  #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. */
+  #new-conversation-cloud-warnings {
+    margin-top: 8px;
+    font-size: 0.78rem;
+    line-height: 1.4;
+    color: var(--warn);
+    overflow-wrap: anywhere;
+  }
+  #new-conversation-cloud-warnings:empty { display: none; }
+  .new-conversation-cloud-warning::before { content: "⚠ "; }
+  #new-conversation-cloud-error {
+    margin-top: 8px;
+    font-size: 0.78rem;
+    line-height: 1.4;
+    color: var(--danger);
+    overflow-wrap: anywhere;
+  }
+  #new-conversation-cloud-error[hidden] { display: none; }
+  /* Suggestions under Repository/Branch: a list in the flow of the modal
+     (not a floating one: the modal scrolls on a phone and a popover would
+     be clipped), at most a few rows high, scrolling inside itself. */
+  .new-conversation-cloud-suggest {
+    margin-top: 4px;
+    max-height: min(40vh, 220px);
+    overflow-y: auto;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--bg3);
+  }
+  .new-conversation-cloud-suggest[hidden] { display: none; }
+  .new-conversation-cloud-suggest-item {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 8px;
+    width: 100%;
+    box-sizing: border-box;
+    min-height: 38px;
+    padding: 8px 10px;
+    border: 0;
+    border-bottom: 1px solid var(--border);
+    background: transparent;
+    color: var(--text);
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+    overflow-wrap: anywhere;
+  }
+  .new-conversation-cloud-suggest-item:last-child { border-bottom: 0; }
+  .new-conversation-cloud-suggest-item:hover,
+  .new-conversation-cloud-suggest-item[aria-selected="true"] { background: var(--bg2); }
+  .new-conversation-cloud-suggest-meta {
+    flex: 0 0 auto;
+    font-size: 0.72rem;
+    color: var(--muted);
+    white-space: nowrap;
+  }
+  .new-conversation-cloud-refresh {
+    margin-left: 6px;
+    padding: 0 6px;
+    min-height: 22px;
+    border: 1px solid transparent;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--muted);
+    font: inherit;
+    cursor: pointer;
+    vertical-align: middle;
+  }
+  .new-conversation-cloud-refresh:hover { color: var(--text); border-color: var(--border); }
+  .new-conversation-cloud-refresh[aria-busy="true"] { opacity: 0.5; cursor: progress; }
+  .new-conversation-cloud-suggest-note {
+    padding: 8px 10px;
+    font-size: 0.78rem;
+    color: var(--muted);
+  }
   /* Shared row/button recipe for the file-explorer CWD browse buttons in the
      New chat and Change CWD modals — one place to restyle both. */
   .cwd-browse-row {
@@ -4627,6 +4953,23 @@
        and overflow horizontally. Pin to 0 so children wrap/scroll instead. */
     min-width: 0;
   }
+  /* A board inside the bubble of the reply it belongs to: set off from the
+     reply's text by a rule, not by a card of its own. */
+  .relay-board-inline {
+    display: grid;
+    gap: 10px;
+    min-width: 0;
+    margin-top: 12px;
+    padding-top: 12px;
+    border-top: 1px solid rgba(80, 227, 194, 0.35);
+  }
+  .relay-board-inline.relay-board-card { margin-top: 0; border-top: 0; }
+  .relay-board-inline .relay-board-head { color: var(--text); font-weight: 600; font-size: var(--fs-meta-md); }
+  .relay-board-outcome {
+    color: var(--muted);
+    font-size: var(--fs-meta-md);
+  }
+  .relay-board-outcome::before { content: '✓ '; color: var(--success); }
   .relay-board-head {
     display: flex;
     align-items: center;
@@ -4738,6 +5081,7 @@
     #status-btn { min-width: 72px; padding: 9px 10px; font-size: var(--fs-meta-md); }
     #conv-filter-row { padding: 8px 12px; }
     #conv-filter-clear { right: 16px; }
+    #conv-archived-toggle { right: 42px; }
     #conv-list { padding: 0 5px 8px; }
     .conv-item { padding: 6px 11px; border-radius: 8px; }
     .conv-title {
@@ -4802,6 +5146,10 @@
       overflow: hidden;
       text-overflow: ellipsis;
     }
+    #chat-title-origin {
+      margin-top: 1px;
+      font-size: clamp(0.62rem, 2vw, 0.7rem);
+    }
     #chat-header-actions {
       margin-left: auto;
     }
@@ -4952,6 +5300,12 @@
       font-size: var(--fs-meta-md);
     }
     #attach-btn { order: 4; flex: 0 0 40px; }
+    /* A cloud chat hides mode, context tier and effort: the model select
+       takes the room they leave. */
+    body.claude-cloud-conversation #model-select {
+      flex: 1 1 0;
+      width: auto;
+    }
     #context-tier-select {
       order: 5;
       flex: 0 0 70px;
@@ -5269,8 +5623,10 @@
     <div id="conv-filter-row">
       <input id="conv-filter-input" type="text" placeholder="Filter conversations…" autocomplete="off" spellcheck="false" aria-label="Filter conversations by title">
       <button id="conv-filter-clear" type="button" title="Clear filter" aria-label="Clear filter" hidden>×</button>
+      <button id="conv-archived-toggle" type="button" title="Show archived conversations" aria-label="Show archived conversations" aria-pressed="false" onclick="toggleArchivedConversations()">🗄</button>
       <div id="conv-filter-status" role="status" aria-live="polite"></div>
     </div>
+    <div id="conv-archived-banner" hidden>Archived conversations <button type="button" class="conv-archived-back" onclick="toggleArchivedConversations()">Back to the list</button></div>
     <div id="conv-list"></div>
   </div>
   <div id="sidebar-resizer" role="separator" aria-orientation="vertical" aria-label="Resize conversations sidebar"></div>
@@ -5279,7 +5635,7 @@
     <div id="chat-header">
       <button id="sidebar-toggle" class="header-icon-btn" type="button" title="Toggle conversations sidebar" aria-label="Toggle conversations sidebar">☰</button>
       <div id="chat-title-wrap">
-        <span id="chat-title-slot"><span id="chat-title-primary"><span id="chat-title-watch-indicator" hidden>👁️ </span><span id="chat-title">Select or start a conversation</span></span><span id="chat-title-cwd" hidden></span><span id="chat-title-session-usage" hidden></span></span>
+        <span id="chat-title-slot"><span id="chat-title-primary"><span id="chat-title-watch-indicator" hidden>👁️ </span><span id="chat-title">Select or start a conversation</span></span><span id="chat-title-origin" hidden></span><span id="chat-title-cwd" hidden></span><span id="chat-title-session-usage" hidden></span></span>
         <form id="chat-title-editor" hidden>
           <input id="chat-title-input" type="text" maxlength="120" autocomplete="off" spellcheck="false">
           <button id="chat-title-save-btn" class="chat-title-action-btn" type="submit">Save</button>
@@ -5299,11 +5655,13 @@
             <button id="chat-menu-usage" class="chat-actions-menu-item" type="button" role="menuitem">📊 Check Usage</button>
             <button id="chat-menu-compact" class="chat-actions-menu-item" type="button" role="menuitem" hidden disabled aria-hidden="true" tabindex="-1" style="display:none">🗜️ Compact</button>
             <button id="chat-menu-share-conversation" class="chat-actions-menu-item" type="button" role="menuitem">➡️ Share conversation</button>
+            <button id="chat-menu-archive" class="chat-actions-menu-item" type="button" role="menuitem">🗄 Archive conversation</button>
             <button id="chat-menu-refresh-history" class="chat-actions-menu-item" type="button" role="menuitem" hidden disabled aria-hidden="true" tabindex="-1" style="display:none">🔄️ Refresh history</button>
             <button id="chat-menu-inspect-tmux" class="chat-actions-menu-item" type="button" role="menuitem">🖥️ Inspect tmux console</button>
             <button id="chat-menu-select-models" class="chat-actions-menu-item" type="button" role="menuitem">🤗 Select Models</button>
             <button id="chat-menu-change-cwd" class="chat-actions-menu-item" type="button" role="menuitem">🗂️ Change CWD</button>
             <button id="chat-menu-git-changes" class="chat-actions-menu-item" type="button" role="menuitem">🌿 Git changes</button>
+            <button id="chat-menu-open-cloud-session" class="chat-actions-menu-item" type="button" role="menuitem" hidden>☁️ Open on claude.ai</button>
             <button id="chat-menu-settings" class="chat-actions-menu-item" type="button" role="menuitem">⚙️ Settings</button>
             <button id="chat-menu-restart-relay" class="chat-actions-menu-item" type="button" role="menuitem">🌄 Restart web relay</button>
             <button id="chat-menu-suspend-host" class="chat-actions-menu-item" type="button" role="menuitem" onclick="openSuspendHostConfirmation()">💤 Suspend host</button>
@@ -5324,7 +5682,9 @@
     <div id="input-area">
       <div id="offline-banner">⚠️ CLI is offline — messages will queue until it reconnects</div>
       <div id="model-banner"></div>
+      <div id="usage-limit-banner" role="status" aria-live="polite" hidden></div>
       <div id="model-lock-note" 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>
         <button type="button" id="model-metadata-retry-btn">Refresh models</button>
@@ -5705,6 +6065,16 @@
             tabindex="-1"
             data-settings-provider-tab="claude"
           >Claude</button>
+          <button
+            id="settings-provider-tab-claude-cloud"
+            class="settings-tab settings-subtab"
+            type="button"
+            role="tab"
+            aria-selected="false"
+            aria-controls="settings-provider-panel-claude-cloud"
+            tabindex="-1"
+            data-settings-provider-tab="claude-cloud"
+          >Claude Cloud</button>
           <button
             id="settings-provider-tab-grok"
             class="settings-tab settings-subtab"
@@ -5893,6 +6263,13 @@
               placeholder="claude-sonnet-5"
               aria-label="Claude model ID"
             >
+            <label for="claude-attribution-select" style="margin-top: 8px;">Commit attribution</label>
+            <select id="claude-attribution-select" aria-label="Commit attribution" onchange="window.previewClaudeAttribution?.(this.value)">
+              <option value="oar">OAR — Co-authored-by: Open Agent Relay (model)</option>
+              <option value="vanilla">Vanilla — Claude Code's own attribution</option>
+              <option value="off">Off — no attribution</option>
+            </select>
+            <div id="claude-attribution-example" class="settings-help"></div>
             <div id="claude-settings-status" class="settings-help settings-provider-status">Loading Claude settings…</div>
             <div style="display: flex; gap: 8px; margin-top: 8px;">
               <button id="claude-save-btn" type="button" class="summary-btn" onclick="saveClaudeSettings()">Save Claude settings</button>
@@ -5900,6 +6277,42 @@
             <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 Cloud (claude-cloud-settings-ui.js). The login itself is managed on
+             the Claude tab; this panel only says which account pays. -->
+        <div
+          id="settings-provider-panel-claude-cloud"
+          class="settings-panel"
+          role="tabpanel"
+          tabindex="0"
+          aria-labelledby="settings-provider-tab-claude-cloud"
+          data-settings-provider-panel="claude-cloud"
+          hidden
+        >
+          <div class="settings-row settings-row-column" style="margin-top: 12px; margin-bottom: 0;">
+            <label for="claude-cloud-enabled-toggle">Claude Cloud</label>
+            <div class="settings-help">Cloud chats run Claude Code in a sandbox at Anthropic, on its own clone of a GitHub repository, instead of on the relay host. They are billed to the Claude account below. The relay reads that account's login from the Claude CLI on the relay host; it does not store it or refresh it.</div>
+            <div class="settings-row" style="width: 100%; margin-top: 8px; margin-bottom: 8px;">
+              <label for="claude-cloud-enabled-toggle">Enable Claude Cloud for New Chat</label>
+              <input id="claude-cloud-enabled-toggle" type="checkbox" onchange="toggleClaudeCloudProvider(this.checked)" disabled>
+            </div>
+            <div id="claude-cloud-account-row" class="settings-row" style="width: 100%; margin-bottom: 0;" hidden>
+              <div id="claude-cloud-account" class="settings-help settings-provider-status" style="min-width: 0; overflow-wrap: anywhere;"></div>
+              <button id="claude-cloud-login-btn" type="button" class="summary-btn" style="flex: 0 0 auto;" onclick="openClaudeCloudLoginTab()">Claude login</button>
+            </div>
+            <div id="claude-cloud-token" class="settings-help settings-provider-status" style="margin-top: 6px;" hidden></div>
+            <label for="claude-cloud-environment-select" style="margin-top: 12px;">Cloud environment</label>
+            <select id="claude-cloud-environment-select" aria-label="Cloud environment" style="max-width: 100%;" disabled></select>
+            <div id="claude-cloud-environment-note" class="settings-help" hidden></div>
+            <label for="claude-cloud-model-select" style="margin-top: 8px;">Default model</label>
+            <select id="claude-cloud-model-select" aria-label="Default model for cloud chats" style="max-width: 100%;" disabled></select>
+            <div id="claude-cloud-settings-status" class="settings-help settings-provider-status">Loading Claude Cloud settings…</div>
+            <div style="display: flex; gap: 8px 12px; margin-top: 8px; flex-wrap: wrap; align-items: center;">
+              <button id="claude-cloud-save-btn" type="button" class="summary-btn" onclick="saveClaudeCloudSettings()" disabled>Save Claude Cloud settings</button>
+              <a id="claude-cloud-open-link" class="plan-usage-link" href="https://claude.ai/code" target="_blank" rel="noopener noreferrer" style="font-size: var(--fs-meta-sm);">Open claude.ai/code</a>
+            </div>
+            <div class="settings-help">A cloud chat works on what is pushed to GitHub, and its results come back as pushed branches. It has no relay modes, no reasoning effort choice and no mid-turn steering, and it takes images as its only attachments.</div>
+          </div>
+        </div>
         <div
           id="settings-provider-panel-grok"
           class="settings-panel"
@@ -6151,6 +6564,42 @@
           >
         </div>
         <div class="settings-help" style="margin-top: 6px;">When off, agents on paired relays can still read sessions here, but cannot send prompts, start sessions, answer questions or stop turns. The relay token stays the real boundary: anyone holding it has full access.</div>
+        <!-- Agent sessions (agent-sessions-settings-ui.js). Hidden until the relay
+             answers with settings; a relay without the route never shows it. -->
+        <div id="agent-sessions-section" hidden>
+          <div class="settings-row settings-row-column" style="margin-top: 16px; margin-bottom: 0;">
+            <label>Agent sessions</label>
+          </div>
+          <div class="settings-row" style="margin-top: 6px; margin-bottom: 0;">
+            <label for="agent-sessions-enabled-toggle" style="font-weight: normal;">Agents may start and use sessions on this relay</label>
+            <input
+              id="agent-sessions-enabled-toggle"
+              type="checkbox"
+              onchange="toggleAgentSessions(this.checked)"
+              aria-label="Agents may start and use sessions on this relay"
+              disabled
+            >
+          </div>
+          <div class="settings-help" style="margin-top: 6px;">Sessions an agent starts use this relay's accounts. The first one in a conversation asks for your approval. <span id="agent-sessions-cap" hidden></span></div>
+          <div class="settings-row settings-row-column" style="margin-top: 12px; margin-bottom: 0;">
+            <label for="agent-sessions-max-wait-slider">Longest wait per tool call <span id="agent-sessions-max-wait-value">10 min</span></label>
+            <input
+              id="agent-sessions-max-wait-slider"
+              type="range"
+              min="120"
+              max="3600"
+              step="60"
+              value="600"
+              aria-label="Longest wait per tool call"
+              aria-valuetext="10 min"
+              oninput="previewAgentSessionsMaxWait(this.value)"
+              onchange="saveAgentSessionsMaxWait(this.value)"
+              disabled
+            >
+          </div>
+          <div class="settings-help" style="margin-top: 6px;">How long an agent may wait for a session in one call, on this relay or a paired one. It can call again to keep waiting.</div>
+          <div id="agent-sessions-status" class="settings-help settings-provider-status" style="margin-top: 6px;" role="status" aria-live="polite" hidden></div>
+        </div>
         <div id="remote-relays-list-section" class="settings-row settings-row-column" style="margin-top: 16px; margin-bottom: 0;">
           <label>Remote relays</label>
           <div id="remote-relays-list"></div>
@@ -6325,11 +6774,25 @@
         </select>
         <div id="new-conversation-provider-help" style="margin-top:8px;font-size:0.78rem;color:var(--muted);">Copilot models use your GitHub Copilot runtime.</div>
       </div>
+      <!-- Claude Cloud only (journal-view.js): the GitHub repository and branch
+           the cloud session clones, filled from the folder picked above. -->
+      <div id="new-conversation-cloud-row" hidden>
+        <label for="new-conversation-cloud-repo" style="display:block;margin-top:12px;">Repository <button id="new-conversation-cloud-repo-refresh" type="button" class="new-conversation-cloud-refresh" title="Read the repository list again" aria-label="Read the repository list again" onclick="refreshNewConversationCloudRepoList()">↻</button></label>
+        <input id="new-conversation-cloud-repo" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="new-conversation-cloud-repo-list" inputmode="url" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" placeholder="owner/repo or GitHub URL" aria-describedby="new-conversation-cloud-warnings new-conversation-cloud-error">
+        <div id="new-conversation-cloud-repo-list" class="new-conversation-cloud-suggest" role="listbox" aria-label="Repositories" hidden></div>
+        <label for="new-conversation-cloud-branch" style="display:block;margin-top:12px;">Branch</label>
+        <input id="new-conversation-cloud-branch" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="new-conversation-cloud-branch-list" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" placeholder="Default branch" aria-describedby="new-conversation-cloud-warnings new-conversation-cloud-error">
+        <div id="new-conversation-cloud-branch-list" class="new-conversation-cloud-suggest" role="listbox" aria-label="Branches" hidden></div>
+        <div id="new-conversation-cloud-warnings" role="status" aria-live="polite"></div>
+        <div id="new-conversation-cloud-error" role="alert" hidden></div>
+      </div>
       <label for="new-conversation-model-select" style="display:block;margin-top:12px;">Model</label>
       <select id="new-conversation-model-select"></select>
-      <label for="new-conversation-reasoning-select" style="display:block;margin-top:12px;">Reasoning effort</label>
-      <select id="new-conversation-reasoning-select"></select>
-      <div id="new-conversation-reasoning-status" style="margin-top:8px;font-size:0.78rem;color:var(--muted);">Choose the effort used when this conversation starts.</div>
+      <div id="new-conversation-reasoning-row">
+        <label for="new-conversation-reasoning-select" style="display:block;margin-top:12px;">Reasoning effort</label>
+        <select id="new-conversation-reasoning-select"></select>
+        <div id="new-conversation-reasoning-status" style="margin-top:8px;font-size:0.78rem;color:var(--muted);">Choose the effort used when this conversation starts.</div>
+      </div>
       <div id="new-conversation-context-row" style="display:none;">
         <label for="new-conversation-context-select" style="display:block;margin-top:12px;">Context window</label>
         <select id="new-conversation-context-select" disabled aria-readonly="true"></select>