HomerandClaude Opus 5.5
b13cfa4ace
Model, effort, subagents and an agent chat's mode were chips inside the composer, cut off or out of reach with a long model name or every chip on. They are in the chat's header now, beside the Terminal, the activity panel, a Tools and skills button and the menu; a new agent chat's computer and folder sit beside the title (where an open one says where it works), and its Terminal is the header's button as an open chat's is. The composer keeps text, attach, Dictate, Draw a picture and Send/Stop. Where the header has no room -- measured by fitHead on every drawing and resize: the settings cut at their end, or the place squeezed under 10rem -- they fold behind Chat settings, which opens them as a wrapped row under the header. The new chat page shows its header. Tests (tests/ui CI2): the composer holds only the message's controls; at 1920/1280/1024/800/390 px, for a chat and an agent chat with long model names and every chip, every button is inside the window and not clipped by its container, nothing is drawn over another, folded or not, and the model's menu opens; a new agent chat at 1280 and 390. Earlier tests follow the chips' new places. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
222 lines
13 KiB
HTML
222 lines
13 KiB
HTML
<!doctype html>
|
|
<html lang="en" data-theme="moria" data-base="moria">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="color-scheme" content="dark light">
|
|
<title>LLeMbas</title>
|
|
<link rel="stylesheet" href="tokens.css">
|
|
<link rel="stylesheet" href="app.css">
|
|
<script src="i18n.js"></script>
|
|
<script type="module" src="js/main.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<header class="bar" data-tauri-drag-region>
|
|
<button class="bar__btn" id="side-toggle" type="button" aria-label="Sidebar" title="Sidebar" aria-expanded="true" aria-controls="side" data-i18n-aria-label data-i18n-title></button>
|
|
<img class="bar__leaf" src="logo-mark.svg" alt="" width="18" height="18" data-tauri-drag-region>
|
|
<span class="bar__name" data-tauri-drag-region><b>LL</b>e<b>M</b>bas</span>
|
|
<span class="bar__host" id="host" data-tauri-drag-region></span>
|
|
<button class="bar__update" id="update" type="button" hidden>update</button>
|
|
<button class="bar__agent" id="agent" type="button" aria-haspopup="dialog" aria-expanded="false">
|
|
<span class="dot" aria-hidden="true"></span><span class="bar__agent-text" id="agent-text">agent off</span>
|
|
</button>
|
|
<button class="bar__btn" id="menu" type="button" aria-label="Menu" title="Menu" data-i18n-aria-label data-i18n-title></button>
|
|
<span class="bar__sep" aria-hidden="true"></span>
|
|
<button class="bar__btn" id="minimize" type="button" aria-label="Minimise" title="Minimise" data-i18n-aria-label data-i18n-title></button>
|
|
<button class="bar__btn" id="maximize" type="button" aria-label="Maximise" title="Maximise" data-i18n-aria-label data-i18n-title></button>
|
|
<button class="bar__btn bar__btn--close" id="close" type="button" aria-label="Close" title="Close (LLeMbas stays in the tray)" data-i18n-aria-label data-i18n-title></button>
|
|
</header>
|
|
|
|
<div class="setup" id="setup" hidden>
|
|
<main class="card" aria-labelledby="setup-title">
|
|
<header class="brand">
|
|
<img src="logo-mark.svg" alt="" width="40" height="40">
|
|
<div>
|
|
<h1 id="setup-title"><b>LL</b>e<b>M</b>bas</h1>
|
|
<p class="muted">Desktop <span id="setup-version"></span></p>
|
|
</div>
|
|
</header>
|
|
<div class="setup__body" id="setup-body"></div>
|
|
</main>
|
|
</div>
|
|
|
|
<div class="shell" id="shell" hidden data-side="true" data-viewer="false" data-view="chat">
|
|
<nav class="side" id="side" aria-label="Chats" data-i18n-aria-label>
|
|
<div class="side__top">
|
|
<button type="button" class="side__new" id="new-chat-btn"><span class="side__new-label" data-i18n>New chat</span><kbd class="kbd">Ctrl N</kbd></button>
|
|
<label class="search">
|
|
<span class="search__icon" id="side-search-icon"></span>
|
|
<input type="search" id="side-search" placeholder="Search chats" aria-label="Search chats" autocomplete="off" spellcheck="false" data-i18n-placeholder data-i18n-aria-label>
|
|
</label>
|
|
</div>
|
|
<div class="side__nav">
|
|
<button type="button" class="navrow" id="nav-scheduled" data-view="scheduled"><span class="navrow__icon"></span><span data-i18n>Scheduled</span></button>
|
|
<button type="button" class="navrow" id="nav-files" data-view="files"><span class="navrow__icon"></span><span data-i18n>Files</span></button>
|
|
<button type="button" class="navrow" id="nav-archived" data-view="archived"><span class="navrow__icon"></span><span data-i18n>Archived</span></button>
|
|
<button type="button" class="navrow" id="nav-memory" data-view="memory"><span class="navrow__icon"></span><span data-i18n>Memory</span></button>
|
|
</div>
|
|
<ul class="list" id="chat-list" aria-label="Chats" data-i18n-aria-label></ul>
|
|
<div class="side__foot">
|
|
<button type="button" class="navrow navrow--account" id="settings-btn" data-view="settings"></button>
|
|
</div>
|
|
</nav>
|
|
<div class="scrim" id="scrim" aria-hidden="true"></div>
|
|
|
|
<main class="main" id="main" aria-labelledby="chat-title" data-new="false">
|
|
<header class="head chathead" id="chat-head" data-fold="false" data-unfold="false">
|
|
<h1 class="head__title" id="chat-title"></h1>
|
|
<div class="head__place" id="chat-place"></div>
|
|
<div class="chathead__settings" id="chat-settings" role="toolbar" aria-label="Chat settings" data-i18n-aria-label></div>
|
|
<button type="button" class="tool chathead__fold" id="chat-fold" aria-expanded="false" aria-controls="chat-settings" aria-label="Chat settings" title="Chat settings" data-i18n-aria-label data-i18n-title></button>
|
|
<div class="head__tools" id="chat-tools"></div>
|
|
</header>
|
|
<div class="thread" id="thread">
|
|
<div class="hello" id="new-chat" hidden></div>
|
|
<div class="messages" id="messages"></div>
|
|
</div>
|
|
<div class="dock" id="dock">
|
|
<p class="thread__note is-error" id="thread-note" hidden></p>
|
|
<div class="cards" id="cards" hidden></div>
|
|
<div class="notice" id="link-notice" hidden></div>
|
|
<div class="strip" id="activity-strip" hidden aria-live="polite"></div>
|
|
<form class="composer" id="composer" hidden data-running="false" data-drag="false">
|
|
<ul class="composer__files" id="composer-files" hidden></ul>
|
|
<textarea id="composer-text" rows="1" placeholder="Message" aria-label="Message" data-i18n-placeholder data-i18n-aria-label></textarea>
|
|
<div class="composer__bar">
|
|
<button type="button" class="tool composer__attach" id="attach" aria-label="Attach files" title="Attach files" data-i18n-aria-label data-i18n-title></button>
|
|
<div class="composer__chips" id="composer-chips"></div>
|
|
<button type="button" class="tool composer__mic" id="dictate" hidden aria-pressed="false"></button>
|
|
<button type="button" class="round round--stop" id="stop" hidden aria-label="Stop" title="Stop" data-i18n-aria-label data-i18n-title></button>
|
|
<button type="submit" class="round" id="send" aria-label="Send" title="Send" data-i18n-aria-label data-i18n-title></button>
|
|
</div>
|
|
<p class="composer__drop" aria-hidden="true" data-i18n>Drop the files to attach them</p>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
|
|
<section class="page" id="page-files" hidden aria-labelledby="files-title">
|
|
<header class="head">
|
|
<h1 class="head__title" id="files-title" data-i18n>Files</h1>
|
|
<div class="head__place"></div>
|
|
<div class="head__tools"><div class="tabs" role="tablist" id="files-tabs"></div></div>
|
|
</header>
|
|
<div class="page__body files">
|
|
<section class="fx" id="pane-local" aria-label="This computer" data-i18n-aria-label>
|
|
<div class="fx__bar">
|
|
<div class="fx__where" id="local-where"></div>
|
|
<nav class="crumbs" id="local-crumbs" aria-label="Where you are" data-i18n-aria-label></nav>
|
|
<div class="fx__tools">
|
|
<button type="button" class="tool" id="local-refresh" aria-label="Read again" title="Read again" data-i18n-aria-label data-i18n-title></button>
|
|
</div>
|
|
</div>
|
|
<div class="fx__panes">
|
|
<aside class="fx__tree" id="local-tree" aria-label="Folders" data-i18n-aria-label></aside>
|
|
<div class="fx__list" id="local-list"></div>
|
|
<aside class="fx__details" id="local-details" aria-label="Details" data-i18n-aria-label></aside>
|
|
</div>
|
|
</section>
|
|
<section class="fx" id="pane-server" hidden aria-label="Server" data-i18n-aria-label>
|
|
<div class="fx__bar">
|
|
<div class="fx__where"></div>
|
|
<nav class="crumbs" id="server-crumbs" aria-label="Where you are" data-i18n-aria-label></nav>
|
|
<div class="fx__tools">
|
|
<button type="button" class="tool" id="server-upload" aria-label="Upload" title="Upload" data-i18n-aria-label data-i18n-title></button>
|
|
<button type="button" class="tool" id="server-mkdir" aria-label="New folder" title="New folder" data-i18n-aria-label data-i18n-title></button>
|
|
<button type="button" class="tool" id="server-refresh" aria-label="Read again" title="Read again" data-i18n-aria-label data-i18n-title></button>
|
|
</div>
|
|
</div>
|
|
<p class="status fx__status" id="server-status" hidden></p>
|
|
<div class="fx__panes">
|
|
<aside class="fx__tree" id="server-tree" aria-label="Folders" data-i18n-aria-label></aside>
|
|
<div class="fx__list" id="server-list"></div>
|
|
<aside class="fx__details" id="server-details" aria-label="Details" data-i18n-aria-label></aside>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="page" id="page-scheduled" hidden aria-labelledby="scheduled-title">
|
|
<header class="head">
|
|
<h1 class="head__title" id="scheduled-title" data-i18n>Scheduled</h1>
|
|
<div class="head__place" id="scheduled-place"></div>
|
|
<div class="head__tools" id="scheduled-tools"></div>
|
|
</header>
|
|
<div class="page__body" id="scheduled-body"></div>
|
|
</section>
|
|
|
|
<section class="page" id="page-archived" hidden aria-labelledby="archived-title">
|
|
<header class="head">
|
|
<h1 class="head__title" id="archived-title" data-i18n>Archived</h1>
|
|
<div class="head__place"></div>
|
|
<div class="head__tools"><button type="button" class="tool" id="archived-refresh" aria-label="Read again" title="Read again" data-i18n-aria-label data-i18n-title></button></div>
|
|
</header>
|
|
<div class="page__body" id="archived-body"></div>
|
|
</section>
|
|
|
|
<section class="page" id="page-memory" hidden aria-labelledby="memory-title">
|
|
<header class="head">
|
|
<h1 class="head__title" id="memory-title" data-i18n>Memory</h1>
|
|
<div class="head__place"></div>
|
|
<div class="head__tools"><button type="button" class="tool" id="memory-refresh" aria-label="Read again" title="Read again" data-i18n-aria-label data-i18n-title></button></div>
|
|
</header>
|
|
<div class="page__body" id="memory-body"></div>
|
|
</section>
|
|
|
|
<section class="page settings" id="settings" hidden aria-labelledby="settings-title">
|
|
<header class="head">
|
|
<h1 class="head__title" id="settings-title" data-i18n>Settings</h1>
|
|
<div class="head__place"></div>
|
|
<div class="head__tools"><button type="button" class="tool" id="settings-close" aria-label="Close" title="Close" data-i18n-aria-label data-i18n-title></button></div>
|
|
</header>
|
|
<div class="settings__layout">
|
|
<nav class="settings__nav" id="settings-nav" aria-label="Settings" data-i18n-aria-label></nav>
|
|
<div class="settings__body" id="settings-body"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<aside class="termpanel" id="terminal" hidden aria-labelledby="terminal-title">
|
|
<header class="viewer__head termpanel__head">
|
|
<span class="termpanel__icon" id="terminal-icon" aria-hidden="true"></span>
|
|
<div class="viewer__id">
|
|
<h2 class="viewer__name" id="terminal-title" data-i18n>Terminal</h2>
|
|
<p class="viewer__where termpanel__where" id="terminal-where"></p>
|
|
</div>
|
|
<button type="button" class="tool" id="terminal-prev" hidden aria-label="The previous command" title="The previous command (Ctrl+Shift+↑)" data-i18n-aria-label data-i18n-title></button>
|
|
<button type="button" class="tool" id="terminal-next" hidden aria-label="The next command" title="The next command (Ctrl+Shift+↓)" data-i18n-aria-label data-i18n-title></button>
|
|
<button type="button" class="tool" id="terminal-copy" aria-label="Copy the last command and its output" title="Copy the last command and its output" data-i18n-aria-label data-i18n-title></button>
|
|
<button type="button" class="tool" id="terminal-close" aria-label="Close terminal" title="Close terminal" data-i18n-aria-label data-i18n-title></button>
|
|
</header>
|
|
<div class="termpanel__screen" id="terminal-screen"></div>
|
|
<footer class="termpanel__foot">
|
|
<p class="termpanel__message" id="terminal-message" aria-live="polite"></p>
|
|
<span class="termpanel__last" id="terminal-last"></span>
|
|
<button type="button" class="btn btn--sm termpanel__send" id="terminal-send" title="Put the last command and its output into the message box" data-i18n-title><span data-i18n>Send to chat</span></button>
|
|
</footer>
|
|
</aside>
|
|
|
|
<aside class="activity" id="activity" hidden aria-labelledby="activity-title">
|
|
<header class="viewer__head activity__head">
|
|
<button type="button" class="tool" id="activity-back" hidden aria-label="Back" title="Back" data-i18n-aria-label data-i18n-title></button>
|
|
<h2 class="viewer__name" id="activity-title"></h2>
|
|
<button type="button" class="tool" id="activity-close" aria-label="Close the activity panel" title="Close the activity panel" data-i18n-aria-label data-i18n-title></button>
|
|
</header>
|
|
<div class="activity__body" id="activity-body"></div>
|
|
</aside>
|
|
|
|
<aside class="viewer" id="viewer" hidden aria-labelledby="viewer-name">
|
|
<header class="viewer__head">
|
|
<div class="viewer__id">
|
|
<h2 class="viewer__name" id="viewer-name"></h2>
|
|
<p class="viewer__where" id="viewer-where"></p>
|
|
</div>
|
|
<div class="viewer__modes" id="viewer-modes"></div>
|
|
<button type="button" class="tool" id="viewer-close" aria-label="Close" title="Close" data-i18n-aria-label data-i18n-title></button>
|
|
</header>
|
|
<div class="viewer__body" id="viewer-body"></div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|