npm - @oar-sh/oar - Versions diffs - 0.9.6 → 0.9.8 - Mend

@oar-sh/oar 0.9.6 → 0.9.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (105) hide show

package/CHANGELOG.md +285 -0
package/README.md +222 -40
package/bin/oar.js +320 -18
package/package.json +1 -1
package/server/README.md +174 -7
package/server/claude-cloud-worker/claude-cloud-event-normalizer.mjs +340 -0
package/server/claude-cloud-worker/claude-cloud-session-process.mjs +1325 -0
package/server/claude-cloud-worker/claude-cloud-session-worker.mjs +155 -0
package/server/claude-worker/claude-remote-relay-tool.mjs +2 -0
package/server/claude-worker/claude-sdk-adapter.mjs +18 -13
package/server/claude-worker/claude-session-process.mjs +225 -24
package/server/claude-worker/claude-session-worker.mjs +6 -0
package/server/claude-worker/sdk-message-normalizer.mjs +28 -0
package/server/db-schema.mjs +17 -0
package/server/migrations/0006-workspace-root-settings.mjs +67 -0
package/server/migrations/0007-claude-cloud.mjs +82 -0
package/server/public/app/activity-replay-state.mjs +68 -5
package/server/public/app/agent-sessions-settings-ui.js +197 -0
package/server/public/app/agent-sessions-settings.mjs +134 -0
package/server/public/app/api-client.js +149 -6
package/server/public/app/attachments-view.js +20 -1
package/server/public/app/attribution-control.mjs +46 -0
package/server/public/app/bootstrap.js +468 -88
package/server/public/app/claude-cloud-conversation-ui.js +110 -0
package/server/public/app/claude-cloud-settings-ui.js +374 -0
package/server/public/app/claude-cloud-ui.mjs +611 -0
package/server/public/app/composer-control-state.mjs +11 -0
package/server/public/app/context-menu.mjs +140 -0
package/server/public/app/context-tier-options.mjs +4 -0
package/server/public/app/context-usage-view.mjs +127 -8
package/server/public/app/conversation-origin-ui.js +27 -0
package/server/public/app/conversation-provider-indicator.mjs +22 -4
package/server/public/app/conversation-view.js +145 -11
package/server/public/app/cwd-picker.js +12 -0
package/server/public/app/journal-view.js +698 -28
package/server/public/app/math-dollars.mjs +89 -0
package/server/public/app/model-selector-options.mjs +1 -1
package/server/public/app/plan-usage-view.mjs +36 -8
package/server/public/app/pwa-install.js +5 -0
package/server/public/app/relay-error-ctas.mjs +16 -2
package/server/public/app/remote-relay-origin-view.mjs +120 -4
package/server/public/app/router.js +49 -12
package/server/public/app/scrollbar-hover.mjs +78 -0
package/server/public/app/settings-modal.js +37 -3
package/server/public/app/settings-tabs.js +1 -1
package/server/public/app/socket-handlers.js +53 -1
package/server/public/app/store.js +26 -0
package/server/public/app/transcript-separators.mjs +48 -11
package/server/public/app-icon-192.png +0 -0
package/server/public/app-icon-512.png +0 -0
package/server/public/app-icon-light-192.png +0 -0
package/server/public/app-icon-light-512.png +0 -0
package/server/public/app-icon-light-maskable-512.png +0 -0
package/server/public/app-icon-light.svg +4 -0
package/server/public/app-icon-maskable-512.png +0 -0
package/server/public/app-icon.svg +3 -3
package/server/public/favicon.ico +0 -0
package/server/public/index.html +564 -20
package/server/public/manifest.webmanifest +9 -3
package/server/public/sw.js +6 -1
package/server/relay-tools.md +13 -1
package/server/repositories/remote-relay-repository.mjs +42 -1
package/server/repositories/session-repository.mjs +47 -1
package/server/routes/claude-cloud-routes.mjs +140 -0
package/server/routes/git-routes.mjs +37 -0
package/server/routes/messages-routes.mjs +123 -16
package/server/routes/remote-relay-routes.mjs +15 -1
package/server/routes/sessions-routes.mjs +517 -74
package/server/server-runtime.mjs +268 -33
package/server/services/claude-account-usage-service.mjs +176 -0
package/server/services/claude-cloud-repo-service.mjs +408 -0
package/server/services/claude-cloud-session-service.mjs +326 -0
package/server/services/claude-cloud-settings-service.mjs +269 -0
package/server/services/claude-context-usage.mjs +51 -3
package/server/services/git-remote-service.mjs +115 -0
package/server/services/oar-cli-helpers.mjs +67 -1
package/server/services/plan-usage-claude-cloud.mjs +211 -0
package/server/services/plan-usage-claude.mjs +202 -40
package/server/services/plan-usage-contract.mjs +39 -3
package/server/services/plan-usage-service.mjs +82 -2
package/server/services/provider-reasoning-effort.mjs +3 -0
package/server/services/pwa-manifest-theme.mjs +30 -0
package/server/services/remote-relay-caller-context.mjs +49 -10
package/server/services/remote-relay-client.mjs +9 -0
package/server/services/remote-relay-dispatcher.mjs +383 -35
package/server/services/remote-relay-inbound.mjs +49 -2
package/server/services/remote-relay-loopback.mjs +245 -0
package/server/services/remote-relay-registry-service.mjs +52 -0
package/server/services/session-worker-launch-service.mjs +100 -15
package/server/services/session-worker-process-service.mjs +348 -129
package/server/services/session-worker-registry-service.mjs +18 -1
package/server/services/session-worker-stop-service.mjs +24 -13
package/server/services/session-worker-supervisor-service.mjs +56 -1
package/server/services/update-install-service.mjs +9 -3
package/server/services/usage-limit-pause-service.mjs +3 -1
package/server/services/worker-launch-note-service.mjs +151 -0
package/shared/claude-attribution.mjs +117 -0
package/shared/claude-cloud/api-client.mjs +809 -0
package/shared/claude-cloud/base-url.mjs +47 -0
package/shared/claude-cloud/credentials.mjs +221 -0
package/shared/claude-cloud/repo-url.mjs +111 -0
package/shared/provider-routing.mjs +4 -2
package/shared/remote-relay-contract.mjs +153 -22
package/shared/remote-relay-tool-core.mjs +11 -8
package/shared/steer-settle-failure.mjs +1 -0

