burrito.space
group conversations with models and local files
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <link rel="icon" href="data:," />
7 <title>Hezo</title>
8 <style>
9 /* Theme tokens. Light defaults; the dark block flips them. Code blocks
10 stay dark in both themes (closer to a syntax-highlighter look).
11 Type + spacing tokens live alongside colors so the whole design
12 system has one definition site. Tune density / sizing by editing
13 the values here — every component reads them through var(). */
14 :root {
15 --mc-bg: #ffffff;
16 --mc-bg-elev: #fafafa;
17 --mc-bg-card: #f5f5f5;
18 --mc-bg-card-asst: #eef7ff;
19 --mc-bg-card-err: #fdecec;
20 --mc-bg-sel: #e8edf8;
21 --mc-bg-code-inline: rgba(0, 0, 0, 0.06);
22 --mc-bg-pre: #1e1e1e;
23 --mc-bg-th: rgba(0, 0, 0, 0.04);
24 --mc-fg: #222222;
25 --mc-fg-muted: #666666;
26 --mc-fg-faint: #888888;
27 --mc-fg-faintest: #aaaaaa;
28 --mc-fg-pre: #e6e6e6;
29 --mc-border: #dddddd;
30 --mc-border-faint: #ececec;
31 --mc-border-quote: #cfd7d7;
32 --mc-link: #0066ff;
33 --mc-danger: crimson;
34 --mc-warning: #a06600;
35 --mc-resize: #e6e6e6;
36 /* @mention chips: bots read blue, human members read violet. */
37 --mc-mention-bot-fg: #0052cc;
38 --mc-mention-bot-bg: #d8e6ff;
39 --mc-mention-user-fg: #6d34d6;
40 --mc-mention-user-bg: #ece1fb;
41
42 /* Type scale — t-shirt sizing. */
43 --mc-text-2xs: 11px;
44 --mc-text-xs: 12px;
45 --mc-text-sm: 13px;
46 --mc-text-md: 14px;
47 --mc-text-lg: 15px;
48 --mc-text-xl: 17px;
49 --mc-text-2xl: 24px;
50 --mc-lh-tight: 1.2;
51 --mc-lh-snug: 1.4;
52 --mc-lh-normal: 1.5;
53
54 /* Spacing scale — 4px-based; use for padding, margin, gap. */
55 --mc-sp-1: 4px;
56 --mc-sp-2: 8px;
57 --mc-sp-3: 12px;
58 --mc-sp-4: 16px;
59 --mc-sp-5: 20px;
60 --mc-sp-6: 24px;
61 --mc-sp-7: 32px;
62 --mc-sp-8: 48px;
63 }
64 @media (prefers-color-scheme: dark) {
65 :root {
66 --mc-bg: #1a1a1a;
67 --mc-bg-elev: #232323;
68 --mc-bg-card: #262626;
69 --mc-bg-card-asst: #1c2c3e;
70 --mc-bg-card-err: #3a1f1f;
71 --mc-bg-sel: #2a3a55;
72 --mc-bg-code-inline: rgba(255, 255, 255, 0.1);
73 --mc-bg-pre: #0d0d0d;
74 --mc-bg-th: rgba(255, 255, 255, 0.05);
75 --mc-fg: #e6e6e6;
76 --mc-fg-muted: #a0a0a0;
77 --mc-fg-faint: #808080;
78 --mc-fg-faintest: #5a5a5a;
79 --mc-fg-pre: #e6e6e6;
80 --mc-border: #333333;
81 --mc-border-faint: #2a2a2a;
82 --mc-border-quote: #444444;
83 --mc-link: #5aa9ff;
84 --mc-danger: #ff6b6b;
85 --mc-warning: #ffb84a;
86 --mc-resize: #333333;
87 --mc-mention-bot-fg: #7cc0ff;
88 --mc-mention-bot-bg: #213a5e;
89 --mc-mention-user-fg: #c9acff;
90 --mc-mention-user-bg: #3a2c57;
91 }
92 }
93
94 /* border-box everywhere: padding/border count toward the declared
95 width instead of adding to it. Without this, a padded flex item
96 (e.g. the composer / message entry box) stretches to its parent's
97 width and then the padding pushes it past the screen edge. The
98 app already assumed border-box in several inline styles; making it
99 universal kills that whole class of horizontal-overflow bug. */
100 *, *::before, *::after {
101 box-sizing: border-box;
102 }
103 html, body {
104 margin: 0;
105 padding: 0;
106 width: 100%;
107 height: 100%;
108 overflow: hidden;
109 }
110 /* The app root is pinned to the visible viewport — any element
111 that goes wider would clip rather than push the page past
112 the screen edge. Inner scrolling areas (conversation pane,
113 file pane, modal card) declare their own overflow.
114 Using dvh / dvw on supporting browsers (iOS Safari 15.4+) so
115 the URL-bar shift doesn't lop content. */
116 #root {
117 position: fixed;
118 inset: 0;
119 width: 100dvw;
120 height: 100dvh;
121 max-width: 100vw;
122 max-height: 100vh;
123 overflow: hidden;
124 }
125 /* Word-break long unbreakable strings (URLs, tokens) so they
126 can't push a card past the viewport on narrow screens. */
127 p, pre, code, a {
128 overflow-wrap: anywhere;
129 word-break: break-word;
130 }
131 /* Stop iOS form controls from imposing their intrinsic min-width
132 on flex/grid parents. */
133 input, textarea, select, button {
134 min-width: 0;
135 }
136 /* Don't let iOS Safari auto-zoom on focused inputs (font-size
137 < 16px triggers it). 16px is a no-zoom threshold. */
138 input, textarea, select {
139 font-size: 16px;
140 }
141 body {
142 font-family: -apple-system, system-ui, sans-serif;
143 color: var(--mc-fg);
144 background: var(--mc-bg);
145 }
146 input, textarea {
147 font-family: inherit;
148 background: var(--mc-bg);
149 color: var(--mc-fg);
150 border: 1px solid var(--mc-border);
151 border-radius: 4px;
152 }
153 button {
154 font-family: inherit;
155 background: var(--mc-bg-elev);
156 color: var(--mc-fg);
157 border: 1px solid var(--mc-border);
158 border-radius: 4px;
159 cursor: pointer;
160 }
161 button:disabled {
162 opacity: 0.5;
163 cursor: not-allowed;
164 }
165
166 /* Markdown rendering — used by the file preview pane. */
167 .hz-md {
168 font-size: var(--mc-text-lg);
169 line-height: var(--mc-lh-normal);
170 color: var(--mc-fg);
171 }
172 .hz-md h1, .hz-md h2, .hz-md h3, .hz-md h4 {
173 line-height: var(--mc-lh-tight);
174 margin: 1.4em 0 0.5em;
175 font-weight: 600;
176 }
177 .hz-md h1 { font-size: 1.5em; }
178 .hz-md h2 { font-size: 1.3em; }
179 .hz-md h3 { font-size: 1.1em; }
180 .hz-md h4 { font-size: 1em; }
181 .hz-md p { margin: 0.7em 0; }
182 .hz-md a { color: var(--mc-link); text-decoration: underline; }
183 .hz-md ul, .hz-md ol { margin: 0.7em 0; padding-left: 1.6em; }
184 .hz-md li { margin: 0.25em 0; }
185 .hz-md blockquote {
186 border-left: 3px solid var(--mc-border-quote);
187 padding: 0 0.9em;
188 margin: 0.9em 0;
189 color: var(--mc-fg-muted);
190 }
191 .hz-md code {
192 background: var(--mc-bg-code-inline);
193 padding: 0 4px;
194 border-radius: 3px;
195 font-family: ui-monospace, "SF Mono", Menlo, monospace;
196 font-size: 0.92em;
197 }
198 .hz-md pre {
199 background: var(--mc-bg-pre);
200 color: var(--mc-fg-pre);
201 padding: 12px 14px;
202 border-radius: 4px;
203 overflow-x: auto;
204 font-size: var(--mc-text-sm);
205 line-height: var(--mc-lh-snug);
206 }
207 .hz-md pre code { background: transparent; padding: 0; font-size: inherit; }
208 /* Wide tables scroll inside the message rather than push the
209 whole layout past the screen edge on narrow viewports.
210 display:block is what lets overflow-x take effect on a table. */
211 .hz-md table {
212 border-collapse: collapse;
213 margin: 0.8em 0;
214 display: block;
215 max-width: 100%;
216 overflow-x: auto;
217 }
218 .hz-md th, .hz-md td {
219 border: 1px solid var(--mc-border);
220 padding: 4px 8px;
221 }
222 .hz-md th { background: var(--mc-bg-th); }
223 /* Images shrink to the content width instead of overflowing it. */
224 .hz-md img { max-width: 100%; height: auto; }
225 .hz-md hr { border: 0; border-top: 1px solid var(--mc-border-faint); margin: 1em 0; }
226
227 /* react-resizable-panels handle. */
228 .hz-resize {
229 width: 4px;
230 background: transparent;
231 cursor: col-resize;
232 transition: background 0.15s ease;
233 }
234 .hz-resize[data-resize-handle-active] {
235 background: var(--mc-resize);
236 }
237 .hz-resize:hover {
238 background: var(--mc-resize);
239 }
240 </style>
241 </head>
242 <body>
243 <div id="root"></div>
244 <script type="module" src="./src/main.tsx"></script>
245 </body>
246</html>