Oregami
Repositories/oxedyne/daimond

oxedyne/daimond/www/guide/interface.html

32.8 KiB, 51 runs

created by r2519314175:1227, which is this file's identity for as long as the history lasts, whatever it is later renamed to

download · who wrote it · its history

1<!DOCTYPE html>
2<html lang="en" data-guide-locale="en" data-guide-locales="en de es fr ja ko pt-BR zh-Hans">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
6<title>The interface — Daimond guide</title>
7<link rel="icon" type="image/svg+xml" href="../assets/daimond_mark.svg">
8<link rel="stylesheet" href="../css/variables.css">
9<link rel="stylesheet" href="../css/guide.css">
10<style>
11/* The region map. On a phone the whole schematic scaled to the column width put
12 its labels at five pixels, which is a diagram that says nothing to the reader
13 who most needs it. It keeps a floor on its width and scrolls sideways inside
14 its own box instead: the page still never scrolls sideways, and the words can
15 still be read. The same treatment the widget map on social.html has, and the
16 floor is set from the same measurement -- 720px puts this map's smallest label
17 at the eleven rendered pixels that one's smallest label already gets, because
18 this map's smallest type is 9 units against that one's 10. */
19.diagram.scrolls { overflow-x: auto; }
20.diagram.scrolls svg { min-width: 720px; }
21</style>
22<script src="frame.js"></script>
23<script src="search-index.js"></script>
24<script src="search.js"></script>
25</head>
26<body>
27
28<header class="site-head">
29 <div class="site-head-inner">
30 <a class="brand" href="index.html" aria-label="Daimond guide, home">
31 <img class="wordmark wm-dark" src="../assets/daimond_word.svg" alt="Daimond" translate="no">
32 <img class="wordmark wm-light" src="../assets/daimond_word_dark.svg" alt="Daimond" translate="no">
33 <span class="brand-sub">Guide</span>
34 </a>
35 <nav class="site-nav" aria-label="Guide pages">
36 <a href="index.html">Getting started</a>
37 <a href="interface.html" aria-current="page">The interface</a>
38 <a href="models.html">Models &amp; credits</a>
39 <a href="chats-and-diamonds.html">Chats &amp; Diamonds</a>
40 <a href="capps.html">Capps</a>
41 <a href="email-web-files.html">Email, Web &amp; files</a>
42 <a href="accounts.html">Accounts</a>
43 <a href="sync.html">Cross-device sync</a>
44 <a href="spending.html">Spending</a>
45 <a href="machine-operations.html">Machine Operations</a>
46 <a href="social.html">Social</a>
47 </nav>
48 </div>
49</header>
50
51<main>
52 <h1>The interface</h1>
53 <p class="lede">A tour of the screen: three zones, and what each part does. Once you know the zones, everything in Daimond has a place.</p>
54
55 <figure class="diagram scrolls">
56 <svg class="regionmap" viewBox="0 0 760 470" role="img" aria-labelledby="rm-title rm-desc" preserveAspectRatio="xMidYMid meet">
57 <title id="rm-title">The named regions of the Daimond window</title>
58 <desc id="rm-desc">A schematic of the window. Across the top is the top bar. Below it, three zones side by side: the rail on the left (what you work on above a divider, the admin panel below it), the stage in the centre, holding the conversation and, beside it, from one to three more panels according to how wide the stage is, and the dock on the right (Email, Workspace and Agents).</desc>
59 <style>
60 .regionmap text { font-family: var(--font); }
61 .rm-win { fill: var(--bg-primary); stroke: var(--border-2); stroke-width: 1; }
62 .rm-bar { fill: var(--bg-tertiary); stroke: var(--border); stroke-width: 1; }
63 .rm-pan { fill: var(--bg-secondary); stroke: var(--border); stroke-width: 1; }
64 .rm-cell { fill: var(--bg-tertiary); stroke: var(--border); stroke-width: 1; }
65 .rm-name { fill: var(--accent); font-weight: 700; }
66 .rm-title{ fill: var(--text-secondary); font-weight: 600; }
67 .rm-sub { fill: var(--text-muted); }
68 .rm-fill { fill: var(--accent); }
69 .rm-soft { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; }
70 .rm-rule { stroke: var(--accent); stroke-width: 2; }
71 .rm-div { stroke: var(--border-2); stroke-width: 1.5; }
72 .rm-divf { fill: var(--border-2); }
73 .rm-skel { fill: var(--text-muted); opacity: .30; }
74 </style>
75
76 <!-- window + top bar -->
77 <rect class="rm-win" x="10" y="10" width="740" height="450" rx="16"/>
78 <path class="rm-bar" d="M10,26 a16,16 0 0 1 16,-16 h708 a16,16 0 0 1 16,16 v30 h-740 z"/>
79 <!-- top-bar furniture: brand, name pill, panel chips, appearance menu -->
80 <rect class="rm-fill" x="30" y="27" width="12" height="12" rx="2" transform="rotate(45 36 33)"/>
81 <rect class="rm-skel" x="52" y="29" width="46" height="7" rx="3.5"/>
82 <rect class="rm-soft" x="118" y="22" width="98" height="22" rx="11"/>
83 <text class="rm-name" x="167" y="37" text-anchor="middle" font-size="12">The top bar</text>
84 <rect class="rm-cell" x="430" y="25" width="40" height="16" rx="8"/>
85 <rect class="rm-cell" x="478" y="25" width="34" height="16" rx="8"/>
86 <circle cx="716" cy="33" r="9" fill="none" stroke="var(--border-2)"/>
87 <path class="rm-fill" d="M716,24 a9,9 0 0 1 0,18 z" opacity=".5"/>
88
89 <!-- ── rail ───────────────────────────────────────────── -->
90 <rect class="rm-pan" x="22" y="66" width="196" height="382" rx="10"/>
91 <text class="rm-name" x="36" y="93" font-size="15">The rail</text>
92 <text class="rm-sub" x="112" y="93" font-size="11">left</text>
93 <line class="rm-rule" x1="36" y1="100" x2="70" y2="100"/>
94 <text class="rm-title" x="36" y="120" font-size="10.5">What you work on</text>
95 <!-- Diamonds -->
96 <text class="rm-sub" x="36" y="137" font-size="9" letter-spacing="1">DIAMONDS</text>
97 <text class="rm-sub" x="204" y="137" text-anchor="end" font-size="12">+</text>
98 <rect class="rm-cell" x="36" y="142" width="170" height="26" rx="6"/>
99 <rect class="rm-skel" x="44" y="149" width="70" height="6" rx="3"/>
100 <rect class="rm-soft" x="150" y="148" width="20" height="9" rx="4.5"/>
101 <rect class="rm-soft" x="174" y="148" width="28" height="9" rx="4.5"/>
102 <rect class="rm-cell" x="36" y="172" width="170" height="26" rx="6"/>
103 <rect class="rm-skel" x="44" y="179" width="58" height="6" rx="3"/>
104 <rect class="rm-soft" x="150" y="178" width="24" height="9" rx="4.5"/>
105 <!-- Chats -->
106 <text class="rm-sub" x="36" y="219" font-size="9" letter-spacing="1">CHATS</text>
107 <rect class="rm-cell" x="36" y="224" width="170" height="18" rx="6"/>
108 <rect class="rm-skel" x="44" y="230" width="96" height="6" rx="3"/>
109 <!-- divider between the two halves of the rail -->
110 <line class="rm-div" x1="30" y1="258" x2="198" y2="258"/>
111 <rect class="rm-divf" x="106" y="255.5" width="16" height="5" rx="2.5"/>
112 <text class="rm-sub" x="36" y="274" font-size="9.5">divider, drag it</text>
113 <!-- Admin panel -->
114 <text class="rm-title" x="36" y="294" font-size="10.5">Admin panel</text>
115 <g>
116 <rect class="rm-cell" x="36" y="300" width="170" height="15" rx="4"/>
117 <circle class="rm-fill" cx="46" cy="307.5" r="3" opacity=".55"/>
118 <rect class="rm-skel" x="56" y="304.5" width="66" height="6" rx="3"/>
119 <rect class="rm-skel" x="176" y="304.5" width="26" height="6" rx="3"/>
120 <rect class="rm-cell" x="36" y="320" width="170" height="15" rx="4"/>
121 <circle class="rm-fill" cx="46" cy="327.5" r="3" opacity=".55"/>
122 <rect class="rm-skel" x="56" y="324.5" width="54" height="6" rx="3"/>
123 <rect class="rm-skel" x="176" y="324.5" width="26" height="6" rx="3"/>
124 <rect class="rm-cell" x="36" y="340" width="170" height="15" rx="4"/>
125 <circle class="rm-fill" cx="46" cy="347.5" r="3" opacity=".55"/>
126 <rect class="rm-skel" x="56" y="344.5" width="72" height="6" rx="3"/>
127 <rect class="rm-skel" x="176" y="344.5" width="26" height="6" rx="3"/>
128 <rect class="rm-cell" x="36" y="360" width="170" height="15" rx="4"/>
129 <circle class="rm-fill" cx="46" cy="367.5" r="3" opacity=".55"/>
130 <rect class="rm-skel" x="56" y="364.5" width="60" height="6" rx="3"/>
131 <rect class="rm-skel" x="176" y="364.5" width="26" height="6" rx="3"/>
132 </g>
133
134 <!-- ── stage ──────────────────────────────────────────── -->
135 <rect class="rm-pan" x="228" y="66" width="300" height="382" rx="10"/>
136 <text class="rm-name" x="244" y="93" font-size="15">The stage</text>
137 <text class="rm-sub" x="330" y="93" font-size="11">centre</text>
138 <line class="rm-rule" x1="244" y1="100" x2="290" y2="100"/>
139 <text class="rm-title" x="244" y="119" font-size="10.5">The chat, your conversation</text>
140 <text class="rm-sub" x="244" y="133" font-size="9.5">two to four seats, by width</text>
141 <rect class="rm-cell" x="244" y="146" width="196" height="30" rx="8"/>
142 <rect class="rm-skel" x="254" y="153" width="176" height="6" rx="3"/>
143 <rect class="rm-skel" x="254" y="164" width="120" height="6" rx="3"/>
144 <rect class="rm-soft" x="344" y="184" width="168" height="26" rx="8"/>
145 <rect class="rm-skel" x="354" y="194" width="148" height="6" rx="3"/>
146 <rect class="rm-cell" x="244" y="218" width="212" height="30" rx="8"/>
147 <rect class="rm-skel" x="254" y="225" width="192" height="6" rx="3"/>
148 <rect class="rm-skel" x="254" y="236" width="150" height="6" rx="3"/>
149 <!-- composer -->
150 <rect class="rm-cell" x="244" y="410" width="268" height="28" rx="8"/>
151 <rect class="rm-skel" x="256" y="421" width="150" height="6" rx="3"/>
152 <circle class="rm-fill" cx="498" cy="424" r="9"/>
153
154 <!-- ── dock ───────────────────────────────────────────── -->
155 <rect class="rm-pan" x="538" y="66" width="200" height="382" rx="10"/>
156 <text class="rm-name" x="552" y="93" font-size="15">The dock</text>
157 <text class="rm-sub" x="642" y="93" font-size="11">right</text>
158 <line class="rm-rule" x1="552" y1="100" x2="596" y2="100"/>
159 <!-- Email -->
160 <rect class="rm-cell" x="552" y="112" width="172" height="90" rx="8"/>
161 <text class="rm-title" x="564" y="131" font-size="11">Email</text>
162 <rect class="rm-skel" x="564" y="142" width="148" height="6" rx="3"/>
163 <rect class="rm-skel" x="564" y="156" width="120" height="6" rx="3"/>
164 <rect class="rm-skel" x="564" y="170" width="134" height="6" rx="3"/>
165 <rect class="rm-skel" x="564" y="184" width="96" height="6" rx="3"/>
166 <!-- Workspace -->
167 <rect class="rm-cell" x="552" y="210" width="172" height="90" rx="8"/>
168 <text class="rm-title" x="564" y="229" font-size="11">Workspace</text>
169 <rect class="rm-skel" x="564" y="240" width="110" height="6" rx="3"/>
170 <rect class="rm-skel" x="576" y="254" width="120" height="6" rx="3"/>
171 <rect class="rm-skel" x="576" y="268" width="98" height="6" rx="3"/>
172 <rect class="rm-skel" x="564" y="282" width="88" height="6" rx="3"/>
173 <!-- Agents, with a mini tile that shows the chips -->
174 <rect class="rm-cell" x="552" y="308" width="172" height="132" rx="8"/>
175 <text class="rm-title" x="564" y="327" font-size="11">Agents</text>
176 <rect class="rm-pan" x="562" y="336" width="152" height="96" rx="6"/>
177 <rect class="rm-skel" x="570" y="346" width="66" height="7" rx="3.5"/>
178 <circle class="rm-fill" cx="704" cy="350" r="4"/>
179 <rect class="rm-soft" x="570" y="362" width="50" height="12" rx="6"/>
180 <text class="rm-name" x="577" y="371" font-size="8">↳</text>
181 <rect class="rm-cell" x="626" y="362" width="26" height="12" rx="6"/>
182 <rect class="rm-cell" x="658" y="362" width="36" height="12" rx="6"/>
183 <rect class="rm-skel" x="570" y="384" width="128" height="6" rx="3"/>
184 <rect class="rm-skel" x="570" y="396" width="96" height="6" rx="3"/>
185 <rect class="rm-cell" x="570" y="410" width="52" height="13" rx="6"/>
186 <rect class="rm-cell" x="628" y="410" width="40" height="13" rx="6"/>
187 </svg>
188 <figcaption>The named regions. The <strong>top bar</strong> runs across the top; below it, three zones: the <strong>rail</strong> (left), what you work on, above a divider, with the admin panel below; the <strong>stage</strong> (centre) for the conversation and whatever you have opened beside it, two seats on a laptop and up to four on a wide screen; and the <strong>dock</strong> (right) holding Email, Workspace and Agents.</figcaption>
189 </figure>
190
191 <h2 id="s1">The rail (left)</h2>
192 <p>The rail is split by a divider you can drag but not remove. Above the divider is what you are working on; below it is the admin panel.</p>
193
194 <p>A row named <span class="ui">Everything</span> sits over the lot, holding every Diamond, chat, worker, mailbox and page fetch at one press. Its light is the root of every other in the app: green while everything that could spend is running, red when none of it is, amber in between. The rail's own closer is on that row, the only one that speaks for the whole rail.</p>
195
196 <div class="cards">
197 <div class="card">
198 <h3 id="s2">Diamonds</h3>
199 <p>The pursuits you keep. A Diamond holds what a chat taught you about a piece of work, so the next stretch of it starts from what you know. Add one with the <strong>+</strong> beside <strong>Diamonds</strong>; the button next to it draws them as a <strong>graph</strong>. Tag them as they accumulate and the <span class="ui">Filter by tag</span> row narrows the list.</p>
200 </div>
201 <div class="card">
202 <h3 id="s3">Chats</h3>
203 <p>Your conversations, newest first. Start one with the <strong>+</strong> beside <strong>Chats</strong>; click any chat to bring it back to the centre. The <span class="ui">⋯</span> beside the <strong>+</strong> holds <span class="ui">Delete all chats</span>, which is about every chat rather than one and so does not sit on a chat tile.</p>
204 </div>
205 </div>
206 <p>A second divider sits between the two lists. Diamonds accumulate, and without it a long list of them pushed the chat tiles off the bottom; drag it to give either list the room, or double-click it for an even share. Neither can be crushed away entirely, and the share is remembered per device with the rest of your layout.</p>
207
208 <p>Diamonds sit above chats, which is the way the ground is: you mine in the conversation underneath, and what you bring up is cut and polished above it. A chat is raw, a Diamond is worked, and the order says which way the work travels without a word of explanation. The word <strong>chat</strong> was left alone for the same reason. A Diamond is a new sort of thing and earns a new name; a conversation is ordinary and keeps its ordinary word.</p>
209
210 <p>Both are covered in full on <a href="chats-and-diamonds.html">Chats &amp; Diamonds</a>.</p>
211
212 <h3 id="s4">The admin panel</h3>
213 <p>Below the divider, the admin panel is the state of the machine at a glance. Settings live here and not in a pop-up, so a chat stays live beside them: you can ask Daimond what an app password is while the box asking for one is still on screen. Each row that can be acted on is a button that opens what it names:</p>
214 <ul>
215 <li>An <strong>identity row</strong> (who you are on this device) with a settings cog beside it.</li>
216 <li><span class="ui">Models</span>, counting the providers you have connected and opening the Models form.</li>
217 <li><span class="ui">Credits</span>, showing your balance and opening the Credits view.</li>
218 <li><span class="ui">Tools · N of M</span>, how many tools are available, opening the Tools panel.</li>
219 <li><span class="ui">Version</span>, naming the release you are running and how long you have been on it, and opening the release history below.</li>
220 <li><strong>Workspace storage</strong>, how much space your files use in each place a workspace can live.</li>
221 </ul>
222
223 <h3 id="s5">Which version you are running</h3>
224 <p>The <span class="ui">Version</span> row reads as a name and an age (<span class="ui">Version · Albany · today</span>), not as a build number. Releases are named after Western Australian places in alphabetical order, so the sequence is legible without looking anything up. A name marks a <strong>milestone</strong>: Daimond ships several builds a day, and a name for each would be noise. Hover the row for the build id and its publication date.</p>
225 <p>Clicking the row opens the <strong>release history</strong>, which reads from the top down:</p>
226 <ul>
227 <li><strong>What is planned</strong>, first, in a dashed outline.</li>
228 <li><strong>The build you are running</strong>, marked <span class="ui">you are here</span>.</li>
229 <li><strong>Every earlier build</strong>, newest first, each with its date, a line saying what changed, its build id and its place in the sealed record.</li>
230 </ul>
231 <p>This is not a changelog kept beside the app. It is the published record Daimond's own delivery check reads: every build ever served, in order, in a chain that cannot be rewritten without breaking. The one-line notes were added without disturbing that chain, so you are reading annotated history and not a retelling of it.</p>
232 <div class="note"><strong>The planned entry looks different because it is different.</strong> It carries no build id and no seal number, and says in words that it is not built yet and not promised for a date. Everything below it is sealed and checkable; a statement of intent is neither, and should not borrow the authority of a record.</div>
233 <p>There is no way back to an older build. A pinned one walks into the gateway's own refusal to talk to a client that is too old; it can hold a security fault since fixed, in an app holding your provider keys, your identity and your passkeys; and meeting newer local data it risks reading it wrong. Dislike of a change is answered at the change, by saying plainly what changed, which is what these notes are for.</p>
234
235 <h3 id="s6">How updates arrive</h3>
236 <p>Daimond updates itself. There is nothing to download: the running tab notices a newer build and reloads onto it, and the reload loses nothing, because every boot recovers your work from the durability journal.</p>
237 <p>The only question is <em>when</em>. A normal update waits for a quiet moment — the tab in the background, or left untouched for about ten minutes — and never reloads over a running turn or a half-typed message. The chip beside the top-bar buttons says when one is ready; click it to take the update at once.</p>
238 <p>Some updates cannot wait. When a change means an out-of-date tab can no longer work with the server, the server refuses it, and the tab reloads onto the current version on its own. Even then it will not cut a running turn, and it waits a moment after your last keystroke instead of reloading mid-sentence. There is no way to decline a version: the app you would keep is the same app from the same people, and a browser cannot run yesterday's build against today's server.</p>
239
240 <h2 id="s7">The stage (centre)</h2>
241 <p>The stage is the middle zone. Its occupants sit side by side and never dock at the right, so you never leave the conversation to do a thing: read the message, watch the page, read the document beside the pages it was typeset into, with the daimon still there to be asked about any of it.</p>
242
243 <p>How many seats there are is decided by <strong>how wide the stage is</strong>, not by a fixed number: two at the narrowest, four at the widest, and one more for roughly every 380 pixels, which is where a line of prose still holds about 45 characters. Four of them want around 1550 pixels of stage, so they are for a large monitor; a laptop usually gets two or three. Two is the floor whatever the width, because the whole point of the stage is that whatever you are attending to opens <em>beside</em> the conversation rather than over it.</p>
244
245 <p>Narrow the window and the rightmost seat closes, the one you opened most recently first. The conversation is never the one to go. Widening again does not bring the panel back: a panel that reappeared because a window grew would be one you never asked for, with no way to tell it not to, and getting it back is one click on its chip. Ask for a panel when every seat is taken and the guest that has been on the stage longest leaves instead, because you have just said which one you want.</p>
246
247 <div class="cards">
248 <div class="card">
249 <h3 id="s8">AI, the chat</h3>
250 <p>Where you talk to the daimon. This is the default occupant and it returns whenever the stage would otherwise be empty. Your messages, the answers, and any tool steps appear here.</p>
251 </div>
252 <div class="card">
253 <h3 id="s9">Web</h3>
254 <p>A web page, shown or driven. Opened from the header or when Daimond follows a link.</p>
255 </div>
256 <div class="card">
257 <h3 id="s10">Doc</h3>
258 <p>A file as its characters, given room to read it and to edit it. Its header carries the paperclip that attaches what you are reading to what you are working on.</p>
259 </div>
260 <div class="card">
261 <h3 id="s11">Preview</h3>
262 <p>What a file looks like, as against what it says: a compiled PDF, a picture, or the typeset pages of a document as you write it. It is a panel of its own so that a source and its pages can be on screen at once, which is why the stage grew past two seats.</p>
263 </div>
264 <div class="card">
265 <h3 id="s12">Message</h3>
266 <p>A single mail message, opened from Email, read beside the chat.</p>
267 </div>
268 <div class="card">
269 <h3 id="s13">Tools</h3>
270 <p>What Daimond can do, and what the rest would cost. Opened from the <span class="ui">Tools</span> row.</p>
271 </div>
272 <div class="card">
273 <h3 id="s14">Compose</h3>
274 <p>Writing a mail message. Nothing here sends by itself: only the <span class="ui">Send</span> button puts mail on the wire, and only you can press it.</p>
275 </div>
276 <div class="card">
277 <h3 id="s15">Graph</h3>
278 <p>Your Diamonds and the links between them, drawn. Opened from the graph button on the Diamonds head, where you can also lay them out again or draw a new link.</p>
279 </div>
280 <div class="card">
281 <h3 id="s16">Terminal</h3>
282 <p>A real terminal on your own machine, in the same compartment a command runs in. See <a href="machine-operations.html">Machine Operations</a>.</p>
283 </div>
284 </div>
285
286 <p>Each stage guest has a header with a close button. A closed panel does not vanish: its chip stays in the top bar, unfilled, and clicking the chip brings it back.</p>
287
288 <h2 id="s17">The dock (right)</h2>
289 <p>The dock holds the sources you pull from. Closing one leaves its chip in the top bar; clicking the chip docks it again. How the dock tiles, and so how many panels it holds at once, is yours to set under <strong>Dock tiling</strong> in the appearance menu, described below.</p>
290
291 <div class="cards">
292 <div class="card">
293 <h3 id="s18">Email</h3>
294 <p>Your mailboxes and what is in them. Add a mailbox, sync, and open a message onto the stage.</p>
295 </div>
296 <div class="card">
297 <h3 id="s19">Workspace</h3>
298 <p>Your files, as an ordinary tree. The agent's file tools read and write here.</p>
299 </div>
300 <div class="card">
301 <h3 id="s20">Agents</h3>
302 <p>Live agent runs, as they happen, with a count of how many are working.</p>
303 </div>
304 <div class="card">
305 <h3 id="s21">Spending</h3>
306 <p>What you have spent, and on what. Covered in full on <a href="spending.html">Spending</a>.</p>
307 </div>
308 <div class="card">
309 <h3 id="s22">Pending</h3>
310 <p>What a daimon has asked for and is waiting on. Each row can be sorted by priority or by age, and answered with <span class="ui">Do it</span>, <span class="ui">Discuss it first</span> or <span class="ui">Drop it</span>.</p>
311 </div>
312 <div class="card">
313 <h3 id="s23">Trash</h3>
314 <p>Deleted chats and Diamonds, kept for thirty days and restorable on any of your devices. See <a href="chats-and-diamonds.html">Chats &amp; Diamonds</a>.</p>
315 </div>
316 </div>
317
318 <h2 id="s24">The top bar</h2>
319 <p>Across the top sit the wordmark, a row of <strong>panel chips</strong>, and, at the far right, a button to <strong>link another device</strong>, an <strong>About</strong> dialog, this <strong>guide</strong>, and the <strong>appearance and layout</strong> menu. A chip appears beside them when a new build is out.</p>
320
321 <h3 id="s25">The chips</h3>
322 <p>Every panel has a chip, open or shut, and clicking one toggles that panel. An open panel's chip is filled in, so the row reads as a map of what is on screen. Were only the closed panels to have one, the row would be longest when the app was emptiest and every chip would shift sideways each time one was used; a chip that stays put is one whose position you can learn. (Agents is the exception to <em>every</em>: it keeps out of the way until the first agent runs.)</p>
323 <p>The chips are grouped by zone (rail, then stage, then dock) with a thin divider between the groups, in the order the zones sit on screen. So a chip is on the side the panel it opens will appear on. Two marks carry meaning:</p>
324 <ul>
325 <li>A closed stage chip whose panel would <strong>displace a guest already on the stage</strong> is drawn with a dashed outline. It appears only when every seat is taken, which depends on the width, so the same chip is plain on a wide screen and dashed on a narrow one. The chat keeps its seat and the guest that has been there longest leaves. It warns without refusing, and it is an outline and not an added mark so the chip keeps its width and its neighbours stay put.</li>
326 <li>A closed dock chip is <strong>greyed out when the dock is full</strong>. Its tooltip points at the fix: a larger tiling in the appearance menu, or close a dock panel.</li>
327 </ul>
328
329 <h3 id="s26">Pinned panels, and the gallery</h3>
330 <p>You decide which chips sit in the top bar. Any panel can be <strong>pinned</strong> or unpinned; the unpinned ones live behind a <span class="ui">⋯</span> chip at the end of the row, with a count of how many are back there. Clicking it opens the <strong>gallery</strong>: every panel there is, searchable by name, grouped by zone, each row carrying a pin control and saying whether that panel is open. Clicking a row opens or closes the panel as a chip would.</p>
331 <p>The row may be incomplete only because the gallery is not. Nothing is ranked by how often you use it, either: a row that reordered itself would destroy the muscle memory fixed positions exist to build.</p>
332
333 <h3 id="s27">The palette</h3>
334 <p><kbd>Ctrl</kbd> <kbd>K</kbd>, <kbd>Cmd</kbd> <kbd>K</kbd> on a Mac, opens a search box that reaches any panel or setting by typing. Arrow keys move through the results, <span class="ui">Enter</span> runs the highlighted one, <span class="ui">Esc</span> closes it. It lists the panels, the palettes, the four text sizes, the dock tilings, the languages, the currencies and the permission modes. It is never the fastest route to a panel you can see a chip for; it is the route that stays complete however many panels there are.</p>
335
336 <h3 id="s28">By keyboard, and by ear</h3>
337 <p>Daimond can be driven without a mouse. <span class="ui">Tab</span> moves through the controls in the order they are drawn, <span class="ui">Enter</span> or <span class="ui">Space</span> operates the one you are on, and <span class="ui">Esc</span> closes whatever is open. Every dialog, menu and sheet also carries a cross in its corner, one control built one way, sized for a thumb on a phone.</p>
338 <p>Where you are is drawn <em>outside</em> the control, as a ring standing off from its edge. Drawn as a change to the control's own border, as it once was, the ring is legible only while the resting border is nearly invisible, so making borders visible would have taken the focus ring away on every palette at once. Against the surface behind it the ring survives the whole range: measured on all eleven palettes, the faintest ring is still four and a half times the contrast the standard asks for.</p>
339 <p>Two places in particular:</p>
340 <ul>
341 <li><strong>Email is fully operable from the keyboard.</strong> Mailboxes, folders, drafts and messages are controls you can reach and press, not rows that only answer a click. The mailbox you are in and the folder you are reading are announced as the current ones, so a screen reader says where you are and not only what is there.</li>
342 <li><strong>A dialog keeps focus inside itself</strong> while it is open, and hands it back to whatever opened it. Tabbing does not wander off behind a window covering the screen, and closing one does not drop you at the top of the page.</li>
343 </ul>
344 <p>With a screen reader, an answer is announced <strong>once, when it has arrived</strong> ("Daimond answered, 120 words"), and not as it is written. A live region is read out on every change, so a streaming answer would be recited at you in fragments for as long as the model kept typing. People switch that off, and an app whose announcements have been switched off looks answerable and is not. One sentence per turn is less, and it is usable.</p>
345 <p>The window has named regions and real headings throughout, so a screen reader's own list of landmarks is a working table of contents for the app. Anything you cannot reach or cannot hear is a fault, not a limit; say so.</p>
346
347 <h3 id="s29">Appearance and layout</h3>
348 <p>The button at the top right opens one menu holding the choices about how Daimond looks and sits, as opposed to what it does:</p>
349 <ul>
350 <li><strong>View</strong>: <span class="ui">Simple</span> or <span class="ui">Max</span>. Simple gives each thing its name and whether it is running, with everything else one press away; Max puts the model, the cost and the context beside it, so two can be compared without opening either. It sets the shape of the interface with it, since an airy shape at maximum density is a combination nobody wants. A tile's own cog still overrides it for that tile.</li>
351 <li><strong>Theme</strong>, eleven palettes in three bands: <span class="ui">Light</span>, <span class="ui">Intermediate</span> and <span class="ui">Dark</span>. The band is how you find one; within it the choice is taste, except <span class="ui">Amber</span>, which holds the blue out of everything it draws for reading late at night. This guide wears whatever palette the app is wearing when it is shown inside Daimond.</li>
352 <li><strong>Text size</strong>: four steps, <span class="ui">Small</span>, <span class="ui">Normal</span>, <span class="ui">Large</span> and <span class="ui">Larger</span>. Only the type responds: the frame, the padding and the panel widths stay put, because this is a control for reading and not a zoom. For a bigger interface, use the browser's own zoom. The sample in the menu is set in the size being chosen, so the control shows the change instead of naming it.</li>
353 <li><strong>Dock tiling</strong>: <span class="ui">Auto</span>, <span class="ui">1</span> column, <span class="ui">2×2</span>, <span class="ui">2×3</span> or <span class="ui">3×2</span>, each drawn as the grid it selects. The tiling also decides <em>how many panels the dock can hold</em>, its columns times its rows: four in one column, four at 2×2, six at either 2×3 or 3×2. <span class="ui">Auto</span> lets the window decide, taking a second column once there is room for one. A smaller grid closes whichever panels no longer fit, most recently opened first, and each goes back to being a chip you can see and click.</li>
354 <li><strong>Language</strong> and <strong>Currency</strong>: what Daimond says, and what figures are shown in. A language with no table yet stays in English; billing is always in US dollars, whatever the figures are displayed as.</li>
355 </ul>
356
357 <h3 id="s30">Keeping an arrangement with a Diamond</h3>
358 <p>With a Diamond selected, the appearance menu offers to keep the current arrangement of panels with it, and to update or forget one already saved. Opening that Diamond again puts it back, so returning to a piece of work is not reassembling its panels by hand. It is saved only when you ask, never inferred and never in the background, because a switch that silently closed panels would read as work being lost.</p>
359
360 <h2 id="s31">On a narrow screen</h2>
361 <p>Below the phone width the chips and the gallery give way to the phone shell, which answers the same question with less room: the chat is the floor, a panel rises over it as a sheet you can drag, and the rail becomes a drawer opened by the button at the top left. The row along the bottom is the same chip row, scrolled sideways. Every panel has a chip in it, in the order the zones run on a larger screen; the filled one is whatever you are looking at, rather than everything that is open, because on a phone only one thing is; and a chip takes you there rather than toggling, since the thing it would close is the whole screen. The admin panel is reached down the drawer. Nothing is lost; it is the same panels, shown one at a time.</p>
362 <p>Installed to the home screen, Daimond runs in its own window with no browser furniture, and holds itself clear of the notch and the home indicator. It is the same page and the same stored work, so nothing has to be moved into it.</p>
363
364 <div class="next">
365 <a href="index.html">&larr; Getting started</a>
366 <a href="models.html">Next: Models &amp; credits &rarr;</a>
367 </div>
368</main>
369
370<footer class="site-foot">
371 <span>Daimond runs in your browser. Nothing here is sent to us.</span>
372 <nav aria-label="Guide pages">
373 <a href="index.html">Getting started</a>
374 <a href="interface.html">Interface</a>
375 <a href="models.html">Models</a>
376 <a href="chats-and-diamonds.html">Chats &amp; Diamonds</a>
377 <a href="capps.html">Capps</a>
378 <a href="email-web-files.html">Email, Web &amp; files</a>
379 <a href="accounts.html">Accounts</a>
380 <a href="sync.html">Cross-device sync</a>
381 <a href="spending.html">Spending</a>
382 <a href="machine-operations.html">Machine Operations</a>
383 <a href="social.html">Social</a>
384 </nav>
385</footer>
386</body>
387</html>