package/server/public/index.html CHANGED Viewed

@@ -3,12 +3,23 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content">
-<meta name="theme-color" content="#161b22">
+<meta name="theme-color" content="#0d1117">
 <meta name="application-name" content="OAR">
 <meta name="apple-mobile-web-app-title" content="OAR">
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<script>
+  // The stored Theme setting, applied before the first paint so the start
+  // screen (and its logo) already match it.
+  const __STORED_THEME = (() => {
+    try { return window.localStorage.getItem('copilot_theme') === 'light' ? 'light' : 'dark'; } catch { return 'dark'; }
+  })();
+  if (__STORED_THEME === 'light') {
+    document.documentElement.setAttribute('data-theme', 'light');
+    document.querySelector('meta[name="theme-color"]')?.setAttribute('content', '#ffffff');
+  }
+</script>
 <script>
   window.__COPILOT_APP_CONFIG = { basePath: '' };
   const __APP_CONFIG = window.__COPILOT_APP_CONFIG;
@@ -163,13 +174,35 @@
       if (errorEl) errorEl.textContent = 'Could not reach the relay';
     }
   };
-  if (!__IS_SHARED_ROUTE) {
-    document.write(`<link rel="manifest" href="${__APP_BASE}/manifest.webmanifest?${__PWA_BUST}">`);
-  }
-  document.write(`<link rel="icon" type="image/png" sizes="192x192" href="${__APP_BASE}/app-icon-192.png?${__PWA_BUST}">`);
-  document.write(`<link rel="icon" type="image/png" sizes="512x512" href="${__APP_BASE}/app-icon-512.png?${__PWA_BUST}">`);
-  document.write(`<link rel="icon" type="image/svg+xml" href="${__APP_BASE}/app-icon.svg?${__PWA_BUST}">`);
-  document.write(`<link rel="apple-touch-icon" href="${__APP_BASE}/app-icon-192.png?${__PWA_BUST}">`);
+  // Manifest and tab icons for one theme: the dark icon set, or its
+  // `app-icon-light*` twin with a white launch background.
+  const __themeAssetLinks = (theme) => {
+    const light = theme === 'light';
+    const icon = light ? 'app-icon-light' : 'app-icon';
+    return [
+      ...(__IS_SHARED_ROUTE ? [] : [
+        { rel: 'manifest', href: `${__APP_BASE}/manifest.webmanifest?${__PWA_BUST}${light ? '&theme=light' : ''}` },
+      ]),
+      { rel: 'icon', type: 'image/png', sizes: '192x192', href: `${__APP_BASE}/${icon}-192.png?${__PWA_BUST}` },
+      { rel: 'icon', type: 'image/png', sizes: '512x512', href: `${__APP_BASE}/${icon}-512.png?${__PWA_BUST}` },
+      { rel: 'icon', type: 'image/svg+xml', href: `${__APP_BASE}/${icon}.svg?${__PWA_BUST}` },
+      { rel: 'apple-touch-icon', href: `${__APP_BASE}/${icon}-192.png?${__PWA_BUST}` },
+    ];
+  };
+  const __themeAssetLinkHtml = (theme) => __themeAssetLinks(theme)
+    .map((link) => `<link data-theme-asset="1" ${Object.entries(link).map(([key, value]) => `${key}="${value}"`).join(' ')}>`)
+    .join('');
+  document.write(__themeAssetLinkHtml(__STORED_THEME));
+  document.write(`<style>
+    .brand-logo { background-image: url("${__APP_BASE}/app-icon.svg?${__PWA_BUST}"); }
+    :root[data-theme="light"] .brand-logo { background-image: url("${__APP_BASE}/app-icon-light.svg?${__PWA_BUST}"); }
+  </style>`);
+  // A Theme change swaps them in place (settings-modal's updateTheme).
+  window.__applyThemeAssets = (theme) => {
+    const next = theme === 'light' ? 'light' : 'dark';
+    for (const node of Array.from(document.head.querySelectorAll('link[data-theme-asset]'))) node.remove();
+    document.head.insertAdjacentHTML('beforeend', __themeAssetLinkHtml(next));
+  };
 </script>
 <title>OAR — Open Agent Relay</title>
 <script>document.write('<scr'+'ipt src="'+__APP_BASE+'/socket.io/socket.io.js"><\/scr'+'ipt>');</script>
@@ -256,6 +289,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 +351,7 @@
     --provider-claude: #b4531f;
     --provider-cursor: #6b3fd4;
     --provider-grok: #a21caf;
+    --provider-claude-cloud: #0369a1;
     --inline-code-bg: #eff1f3;
   }
   :root {
@@ -382,12 +417,44 @@
     display: none; align-items: center; justify-content: center;
     height: var(--app-height); padding: 24px;
   }
+  /* The start screen lies over the page until the app (or the sign-in box)
+     is ready. In the installed app it takes over from the system's launch
+     screen: the logo starts where and as large as the launch screen showed
+     it, then settles into this layout while the label fades in. */
   #startup-loading {
-    display: flex; align-items: center; justify-content: center;
-    height: var(--app-height); padding: 24px;
+    position: fixed; inset: 0; z-index: 10000;
+    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
+    padding: 24px 24px 124px;
+    background: var(--bg);
     color: var(--muted);
     font-size: var(--fs-core-subtitle);
+    transition: opacity 150ms ease;
+  }
+  #startup-loading.is-leaving { opacity: 0; }
+  #startup-loading .brand-logo { width: 148px; height: 148px; }
+  #startup-loading.is-animated .brand-logo {
+    animation: startup-logo-settle 500ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both;
   }
+  #startup-loading.is-animated .startup-label {
+    animation: startup-label-in 400ms ease 450ms both;
+  }
+  #startup-loading .startup-label { transition: opacity 150ms ease; }
+  @keyframes startup-logo-settle {
+    from { transform: translate(var(--startup-dx, 0px), var(--startup-dy, 0px)) scale(var(--startup-scale, 1)); }
+    to { transform: none; }
+  }
+  @keyframes startup-label-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+  /* The logo for the active theme. A background, not an <img>: the browser
+     fetches only the one the matching rule names (the rules with the URLs are
+     written by the head script, which knows the relay's base path). */
+  .brand-logo {
+    width: 128px; height: 128px; flex: none;
+    background-position: center; background-size: contain; background-repeat: no-repeat;
+  }
+  .auth-box .brand-logo { width: 96px; height: 96px; margin: 0 auto 16px; }
   .auth-box {
     background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
     padding: 40px 32px; width: 100%; max-width: 400px; text-align: center;
@@ -541,7 +608,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 +791,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 +812,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;
@@ -1285,6 +1417,9 @@
     padding: 2px 10px;
     background: var(--bg2);
   }
+  /* A compaction that is still running: the label trails the bouncing dots. */
+  .transcript-separator.is-pending .dots { margin-left: 6px; }
+  .transcript-separator.is-pending .dots span { width: 4px; height: 4px; }
   .empty-state {
     flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
@@ -1434,6 +1569,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;
@@ -1666,6 +1812,12 @@
     word-break: break-word;
   }
   .thinking-stream[hidden] { display: none; }
+  .thinking-compacting-note {
+    color: var(--muted);
+    font-size: var(--fs-meta-sm);
+    font-style: italic;
+  }
+  .thinking-compacting-note[hidden] { display: none; }
   .thinking-stream > :first-child { margin-top: 0; }
   .thinking-stream > :last-child { margin-bottom: 0; }
   .thinking-activity {
@@ -2019,8 +2171,19 @@
     font-size: 0.76rem;
     color: var(--muted);
   }
+  .ctx-autocompact-notes { display: flex; flex-direction: column; gap: 4px; }
+  .ctx-autocompact-notes:empty { display: none; }
+  .ctx-autocompact-warning { color: var(--warn); }
   /* 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;
@@ -2119,6 +2282,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;
@@ -2516,6 +2686,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;
@@ -2822,6 +3026,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. */
@@ -2865,6 +3109,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
@@ -2926,6 +3175,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;
   }
@@ -3298,12 +3548,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;
@@ -3312,6 +3566,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 {
@@ -4826,6 +5158,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 {
@@ -4890,6 +5223,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;
     }
@@ -5040,6 +5377,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;
@@ -5319,6 +5662,18 @@
   ::-webkit-scrollbar { width: 6px; }
   ::-webkit-scrollbar-track { background: transparent; }
   ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+  /* With a mouse the track is twice as wide and the thumb is drawn thin in
+     its middle; the thumb fills the track while the pointer is on the
+     scrollbar and for a moment after (scrollbar-hover.mjs). The track keeps
+     its width, so the page does not move when the thumb grows. */
+  @media (hover: hover) and (pointer: fine) {
+    ::-webkit-scrollbar { width: 12px; }
+    ::-webkit-scrollbar-thumb {
+      border: 3px solid transparent; border-top-width: 0; border-bottom-width: 0;
+      background-clip: padding-box; border-radius: 6px;
+    }
+    .scrollbar-wide::-webkit-scrollbar-thumb { border-width: 0; background: var(--muted); }
+  }
 </style>
 </head>
 <body>
@@ -5326,7 +5681,8 @@
 <!-- Auth Gate -->
 <div id="auth-gate">
   <div class="auth-box">
-    <h1>🛶 OAR</h1>
+    <div class="brand-logo" aria-hidden="true"></div>
+    <h1>OAR</h1>
     <p>Enter your access token to connect</p>
     <input id="token-input" type="password" placeholder="Access token" autofocus onkeydown="if(event.key==='Enter')window.__copilotAuthConnect(event)">
     <button onclick="window.__copilotAuthConnect(event)">Connect</button>
@@ -5334,7 +5690,87 @@
   </div>
 </div>
-<div id="startup-loading" role="status" aria-live="polite">Connecting to OAR…</div>
+<div id="startup-loading" role="status" aria-live="polite"><div class="brand-logo" aria-hidden="true"></div><div class="startup-label">Connecting to OAR…</div></div>
+<script>
+  // The start screen's hand-over from the system launch screen, and its two
+  // ways out: into the app (finish) or into the sign-in box (toAuth). Only the
+  // installed app animates and makes its exits wait for the animation; a
+  // browser tab has no launch screen to continue from and leaves at once.
+  window.__startupSplash = (() => {
+    const root = document.getElementById('startup-loading');
+    const logo = root.querySelector('.brand-logo');
+    const label = root.querySelector('.startup-label');
+    const media = (query) => { try { return window.matchMedia(query).matches; } catch { return false; } };
+    const installed = media('(display-mode: standalone)') || media('(display-mode: fullscreen)')
+      || window.navigator.standalone === true;
+    const animated = installed && !media('(prefers-reduced-motion: reduce)');
+    const wait = (ms) => new Promise((resolve) => { setTimeout(resolve, ms); });
+    let done = Promise.resolve();
+    if (animated) {
+      // Android draws its launch icon around the centre of the whole screen,
+      // 275 px across for a maskable icon, which makes the otter 155 px wide.
+      // The tile used here carries the otter at 373/512 of its width.
+      const LAUNCH_TILE_PX = 155.2 / (373 / 512);
+      // The page only knows the sum of the system bars; a three-button
+      // navigation bar (48 px) is assumed for the split.
+      const NAV_BAR_PX = 48;
+      const rect = logo.getBoundingClientRect();
+      const bars = Math.max(0, (window.screen?.height || window.innerHeight) - window.innerHeight);
+      const topBar = Math.max(0, bars - NAV_BAR_PX);
+      let targetY = (window.screen?.height || window.innerHeight) / 2 - topBar;
+      // An implausible reading (split screen, a desktop window) falls back to
+      // the middle of the page.
+      if (!(Math.abs(targetY - window.innerHeight / 2) <= 60)) targetY = window.innerHeight / 2;
+      root.style.setProperty('--startup-dx', `${window.innerWidth / 2 - (rect.left + rect.width / 2)}px`);
+      root.style.setProperty('--startup-dy', `${targetY - (rect.top + rect.height / 2)}px`);
+      root.style.setProperty('--startup-scale', String(LAUNCH_TILE_PX / rect.width));
+      root.classList.add('is-animated');
+      // Rest 200 ms, settle 500 ms; the label's fade ends at 850 ms.
+      done = wait(850);
+    }
+    let left = null;
+    const leave = (run) => {
+      // Removed whatever happens on the way out: a start screen left over
+      // the page would cover the whole app.
+      if (!left) {
+        left = (animated && root.isConnected ? done.then(run) : Promise.resolve())
+          .catch(() => {})
+          .then(() => { root.remove(); });
+      }
+      return left;
+    };
+    return {
+      animated,
+      // Into the app: fade the start screen away over the page below it.
+      finish: () => leave(async () => {
+        root.classList.add('is-leaving');
+        await wait(150);
+      }),
+      // Into the sign-in box: the logo travels on into the box's own logo
+      // place, shrinking to its size, and the box fades in around it.
+      toAuth: () => leave(async () => {
+        const box = document.querySelector('#auth-gate .auth-box');
+        const target = box?.querySelector('.brand-logo')?.getBoundingClientRect();
+        if (!box || !target || !target.width) return;
+        box.style.opacity = '0';
+        root.style.background = 'transparent';
+        label.style.animation = 'none';
+        label.style.opacity = '0';
+        const from = logo.getBoundingClientRect();
+        logo.style.animation = 'none';
+        logo.style.transition = 'transform 450ms cubic-bezier(0.22, 1, 0.36, 1)';
+        logo.style.transform = `translate(${target.left + target.width / 2 - (from.left + from.width / 2)}px, `
+          + `${target.top + target.height / 2 - (from.top + from.height / 2)}px) scale(${target.width / from.width})`;
+        await wait(450);
+        box.style.transition = 'opacity 300ms ease';
+        box.style.opacity = '1';
+        await wait(300);
+        box.style.transition = '';
+        box.style.opacity = '';
+      }),
+    };
+  })();
+</script>
 <!-- Sidebar overlay (mobile) -->
 <div id="sidebar-overlay" onclick="closeSidebar()"></div>
@@ -5357,8 +5793,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>
@@ -5367,7 +5805,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>
@@ -5387,11 +5825,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>
@@ -5414,6 +5854,7 @@
       <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>
@@ -5794,6 +6235,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"
@@ -5982,6 +6433,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>
@@ -5989,6 +6447,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"
@@ -6240,6 +6734,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>
@@ -6414,11 +6944,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>
@@ -6534,8 +7078,8 @@
 <script>
   window.__loadCopilotApp().catch((error) => {
-    document.getElementById('startup-loading')?.remove();
     document.getElementById('auth-gate').style.display = 'flex';
+    void window.__startupSplash.toAuth();
     const errorEl = document.getElementById('auth-error');
     if (errorEl) errorEl.textContent = `App failed to initialize: ${String(error?.message || error || 'unknown error')}`;
   });