@gemboss/ui 0.45.0 → 0.47.0
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.
- package/CHANGELOG.md +111 -0
- package/README.md +129 -1
- package/catalog/editor.html +1 -1
- package/catalog/index.html +229 -86
- package/gemboss-ui.css +2 -2
- package/package.json +10 -2
- package/parts/components.css +1 -1
- package/parts/core.css +1 -1
- package/parts/shell.css +1 -1
- package/src/assistant-plain.js +1 -1
- package/src/editor/layers.tsx +1 -1
- package/src/editor.css +1 -1
- package/src/icons.tsx +2 -0
- package/src/index.ts +8 -1
- package/src/language-switcher-plain.js +1 -0
- package/src/language-switcher.css +1 -0
- package/src/language-switcher.tsx +206 -0
- package/src/logo-sheet.css +1 -0
- package/src/logo-sheet.tsx +63 -0
- package/src/question-card.css +1 -1
- package/src/question-card.tsx +19 -4
- package/src/session-rail-plain.js +1 -0
- package/src/setup-guide.css +1 -1
- package/src/setup-guide.tsx +92 -22
package/catalog/index.html
CHANGED
|
@@ -27,7 +27,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
27
27
|
@media (max-width:760px){.cat{grid-template-columns:1fr;padding:16px}.cat-nav{position:static;flex-direction:row;flex-wrap:wrap}}
|
|
28
28
|
</style></head><body>
|
|
29
29
|
<div class="cat"><nav class="cat-nav" aria-label="Mục"><a href="#tokens">Token</a><a href="#buttons">Nút</a><a href="#fields">Ô nhập</a><a href="#choice">Tab, nhóm nút, thẻ</a><a href="#surfaces">Thẻ, số liệu, bảng, trạng thái trống</a><a href="#report">Báo cáo</a><a href="#collections">Bảng, list, lưới, board</a><a href="#resizer">Thanh kéo giữa hai cột</a><a href="#modal">Hộp thoại, toast, menu (JS thuần)</a><a href="#sheet">Ngăn trượt cạnh phải</a><a href="#reader">Hộp đọc tài liệu</a><a href="#settings">Hộp cài đặt</a><a href="#switcher">Chuyển dịch vụ</a><a href="#shell">Khung app</a><a href="#nav">Chờ điều hướng</a><a href="#page">Bề rộng nội dung</a><a href="#portal">Cổng công khai: tab trên topbar, tìm kiếm, sáng / tối, người dẫn đầu</a><a href="#site">Trang công khai: thanh trên, logo cỡ site, nút, chân trang</a><a href="#auth">Đăng nhập</a><a href="#setup">Hướng dẫn thiết lập</a><a href="#chat">Thân chat</a><a href="#reactions">Reactions</a><a href="#team-chat">Chat đội</a><a href="#action-card">Thẻ hành động</a><a href="#assistant-engine">Trợ lý: chọn engine</a><a href="#assistant-bridge">Trợ lý: cầu nối trên máy (0.32.0)</a><a href="#assistant-chat">Trợ lý: khung chat (0.29.0)</a><a href="#assistant">Trợ lý: cột phiên</a><a href="#icons">Icon</a><a href="#editor">Editor</a></nav>
|
|
30
|
-
<main><header class="cat-head"><h1>@gemboss/ui 0.
|
|
30
|
+
<main><header class="cat-head"><h1>@gemboss/ui 0.47.0</h1><p>Ngôn ngữ thiết kế chung của các công cụ GemBoss. Markup dưới mỗi ví dụ là đúng thứ package render ra; bề mặt không dùng React (HTML tĩnh, Python) chép markup này và nạp <code>gemboss-ui.css</code>. Dựng từ gemboss <code>0f08408af446</code>.</p></header>
|
|
31
31
|
<section id="tokens"><h2>Token</h2><p>Đổi giao diện một bề mặt bằng cách đặt lại token, không viết đè class. Tên và giá trị đọc thẳng từ gemboss-ui.css.</p><div class="cat-swatches"><div class="cat-swatch"><i style="background:var(--gemboss-primary)"></i><code>--gemboss-primary</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-primary-dark)"></i><code>--gemboss-primary-dark</code><span>#000000</span></div><div class="cat-swatch"><i style="background:var(--gemboss-primary-soft)"></i><code>--gemboss-primary-soft</code><span>#f2f3f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent)"></i><code>--gemboss-accent</code><span>#5661f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-strong)"></i><code>--gemboss-accent-strong</code><span>#3a44de</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-soft)"></i><code>--gemboss-accent-soft</code><span>#eef0fe</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-wash)"></i><code>--gemboss-accent-wash</code><span>#f7f8ff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-tint)"></i><code>--gemboss-accent-tint</code><span>#dfe2ff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-mid)"></i><code>--gemboss-accent-mid</code><span>#c9cffd</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text-strong)"></i><code>--gemboss-text-strong</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text)"></i><code>--gemboss-text</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text-muted)"></i><code>--gemboss-text-muted</code><span>#686b71</span></div><div class="cat-swatch"><i style="background:var(--gemboss-surface)"></i><code>--gemboss-surface</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-canvas)"></i><code>--gemboss-canvas</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-preview-canvas)"></i><code>--gemboss-preview-canvas</code><span>#eceef1</span></div><div class="cat-swatch"><i style="background:var(--gemboss-rail-bg)"></i><code>--gemboss-rail-bg</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-panel-bg)"></i><code>--gemboss-panel-bg</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-divider)"></i><code>--gemboss-divider</code><span>#e5e7ea</span></div><div class="cat-swatch"><i style="background:var(--gemboss-divider-soft)"></i><code>--gemboss-divider-soft</code><span>#edeff2</span></div><div class="cat-swatch"><i style="background:var(--gemboss-hover)"></i><code>--gemboss-hover</code><span>#eceef2</span></div><div class="cat-swatch"><i style="background:var(--gemboss-active-bg)"></i><code>--gemboss-active-bg</code><span>#f0f1f4</span></div><div class="cat-swatch"><i style="background:var(--gemboss-active-fg)"></i><code>--gemboss-active-fg</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger)"></i><code>--gemboss-danger</code><span>#d72c0d</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-strong)"></i><code>--gemboss-danger-strong</code><span>#b42318</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-soft)"></i><code>--gemboss-danger-soft</code><span>#fff0e9</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-border)"></i><code>--gemboss-danger-border</code><span>#f5c9bc</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success)"></i><code>--gemboss-success</code><span>#007f5f</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-strong)"></i><code>--gemboss-success-strong</code><span>#0a6a4c</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-soft)"></i><code>--gemboss-success-soft</code><span>#e3f1df</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-border)"></i><code>--gemboss-success-border</code><span>#b7dfcd</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning)"></i><code>--gemboss-warning</code><span>#9a6700</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning-soft)"></i><code>--gemboss-warning-soft</code><span>#fff8e0</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning-border)"></i><code>--gemboss-warning-border</code><span>#f5d569</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-bg)"></i><code>--gemboss-dark-bg</code><span>#0a0a0c</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-rail)"></i><code>--gemboss-dark-rail</code><span>#0e0e11</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-surface)"></i><code>--gemboss-dark-surface</code><span>#16161a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-surface-2)"></i><code>--gemboss-dark-surface-2</code><span>#1e1e24</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-divider)"></i><code>--gemboss-dark-divider</code><span>#2a2a31</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-text)"></i><code>--gemboss-dark-text</code><span>#ededf0</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-muted)"></i><code>--gemboss-dark-muted</code><span>#9a9aa4</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-bg)"></i><code>--gemboss-field-bg</code><span>#fdfdfd</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-bg-hover)"></i><code>--gemboss-field-bg-hover</code><span>#fafafa</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-ink)"></i><code>--gemboss-field-ink</code><span>#303030</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-placeholder)"></i><code>--gemboss-field-placeholder</code><span>#616161</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line)"></i><code>--gemboss-field-line</code><span>#8a8a8a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line-hover)"></i><code>--gemboss-field-line-hover</code><span>#616161</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line-active)"></i><code>--gemboss-field-line-active</code><span>#1a1a1a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-ink)"></i><code>--gemboss-chip-ink</code><span>#303633</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-line)"></i><code>--gemboss-chip-line</code><span>#cfd6ce</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-line-hover)"></i><code>--gemboss-chip-line-hover</code><span>#aab4ad</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-bg-hover)"></i><code>--gemboss-chip-bg-hover</code><span>#f6f7f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-on-primary)"></i><code>--gemboss-on-primary</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-app-bg)"></i><code>--gemboss-app-bg</code><span>#ffffff</span></div></div><table class="ui-table cat-scale"><thead><tr><th>Token</th><th>Giá trị</th><th>Mẫu</th></tr></thead><tbody><tr><td><code>--gemboss-fs-micro</code></td><td>11px</td><td style="font-size:var(--gemboss-fs-micro)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-caption</code></td><td>12px</td><td style="font-size:var(--gemboss-fs-caption)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-body</code></td><td>14px</td><td style="font-size:var(--gemboss-fs-body)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-body-lg</code></td><td>16px</td><td style="font-size:var(--gemboss-fs-body-lg)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h3</code></td><td>16px</td><td style="font-size:var(--gemboss-fs-h3)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h2</code></td><td>20px</td><td style="font-size:var(--gemboss-fs-h2)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h1</code></td><td>24px</td><td style="font-size:var(--gemboss-fs-h1)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-display</code></td><td>30px</td><td style="font-size:var(--gemboss-fs-display)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-radius-xs</code></td><td>4px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-xs)"></i></td></tr><tr><td><code>--gemboss-radius-sm</code></td><td>6px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-sm)"></i></td></tr><tr><td><code>--gemboss-radius-md</code></td><td>8px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-md)"></i></td></tr><tr><td><code>--gemboss-radius-lg</code></td><td>12px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-lg)"></i></td></tr><tr><td><code>--gemboss-radius-xl</code></td><td>16px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-xl)"></i></td></tr><tr><td><code>--gemboss-radius-2xl</code></td><td>20px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-2xl)"></i></td></tr><tr><td><code>--gemboss-radius-full</code></td><td>999px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-full)"></i></td></tr><tr><td><code>--gemboss-shadow-resting</code></td><td class="cat-small">0 1px 2px rgba(31, 30, 29, 0.04), 0 2px 6px rgba(31, 30, 29, 0.06)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-resting);border:0"></i></td></tr><tr><td><code>--gemboss-shadow-raised</code></td><td class="cat-small">0 4px 16px rgba(31, 30, 29, 0.10)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-raised);border:0"></i></td></tr><tr><td><code>--gemboss-shadow-overlay</code></td><td class="cat-small">0 16px 48px rgba(31, 30, 29, 0.18)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-overlay);border:0"></i></td></tr></tbody></table></section>
|
|
32
32
|
<section id="buttons"><h2>Nút</h2><p>Một lớp <code>ui-btn</code>, ba biến thể, tông đỏ, một cỡ nhỏ. Cao 28px dưới chuột như Button của Polaris (ô nhập và ô chọn 32, như TextField), 44px dưới ngón tay và ở khổ điện thoại, cỡ nhỏ cũng vậy. Dùng được trên <code><button></code> lẫn <code><a></code> (căn giữa sẵn).</p><figure class="cat-demo"><figcaption>Mặc định · chính · ghost · nhỏ · tắt</figcaption><div class="cat-live"><div class="cat-row"><button type="button" class="ui-btn">Lưu nháp</button><button type="button" class="ui-btn ui-btn--primary">Xuất bản</button><button type="button" class="ui-btn ui-btn--ghost">Huỷ</button><button type="button" class="ui-btn ui-btn--sm">Nhỏ</button><button type="button" class="ui-btn ui-btn--primary" disabled>Đang lưu…</button><a class="ui-btn" href="#buttons">Link dạng nút</a></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="cat-row">
|
|
33
33
|
<button type="button" class="ui-btn">Lưu nháp</button>
|
|
@@ -7254,7 +7254,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
7254
7254
|
</aside>
|
|
7255
7255
|
</div>
|
|
7256
7256
|
</main></code></pre></details></figure></section>
|
|
7257
|
-
<section id="setup"><h2>Hướng dẫn thiết lập</h2><p><code>SetupGuide</code> (0.30.0, CSS <code>setup-guide.css</code> do component tự nạp): Setup guide của admin (StoreChecklistCard) thành component. Đầu thẻ có số đã xong và thanh; các bước gập, bước mở là bước đầu chưa xong; bấm đầu thẻ để gập cả hướng dẫn. Toàn <code><details></code>, một nhóm <code>name</code> nên trình duyệt giữ một bước mở, không cần script: trang HTML thuần viết đúng markup này là chạy.</p><figure class="cat-demo"><figcaption>SetupGuide</figcaption><div class="cat-live"><details class="ui-card ui-setup" open=""><summary class="ui-setup__head"><h2 class="ui-setup__title">Telegram alerts</h2><span class="ui-badge ui-badge--warning">1/3</span></summary><div class="ui-setup__inner"><p class="ui-setup__desc">Ping a chat the moment a registration lands.</p><progress class="ui-setup__bar" value="1" max="3" aria-label="Setup progress">1/3</progress><div class="ui-setup__steps"><details class="ui-setup__step" name="gb-setup:c82-R0:" data-state="done"><summary class="ui-setup__row"><span class="ui-setup__mark" aria-hidden="true">✓</span><span class="ui-setup__label">Connect a bot</span></summary><div class="ui-setup__body"><p>Sending as @gemform_alerts_bot.</p></div></details><details class="ui-setup__step" name="gb-setup:c82-R0:" open="" data-state="todo"><summary class="ui-setup__row"><span class="ui-setup__mark" aria-hidden="true">○</span><span class="ui-setup__label">Choose where alerts go</span></summary><div class="ui-setup__body"><p>Say hi to the bot from the chat you want alerts in, then find it here.</p><button type="button" class="ui-btn">Find my chat</button></div></details><details class="ui-setup__step" name="gb-setup:c82-R0:" data-state="todo"><summary class="ui-setup__row"><span class="ui-setup__mark" aria-hidden="true">○</span><span class="ui-setup__label">Send a test alert</span></summary><div class="ui-setup__body"><p>One message to every chat, to see it land.</p></div></details></div></div></details></div><details class="cat-code"><summary>Markup</summary><pre><code><details class="ui-card ui-setup" open="">
|
|
7257
|
+
<section id="setup"><h2>Hướng dẫn thiết lập</h2><p><code>SetupGuide</code> (0.30.0, CSS <code>setup-guide.css</code> do component tự nạp): Setup guide của admin (StoreChecklistCard) thành component. Đầu thẻ có số đã xong và thanh; các bước gập, bước mở là bước đầu chưa xong; bấm đầu thẻ để gập cả hướng dẫn. Toàn <code><details></code>, một nhóm <code>name</code> nên trình duyệt giữ một bước mở, không cần script: trang HTML thuần viết đúng markup này là chạy. 21/10/2026 (Chris: checklist onboarding của GemBoss và GemCommunity một kiểu, một kit): dấu tick là vòng 18px, xong thì tô xanh có dấu ✓ trắng; thanh tô cùng màu xanh đó; các bước đã xong lúc mở gộp vào một hàng “✓ N completed”; <code>optional</code> là nhóm “Optional” dưới đường kẻ, không tính vào số; <code>action</code> là nút của bước ở cuối hàng; <code>onDismiss</code> cho dấu × thay vì gập.</p><figure class="cat-demo"><figcaption>SetupGuide <span>foldDone={false}: bước đã xong vẫn nằm trong danh sách</span></figcaption><div class="cat-live"><details class="ui-card ui-setup" open=""><summary class="ui-setup__head"><h2 class="ui-setup__title">Telegram alerts</h2><span class="ui-badge ui-badge--warning">1/3</span></summary><div class="ui-setup__inner"><p class="ui-setup__desc">Ping a chat the moment a registration lands.</p><progress class="ui-setup__bar" value="1" max="3" aria-label="Setup progress">1/3</progress><div class="ui-setup__steps"><details class="ui-setup__step" name="gb-setup:c82-R0:" data-state="done"><summary class="ui-setup__row"><span class="ui-setup__mark" aria-hidden="true">✓</span><span class="ui-setup__label">Connect a bot</span></summary><div class="ui-setup__body"><p>Sending as @gemform_alerts_bot.</p></div></details><details class="ui-setup__step" name="gb-setup:c82-R0:" open="" data-state="todo"><summary class="ui-setup__row"><span class="ui-setup__mark" aria-hidden="true">○</span><span class="ui-setup__label">Choose where alerts go</span></summary><div class="ui-setup__body"><p>Say hi to the bot from the chat you want alerts in, then find it here.</p><button type="button" class="ui-btn">Find my chat</button></div></details><details class="ui-setup__step" name="gb-setup:c82-R0:" data-state="todo"><summary class="ui-setup__row"><span class="ui-setup__mark" aria-hidden="true">○</span><span class="ui-setup__label">Send a test alert</span></summary><div class="ui-setup__body"><p>One message to every chat, to see it land.</p></div></details></div></div></details></div><details class="cat-code"><summary>Markup</summary><pre><code><details class="ui-card ui-setup" open="">
|
|
7258
7258
|
<summary class="ui-setup__head">
|
|
7259
7259
|
<h2 class="ui-setup__title">Telegram alerts</h2>
|
|
7260
7260
|
<span class="ui-badge ui-badge--warning">1/3</span>
|
|
@@ -7293,7 +7293,150 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
7293
7293
|
</details>
|
|
7294
7294
|
</div>
|
|
7295
7295
|
</div>
|
|
7296
|
-
</details></code></pre></details></figure></
|
|
7296
|
+
</details></code></pre></details></figure><figure class="cat-demo"><figcaption>Set up your store (admin): bước đã xong gộp lại, một bước chưa đo, nhóm Optional</figcaption><div class="cat-live"><details class="ui-card ui-setup" open=""><summary class="ui-setup__head"><h2 class="ui-setup__title">Set up your store</h2><span class="ui-badge ui-badge--warning">3/5</span><span class="ui-badge">1 not measured</span></summary><div class="ui-setup__inner"><progress class="ui-setup__bar" value="3" max="5" aria-label="Setup progress">3/5</progress><div class="ui-setup__steps"><details class="ui-setup__done"><summary class="ui-setup__row"><span class="ui-setup__mark" aria-hidden="true">✓</span><span class="ui-setup__label">3 completed</span></summary><div class="ui-setup__steps"><details class="ui-setup__step" name="cat-store" data-state="done"><summary class="ui-setup__row"><span class="ui-setup__mark" aria-hidden="true">✓</span><span class="ui-setup__label">Connect your Shopify store</span></summary><div class="ui-setup__body"><p>Connected as demo-shop.myshopify.com.</p></div></details><details class="ui-setup__step" name="cat-store" data-state="done"><summary class="ui-setup__row"><span class="ui-setup__mark" aria-hidden="true">✓</span><span class="ui-setup__label">Have real products to sell</span></summary><div class="ui-setup__body"><p>24 products, all with a price and a photo.</p></div></details><details class="ui-setup__step" name="cat-store" data-state="done"><summary class="ui-setup__row"><span class="ui-setup__mark" aria-hidden="true">✓</span><span class="ui-setup__label">Have at least one page</span></summary><div class="ui-setup__body"><p>3 pages, 1 published.</p></div></details></div></details><details class="ui-setup__step" name="cat-store" open="" data-state="todo"><summary class="ui-setup__row"><span class="ui-setup__mark" aria-hidden="true">○</span><span class="ui-setup__label">Run an A/B test</span></summary><div class="ui-setup__body"><p>No test yet. Until one runs, every layout choice on this store is a guess.</p><button type="button" class="ui-btn">Open</button></div></details><details class="ui-setup__step" name="cat-store" data-state="unknown"><summary class="ui-setup__row"><span class="ui-setup__mark" aria-hidden="true">?</span><span class="ui-setup__label">Pick a theme</span></summary><div class="ui-setup__body"><p>Could not read your themes just now.</p></div></details></div><div class="ui-setup__optional"><h3 class="ui-setup__subtitle">Optional</h3><div class="ui-setup__steps"><details class="ui-setup__step" name="cat-store" data-state="todo"><summary class="ui-setup__row"><span class="ui-setup__mark" aria-hidden="true">○</span><span class="ui-setup__label">Connect Telegram</span></summary><div class="ui-setup__body"><p>Alerts reach you where you already read.</p></div></details><div class="ui-setup__step" data-state="done"><div class="ui-setup__row ui-setup__row--static"><span class="ui-setup__mark" aria-hidden="true">✓</span><span class="ui-setup__label">Set a login password</span></div></div></div></div></div></details></div><details class="cat-code"><summary>Markup</summary><pre><code><details class="ui-card ui-setup" open="">
|
|
7297
|
+
<summary class="ui-setup__head">
|
|
7298
|
+
<h2 class="ui-setup__title">Set up your store</h2>
|
|
7299
|
+
<span class="ui-badge ui-badge--warning">3/5</span>
|
|
7300
|
+
<span class="ui-badge">1 not measured</span>
|
|
7301
|
+
</summary>
|
|
7302
|
+
<div class="ui-setup__inner">
|
|
7303
|
+
<progress class="ui-setup__bar" value="3" max="5" aria-label="Setup progress">3/5</progress>
|
|
7304
|
+
<div class="ui-setup__steps">
|
|
7305
|
+
<details class="ui-setup__done">
|
|
7306
|
+
<summary class="ui-setup__row">
|
|
7307
|
+
<span class="ui-setup__mark" aria-hidden="true">✓</span>
|
|
7308
|
+
<span class="ui-setup__label">3 completed</span>
|
|
7309
|
+
</summary>
|
|
7310
|
+
<div class="ui-setup__steps">
|
|
7311
|
+
<details class="ui-setup__step" name="cat-store" data-state="done">
|
|
7312
|
+
<summary class="ui-setup__row">
|
|
7313
|
+
<span class="ui-setup__mark" aria-hidden="true">✓</span>
|
|
7314
|
+
<span class="ui-setup__label">Connect your Shopify store</span>
|
|
7315
|
+
</summary>
|
|
7316
|
+
<div class="ui-setup__body">
|
|
7317
|
+
<p>Connected as demo-shop.myshopify.com.</p>
|
|
7318
|
+
</div>
|
|
7319
|
+
</details>
|
|
7320
|
+
<details class="ui-setup__step" name="cat-store" data-state="done">
|
|
7321
|
+
<summary class="ui-setup__row">
|
|
7322
|
+
<span class="ui-setup__mark" aria-hidden="true">✓</span>
|
|
7323
|
+
<span class="ui-setup__label">Have real products to sell</span>
|
|
7324
|
+
</summary>
|
|
7325
|
+
<div class="ui-setup__body">
|
|
7326
|
+
<p>24 products, all with a price and a photo.</p>
|
|
7327
|
+
</div>
|
|
7328
|
+
</details>
|
|
7329
|
+
<details class="ui-setup__step" name="cat-store" data-state="done">
|
|
7330
|
+
<summary class="ui-setup__row">
|
|
7331
|
+
<span class="ui-setup__mark" aria-hidden="true">✓</span>
|
|
7332
|
+
<span class="ui-setup__label">Have at least one page</span>
|
|
7333
|
+
</summary>
|
|
7334
|
+
<div class="ui-setup__body">
|
|
7335
|
+
<p>3 pages, 1 published.</p>
|
|
7336
|
+
</div>
|
|
7337
|
+
</details>
|
|
7338
|
+
</div>
|
|
7339
|
+
</details>
|
|
7340
|
+
<details class="ui-setup__step" name="cat-store" open="" data-state="todo">
|
|
7341
|
+
<summary class="ui-setup__row">
|
|
7342
|
+
<span class="ui-setup__mark" aria-hidden="true">○</span>
|
|
7343
|
+
<span class="ui-setup__label">Run an A/B test</span>
|
|
7344
|
+
</summary>
|
|
7345
|
+
<div class="ui-setup__body">
|
|
7346
|
+
<p>No test yet. Until one runs, every layout choice on this store is a guess.</p>
|
|
7347
|
+
<button type="button" class="ui-btn">Open</button>
|
|
7348
|
+
</div>
|
|
7349
|
+
</details>
|
|
7350
|
+
<details class="ui-setup__step" name="cat-store" data-state="unknown">
|
|
7351
|
+
<summary class="ui-setup__row">
|
|
7352
|
+
<span class="ui-setup__mark" aria-hidden="true">?</span>
|
|
7353
|
+
<span class="ui-setup__label">Pick a theme</span>
|
|
7354
|
+
</summary>
|
|
7355
|
+
<div class="ui-setup__body">
|
|
7356
|
+
<p>Could not read your themes just now.</p>
|
|
7357
|
+
</div>
|
|
7358
|
+
</details>
|
|
7359
|
+
</div>
|
|
7360
|
+
<div class="ui-setup__optional">
|
|
7361
|
+
<h3 class="ui-setup__subtitle">Optional</h3>
|
|
7362
|
+
<div class="ui-setup__steps">
|
|
7363
|
+
<details class="ui-setup__step" name="cat-store" data-state="todo">
|
|
7364
|
+
<summary class="ui-setup__row">
|
|
7365
|
+
<span class="ui-setup__mark" aria-hidden="true">○</span>
|
|
7366
|
+
<span class="ui-setup__label">Connect Telegram</span>
|
|
7367
|
+
</summary>
|
|
7368
|
+
<div class="ui-setup__body">
|
|
7369
|
+
<p>Alerts reach you where you already read.</p>
|
|
7370
|
+
</div>
|
|
7371
|
+
</details>
|
|
7372
|
+
<div class="ui-setup__step" data-state="done">
|
|
7373
|
+
<div class="ui-setup__row ui-setup__row--static">
|
|
7374
|
+
<span class="ui-setup__mark" aria-hidden="true">✓</span>
|
|
7375
|
+
<span class="ui-setup__label">Set a login password</span>
|
|
7376
|
+
</div>
|
|
7377
|
+
</div>
|
|
7378
|
+
</div>
|
|
7379
|
+
</div>
|
|
7380
|
+
</div>
|
|
7381
|
+
</details></code></pre></details></figure><figure class="cat-demo"><figcaption>Start here (GemCommunity): nút ở cuối hàng, dấu × để ẩn</figcaption><div class="cat-live"><section class="ui-card ui-setup"><div class="ui-setup__head"><h2 class="ui-setup__title">Start here</h2><span class="ui-badge ui-badge--warning">1/4</span><button type="button" class="ui-setup__x" aria-label="Dismiss"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"></path></svg></button></div><div class="ui-setup__inner"><p class="ui-setup__desc">A few steps to get into the loop.</p><progress class="ui-setup__bar" value="1" max="4" aria-label="Setup progress">1/4</progress><div class="ui-setup__steps"><details class="ui-setup__done"><summary class="ui-setup__row"><span class="ui-setup__mark" aria-hidden="true">✓</span><span class="ui-setup__label">1 completed</span></summary><div class="ui-setup__steps"><div class="ui-setup__step" data-state="done"><div class="ui-setup__row ui-setup__row--static"><span class="ui-setup__mark" aria-hidden="true">✓</span><span class="ui-setup__label">Fill your profile (photo, headline, About)</span></div></div></div></details><div class="ui-setup__step" data-state="todo"><div class="ui-setup__row ui-setup__row--static"><span class="ui-setup__mark" aria-hidden="true">○</span><span class="ui-setup__label">Name the one thing you're fixing in your store this month</span><span class="ui-setup__action"><a class="ui-btn" href="#setup">Open</a></span></div></div><div class="ui-setup__step" data-state="todo"><div class="ui-setup__row ui-setup__row--static"><span class="ui-setup__mark" aria-hidden="true">○</span><span class="ui-setup__label">Write your first post</span><span class="ui-setup__action"><a class="ui-btn" href="#setup">Open</a></span></div></div><div class="ui-setup__step" data-state="todo"><div class="ui-setup__row ui-setup__row--static"><span class="ui-setup__mark" aria-hidden="true">○</span><span class="ui-setup__label">Comment on a post</span><span class="ui-setup__action"><a class="ui-btn" href="#setup">Open</a></span></div></div></div></div></section></div><details class="cat-code"><summary>Markup</summary><pre><code><section class="ui-card ui-setup">
|
|
7382
|
+
<div class="ui-setup__head">
|
|
7383
|
+
<h2 class="ui-setup__title">Start here</h2>
|
|
7384
|
+
<span class="ui-badge ui-badge--warning">1/4</span>
|
|
7385
|
+
<button type="button" class="ui-setup__x" aria-label="Dismiss">
|
|
7386
|
+
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true">
|
|
7387
|
+
<path d="M4 4l8 8M12 4l-8 8">
|
|
7388
|
+
</path>
|
|
7389
|
+
</svg>
|
|
7390
|
+
</button>
|
|
7391
|
+
</div>
|
|
7392
|
+
<div class="ui-setup__inner">
|
|
7393
|
+
<p class="ui-setup__desc">A few steps to get into the loop.</p>
|
|
7394
|
+
<progress class="ui-setup__bar" value="1" max="4" aria-label="Setup progress">1/4</progress>
|
|
7395
|
+
<div class="ui-setup__steps">
|
|
7396
|
+
<details class="ui-setup__done">
|
|
7397
|
+
<summary class="ui-setup__row">
|
|
7398
|
+
<span class="ui-setup__mark" aria-hidden="true">✓</span>
|
|
7399
|
+
<span class="ui-setup__label">1 completed</span>
|
|
7400
|
+
</summary>
|
|
7401
|
+
<div class="ui-setup__steps">
|
|
7402
|
+
<div class="ui-setup__step" data-state="done">
|
|
7403
|
+
<div class="ui-setup__row ui-setup__row--static">
|
|
7404
|
+
<span class="ui-setup__mark" aria-hidden="true">✓</span>
|
|
7405
|
+
<span class="ui-setup__label">Fill your profile (photo, headline, About)</span>
|
|
7406
|
+
</div>
|
|
7407
|
+
</div>
|
|
7408
|
+
</div>
|
|
7409
|
+
</details>
|
|
7410
|
+
<div class="ui-setup__step" data-state="todo">
|
|
7411
|
+
<div class="ui-setup__row ui-setup__row--static">
|
|
7412
|
+
<span class="ui-setup__mark" aria-hidden="true">○</span>
|
|
7413
|
+
<span class="ui-setup__label">Name the one thing you&#x27;re fixing in your store this month</span>
|
|
7414
|
+
<span class="ui-setup__action">
|
|
7415
|
+
<a class="ui-btn" href="#setup">Open</a>
|
|
7416
|
+
</span>
|
|
7417
|
+
</div>
|
|
7418
|
+
</div>
|
|
7419
|
+
<div class="ui-setup__step" data-state="todo">
|
|
7420
|
+
<div class="ui-setup__row ui-setup__row--static">
|
|
7421
|
+
<span class="ui-setup__mark" aria-hidden="true">○</span>
|
|
7422
|
+
<span class="ui-setup__label">Write your first post</span>
|
|
7423
|
+
<span class="ui-setup__action">
|
|
7424
|
+
<a class="ui-btn" href="#setup">Open</a>
|
|
7425
|
+
</span>
|
|
7426
|
+
</div>
|
|
7427
|
+
</div>
|
|
7428
|
+
<div class="ui-setup__step" data-state="todo">
|
|
7429
|
+
<div class="ui-setup__row ui-setup__row--static">
|
|
7430
|
+
<span class="ui-setup__mark" aria-hidden="true">○</span>
|
|
7431
|
+
<span class="ui-setup__label">Comment on a post</span>
|
|
7432
|
+
<span class="ui-setup__action">
|
|
7433
|
+
<a class="ui-btn" href="#setup">Open</a>
|
|
7434
|
+
</span>
|
|
7435
|
+
</div>
|
|
7436
|
+
</div>
|
|
7437
|
+
</div>
|
|
7438
|
+
</div>
|
|
7439
|
+
</section></code></pre></details></figure></section>
|
|
7297
7440
|
<section id="chat"><h2>Thân chat</h2><p>Một câu trả lời trông thế nào, ở bất kỳ bề mặt nào đặt một ô chat: tin người dùng / trợ lý, markdown, các bước đang làm (narration), chỉ báo "đang làm", câu hỏi gợi ý, chip lựa chọn, ô soạn. CSS là <code>chat.css</code> của gói (admin <code>@import</code> nó). Khung bao ngoài (cột, ngăn, popup) và hành vi (stream, Dừng, phím) là của bề mặt.</p><figure class="cat-demo"><figcaption>Hội thoại: người dùng, trợ lý (markdown), các bước, đang làm</figcaption><div class="cat-live"><div style="display:flex;flex-direction:column;max-width:520px;border:1px solid var(--gemboss-divider);border-radius:12px;background:var(--gemboss-panel-bg)"><div class="gemboss-ec-head"><div class="gemboss-ec-title">Trợ lý</div><div class="gemboss-ec-sub">Hội thoại #1042</div></div><div class="gemboss-ec-scroll" style="max-height:none"><div class="gemboss-ec-msg user"><div class="gemboss-ec-bubble">Khách nói trang checkout trắng sau khi publish.</div></div><div class="gemboss-ec-msg assistant"><ul class="gemboss-narr"><li class="gemboss-narr-row ok"><span class="gemboss-narr-dot">✓</span><span class="gemboss-narr-text">Đọc hội thoại</span></li><li class="gemboss-narr-row running"><span class="gemboss-narr-dot"><span class="gemboss-narr-spin"></span></span><span class="gemboss-narr-text">Tìm bài help liên quan</span></li></ul><div class="gemboss-ec-bubble"><p class="gemboss-md-p">Gợi ý trả lời: vào <a class="gemboss-ec-md-link" href="#chat">Settings › Checkout</a>, tắt <code class="gemboss-md-code">legacy script</code> rồi publish lại.</p><ul class="gemboss-md-list"><li>Nếu vẫn trắng: xoá cache trình duyệt.</li></ul><span class="gemboss-ec-cursor"></span></div></div><div class="gemboss-ec-pending"><span class="gemboss-ec-pending-star">✳</span><span class="gemboss-ec-pending-verb">Đang nghĩ</span><span class="gemboss-ec-pending-meta">4s</span></div><div class="gemboss-ec-starters"><button type="button" class="gemboss-ec-starter">Nên trả lời thế nào?</button><button type="button" class="gemboss-ec-starter">Trước đây giải quyết sao?</button></div></div><form class="gemboss-ec-input" onsubmit="return false"><textarea rows="1" aria-label="Hỏi trợ lý" placeholder="Hỏi về hội thoại này…"></textarea><button type="submit" aria-label="Gửi">↑</button></form></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="display:flex;flex-direction:column;max-width:520px;border:1px solid var(--gemboss-divider);border-radius:12px;background:var(--gemboss-panel-bg)">
|
|
7298
7441
|
<div class="gemboss-ec-head">
|
|
7299
7442
|
<div class="gemboss-ec-title">Trợ lý</div>
|
|
@@ -11188,60 +11331,60 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11188
11331
|
</div>
|
|
11189
11332
|
</div>
|
|
11190
11333
|
</section></code></pre></details></figure></section>
|
|
11191
|
-
<section id="assistant-engine"><h2>Trợ lý: chọn engine</h2><p><code>EnginePicker</code> (<code>@gemboss/ui/assistant</code>, CSS <code>assistant-engine.css</code> do component tự nạp). Một chip ở hàng soạn tin như admin: tên engine, model nếu khác mặc định, chấm cầu nối (xanh chạy, vàng lỗi thời, đỏ mất kết nối, rỗng đang kiểm). Bấm mở popup ở top layer với ba tab: Engine (engine, model, effort), Setup (lệnh cài/cập nhật + Copy, mã ghép nối), Status (trạng thái, phiên bản, tự khởi động). Không chèn khối nào vào khung chat; lượt hỏng vì cầu nối hiện MỘT dòng <code>BridgeNotice</code> có "Open setup" mở đúng tab Setup. Dữ liệu và logic cầu nối là của bề mặt.</p><figure class="cat-demo"><figcaption>Chip theo trạng thái cầu nối: chạy, lỗi thời, mất kết nối, đang kiểm</figcaption><div class="cat-live"><div class="cat-row"><span class="gb-engine"><button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":
|
|
11334
|
+
<section id="assistant-engine"><h2>Trợ lý: chọn engine</h2><p><code>EnginePicker</code> (<code>@gemboss/ui/assistant</code>, CSS <code>assistant-engine.css</code> do component tự nạp). Một chip ở hàng soạn tin như admin: tên engine, model nếu khác mặc định, chấm cầu nối (xanh chạy, vàng lỗi thời, đỏ mất kết nối, rỗng đang kiểm). Bấm mở popup ở top layer với ba tab: Engine (engine, model, effort), Setup (lệnh cài/cập nhật + Copy, mã ghép nối), Status (trạng thái, phiên bản, tự khởi động). Không chèn khối nào vào khung chat; lượt hỏng vì cầu nối hiện MỘT dòng <code>BridgeNotice</code> có "Open setup" mở đúng tab Setup. Dữ liệu và logic cầu nối là của bề mặt.</p><figure class="cat-demo"><figcaption>Chip theo trạng thái cầu nối: chạy, lỗi thời, mất kết nối, đang kiểm</figcaption><div class="cat-live"><div class="cat-row"><span class="gb-engine"><button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c99-R0:" aria-label="Engine: Claude Code · Opus" title="Engine: Claude Code · Opus"><span class="gb-engine-dot gb-engine-dot--ok" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span></button><div id=":c99-R0:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span><span class="gb-engine"><button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c100-R0:" aria-label="Engine: Claude Code · Opus. Bridge on your machine: Outdated" title="Engine: Claude Code · Opus. Bridge on your machine: Outdated"><span class="gb-engine-dot gb-engine-dot--warn" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span></button><div id=":c100-R0:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span><span class="gb-engine"><button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c101-R0:" aria-label="Engine: Claude Code · Opus. Bridge on your machine: Not connected" title="Engine: Claude Code · Opus. Bridge on your machine: Not connected"><span class="gb-engine-dot gb-engine-dot--down" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span></button><div id=":c101-R0:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span><span class="gb-engine"><button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c102-R0:" aria-label="Engine: Claude Code · Opus. Bridge on your machine: Checking" title="Engine: Claude Code · Opus. Bridge on your machine: Checking"><span class="gb-engine-dot gb-engine-dot--idle" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span></button><div id=":c102-R0:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="cat-row">
|
|
11192
11335
|
<span class="gb-engine">
|
|
11193
|
-
<button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":
|
|
11336
|
+
<button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c99-R0:" aria-label="Engine: Claude Code · Opus" title="Engine: Claude Code · Opus">
|
|
11194
11337
|
<span class="gb-engine-dot gb-engine-dot--ok" aria-hidden="true">
|
|
11195
11338
|
</span>
|
|
11196
11339
|
<span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span>
|
|
11197
11340
|
</span>
|
|
11198
11341
|
</button>
|
|
11199
|
-
<div id=":
|
|
11342
|
+
<div id=":c99-R0:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden="">
|
|
11200
11343
|
</div>
|
|
11201
11344
|
</span>
|
|
11202
11345
|
<span class="gb-engine">
|
|
11203
|
-
<button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":
|
|
11346
|
+
<button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c100-R0:" aria-label="Engine: Claude Code · Opus. Bridge on your machine: Outdated" title="Engine: Claude Code · Opus. Bridge on your machine: Outdated">
|
|
11204
11347
|
<span class="gb-engine-dot gb-engine-dot--warn" aria-hidden="true">
|
|
11205
11348
|
</span>
|
|
11206
11349
|
<span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span>
|
|
11207
11350
|
</span>
|
|
11208
11351
|
</button>
|
|
11209
|
-
<div id=":
|
|
11352
|
+
<div id=":c100-R0:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden="">
|
|
11210
11353
|
</div>
|
|
11211
11354
|
</span>
|
|
11212
11355
|
<span class="gb-engine">
|
|
11213
|
-
<button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":
|
|
11356
|
+
<button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c101-R0:" aria-label="Engine: Claude Code · Opus. Bridge on your machine: Not connected" title="Engine: Claude Code · Opus. Bridge on your machine: Not connected">
|
|
11214
11357
|
<span class="gb-engine-dot gb-engine-dot--down" aria-hidden="true">
|
|
11215
11358
|
</span>
|
|
11216
11359
|
<span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span>
|
|
11217
11360
|
</span>
|
|
11218
11361
|
</button>
|
|
11219
|
-
<div id=":
|
|
11362
|
+
<div id=":c101-R0:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden="">
|
|
11220
11363
|
</div>
|
|
11221
11364
|
</span>
|
|
11222
11365
|
<span class="gb-engine">
|
|
11223
|
-
<button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":
|
|
11366
|
+
<button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c102-R0:" aria-label="Engine: Claude Code · Opus. Bridge on your machine: Checking" title="Engine: Claude Code · Opus. Bridge on your machine: Checking">
|
|
11224
11367
|
<span class="gb-engine-dot gb-engine-dot--idle" aria-hidden="true">
|
|
11225
11368
|
</span>
|
|
11226
11369
|
<span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span>
|
|
11227
11370
|
</span>
|
|
11228
11371
|
</button>
|
|
11229
|
-
<div id=":
|
|
11372
|
+
<div id=":c102-R0:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden="">
|
|
11230
11373
|
</div>
|
|
11231
11374
|
</span>
|
|
11232
|
-
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Popup, tab Engine</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":
|
|
11375
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Popup, tab Engine</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c103-R0:-tab-engine" aria-controls=":c103-R0:-pane-engine" aria-selected="true" tabindex="0">Engine</button><button type="button" role="tab" id=":c103-R0:-tab-setup" aria-controls=":c103-R0:-pane-setup" aria-selected="false" tabindex="-1">Setup<span class="gb-engine-dot gb-engine-dot--warn" role="img" aria-label="Update available"></span></button><button type="button" role="tab" id=":c103-R0:-tab-status" aria-controls=":c103-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c103-R0:-pane-engine" aria-labelledby=":c103-R0:-tab-engine"><div class="gb-engine-field"><span class="gb-engine-label" id=":c103-Rd:">Engine</span><div class="gb-engine-list" role="radiogroup" aria-labelledby=":c103-Rd:"><button type="button" role="radio" aria-checked="true" data-engine="claude" tabindex="0" class="gb-engine-row"><span class="gb-engine-rowhead"><span class="gb-engine-rowname">Claude Code</span><span class="ui-badge ui-badge--success">your plan</span></span><span class="gb-engine-note">Your Claude subscription, through the bridge on your machine</span></button><button type="button" role="radio" aria-checked="false" data-engine="codex" tabindex="-1" class="gb-engine-row" disabled=""><span class="gb-engine-rowhead"><span class="gb-engine-rowname">Codex</span><span class="ui-badge ui-badge--warning">not installed</span></span><span class="gb-engine-note">Install Codex on that machine, then reopen this</span></button><button type="button" role="radio" aria-checked="false" data-engine="server" tabindex="-1" class="gb-engine-row"><span class="gb-engine-rowhead"><span class="gb-engine-rowname">Server</span></span><span class="gb-engine-note">Content Radar's own capacity</span></button></div></div><div class="gb-engine-field"><span class="gb-engine-label" id=":c103-R5d:">Model</span><div class="gb-engine-opts" role="group" aria-labelledby=":c103-R5d:"><button type="button" class="gb-engine-opt" aria-pressed="false">Default</button><button type="button" class="gb-engine-opt" aria-pressed="true">Opus</button><button type="button" class="gb-engine-opt" aria-pressed="false">Sonnet</button><button type="button" class="gb-engine-opt" aria-pressed="false">Haiku</button></div></div><div class="gb-engine-field"><span class="gb-engine-label" id=":c103-R7d:">Effort</span><div class="gb-engine-opts" role="group" aria-labelledby=":c103-R7d:"><button type="button" class="gb-engine-opt" aria-pressed="true">Default</button><button type="button" class="gb-engine-opt" aria-pressed="false">Low</button><button type="button" class="gb-engine-opt" aria-pressed="false">Medium</button><button type="button" class="gb-engine-opt" aria-pressed="false">High</button><button type="button" class="gb-engine-opt" aria-pressed="false">Max</button></div></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="max-width:360px">
|
|
11233
11376
|
<div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine">
|
|
11234
11377
|
<div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status">
|
|
11235
|
-
<button type="button" role="tab" id=":
|
|
11236
|
-
<button type="button" role="tab" id=":
|
|
11378
|
+
<button type="button" role="tab" id=":c103-R0:-tab-engine" aria-controls=":c103-R0:-pane-engine" aria-selected="true" tabindex="0">Engine</button>
|
|
11379
|
+
<button type="button" role="tab" id=":c103-R0:-tab-setup" aria-controls=":c103-R0:-pane-setup" aria-selected="false" tabindex="-1">Setup<span class="gb-engine-dot gb-engine-dot--warn" role="img" aria-label="Update available">
|
|
11237
11380
|
</span>
|
|
11238
11381
|
</button>
|
|
11239
|
-
<button type="button" role="tab" id=":
|
|
11382
|
+
<button type="button" role="tab" id=":c103-R0:-tab-status" aria-controls=":c103-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button>
|
|
11240
11383
|
</div>
|
|
11241
|
-
<div class="gb-engine-pane" role="tabpanel" id=":
|
|
11384
|
+
<div class="gb-engine-pane" role="tabpanel" id=":c103-R0:-pane-engine" aria-labelledby=":c103-R0:-tab-engine">
|
|
11242
11385
|
<div class="gb-engine-field">
|
|
11243
|
-
<span class="gb-engine-label" id=":
|
|
11244
|
-
<div class="gb-engine-list" role="radiogroup" aria-labelledby=":
|
|
11386
|
+
<span class="gb-engine-label" id=":c103-Rd:">Engine</span>
|
|
11387
|
+
<div class="gb-engine-list" role="radiogroup" aria-labelledby=":c103-Rd:">
|
|
11245
11388
|
<button type="button" role="radio" aria-checked="true" data-engine="claude" tabindex="0" class="gb-engine-row">
|
|
11246
11389
|
<span class="gb-engine-rowhead">
|
|
11247
11390
|
<span class="gb-engine-rowname">Claude Code</span>
|
|
@@ -11265,8 +11408,8 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11265
11408
|
</div>
|
|
11266
11409
|
</div>
|
|
11267
11410
|
<div class="gb-engine-field">
|
|
11268
|
-
<span class="gb-engine-label" id=":
|
|
11269
|
-
<div class="gb-engine-opts" role="group" aria-labelledby=":
|
|
11411
|
+
<span class="gb-engine-label" id=":c103-R5d:">Model</span>
|
|
11412
|
+
<div class="gb-engine-opts" role="group" aria-labelledby=":c103-R5d:">
|
|
11270
11413
|
<button type="button" class="gb-engine-opt" aria-pressed="false">Default</button>
|
|
11271
11414
|
<button type="button" class="gb-engine-opt" aria-pressed="true">Opus</button>
|
|
11272
11415
|
<button type="button" class="gb-engine-opt" aria-pressed="false">Sonnet</button>
|
|
@@ -11274,8 +11417,8 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11274
11417
|
</div>
|
|
11275
11418
|
</div>
|
|
11276
11419
|
<div class="gb-engine-field">
|
|
11277
|
-
<span class="gb-engine-label" id=":
|
|
11278
|
-
<div class="gb-engine-opts" role="group" aria-labelledby=":
|
|
11420
|
+
<span class="gb-engine-label" id=":c103-R7d:">Effort</span>
|
|
11421
|
+
<div class="gb-engine-opts" role="group" aria-labelledby=":c103-R7d:">
|
|
11279
11422
|
<button type="button" class="gb-engine-opt" aria-pressed="true">Default</button>
|
|
11280
11423
|
<button type="button" class="gb-engine-opt" aria-pressed="false">Low</button>
|
|
11281
11424
|
<button type="button" class="gb-engine-opt" aria-pressed="false">Medium</button>
|
|
@@ -11285,16 +11428,16 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11285
11428
|
</div>
|
|
11286
11429
|
</div>
|
|
11287
11430
|
</div>
|
|
11288
|
-
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Popup, tab Setup (cầu nối lỗi thời)</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":
|
|
11431
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Popup, tab Setup (cầu nối lỗi thời)</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c104-R0:-tab-engine" aria-controls=":c104-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c104-R0:-tab-setup" aria-controls=":c104-R0:-pane-setup" aria-selected="true" tabindex="0">Setup<span class="gb-engine-dot gb-engine-dot--warn" role="img" aria-label="Update available"></span></button><button type="button" role="tab" id=":c104-R0:-tab-status" aria-controls=":c104-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c104-R0:-pane-setup" aria-labelledby=":c104-R0:-tab-setup"><p class="gb-engine-callout gb-engine-callout--warn"><strong>Bridge on your machine: outdated.</strong> A turn can fail with "The bridge has no data token", and Codex cannot see the radar tools.</p><div class="gb-engine-steps"><p>Paste the command into Terminal, then press Enter.</p></div><pre class="gb-engine-cmd"><code>curl -fsSL https://content-radar.ops.gemboss.ai/bridge/install.sh | sh -s -- --code 5PQFMWW9 --autostart</code></pre><div class="gb-engine-actions"><button type="button" class="ui-btn ui-btn--primary">Copy command</button><span class="gb-engine-said" role="status"></span></div><p class="gb-engine-note">The pairing code stays the same: the panel reconnects in a few seconds.</p></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="max-width:360px">
|
|
11289
11432
|
<div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine">
|
|
11290
11433
|
<div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status">
|
|
11291
|
-
<button type="button" role="tab" id=":
|
|
11292
|
-
<button type="button" role="tab" id=":
|
|
11434
|
+
<button type="button" role="tab" id=":c104-R0:-tab-engine" aria-controls=":c104-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button>
|
|
11435
|
+
<button type="button" role="tab" id=":c104-R0:-tab-setup" aria-controls=":c104-R0:-pane-setup" aria-selected="true" tabindex="0">Setup<span class="gb-engine-dot gb-engine-dot--warn" role="img" aria-label="Update available">
|
|
11293
11436
|
</span>
|
|
11294
11437
|
</button>
|
|
11295
|
-
<button type="button" role="tab" id=":
|
|
11438
|
+
<button type="button" role="tab" id=":c104-R0:-tab-status" aria-controls=":c104-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button>
|
|
11296
11439
|
</div>
|
|
11297
|
-
<div class="gb-engine-pane" role="tabpanel" id=":
|
|
11440
|
+
<div class="gb-engine-pane" role="tabpanel" id=":c104-R0:-pane-setup" aria-labelledby=":c104-R0:-tab-setup">
|
|
11298
11441
|
<p class="gb-engine-callout gb-engine-callout--warn">
|
|
11299
11442
|
<strong>Bridge on your machine: outdated.</strong> A turn can fail with &quot;The bridge has no data token&quot;, and Codex cannot see the radar tools.</p>
|
|
11300
11443
|
<div class="gb-engine-steps">
|
|
@@ -11311,16 +11454,16 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11311
11454
|
<p class="gb-engine-note">The pairing code stays the same: the panel reconnects in a few seconds.</p>
|
|
11312
11455
|
</div>
|
|
11313
11456
|
</div>
|
|
11314
|
-
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Popup, tab Status</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":
|
|
11457
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Popup, tab Status</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c105-R0:-tab-engine" aria-controls=":c105-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c105-R0:-tab-setup" aria-controls=":c105-R0:-pane-setup" aria-selected="false" tabindex="-1">Setup<span class="gb-engine-dot gb-engine-dot--warn" role="img" aria-label="Update available"></span></button><button type="button" role="tab" id=":c105-R0:-tab-status" aria-controls=":c105-R0:-pane-status" aria-selected="true" tabindex="0">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c105-R0:-pane-status" aria-labelledby=":c105-R0:-tab-status"><dl class="gb-engine-rows"><dt>Bridge on your machine</dt><dd><span class="gb-engine-dot gb-engine-dot--warn" aria-hidden="true"></span> Outdated</dd><dt>Version</dt><dd>8 · Latest 10</dd><dt>Starts at sign-in</dt><dd>Yes</dd></dl><p class="gb-engine-note">A turn can fail with "The bridge has no data token", and Codex cannot see the radar tools.</p></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="max-width:360px">
|
|
11315
11458
|
<div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine">
|
|
11316
11459
|
<div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status">
|
|
11317
|
-
<button type="button" role="tab" id=":
|
|
11318
|
-
<button type="button" role="tab" id=":
|
|
11460
|
+
<button type="button" role="tab" id=":c105-R0:-tab-engine" aria-controls=":c105-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button>
|
|
11461
|
+
<button type="button" role="tab" id=":c105-R0:-tab-setup" aria-controls=":c105-R0:-pane-setup" aria-selected="false" tabindex="-1">Setup<span class="gb-engine-dot gb-engine-dot--warn" role="img" aria-label="Update available">
|
|
11319
11462
|
</span>
|
|
11320
11463
|
</button>
|
|
11321
|
-
<button type="button" role="tab" id=":
|
|
11464
|
+
<button type="button" role="tab" id=":c105-R0:-tab-status" aria-controls=":c105-R0:-pane-status" aria-selected="true" tabindex="0">Status</button>
|
|
11322
11465
|
</div>
|
|
11323
|
-
<div class="gb-engine-pane" role="tabpanel" id=":
|
|
11466
|
+
<div class="gb-engine-pane" role="tabpanel" id=":c105-R0:-pane-status" aria-labelledby=":c105-R0:-tab-status">
|
|
11324
11467
|
<dl class="gb-engine-rows">
|
|
11325
11468
|
<dt>Bridge on your machine</dt>
|
|
11326
11469
|
<dd>
|
|
@@ -11340,14 +11483,14 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11340
11483
|
<span class="gb-engine-notice-text">The bridge on your machine is not responding: it was stopped, or the machine slept.</span>
|
|
11341
11484
|
<button type="button" class="gb-engine-notice-link">Open setup</button>
|
|
11342
11485
|
</p></code></pre></details></figure></section>
|
|
11343
|
-
<section id="assistant-bridge"><h2>Trợ lý: cầu nối trên máy (0.32.0)</h2><p><code>useBridge</code> + <code>createBridgeClient</code> + <code>bridgePickerProps</code> (<code>@gemboss/ui/assistant</code>): dò cầu nối sau quyền Local Network Access của Chrome (chỉ hỏi từ một cú bấm), ghép cặp bằng mã trang tự sinh và nhét vào lệnh cài, token dữ liệu ngắn hạn, gửi lượt + đọc stream (<code>readTurnEvents</code>), dò mỗi 3 giây khi đồng đội đang cài, dò lại khi quay về tab, Stop / Remove. Ba radar từng giữ ba bản chép; bề mặt nay chỉ cấp cổng, khoá mã, tên app và phần riêng của nó. Dưới đây là tab Setup / Status mà gói dựng cho từng trạng thái.</p><figure class="cat-demo"><figcaption>Chưa có quyền gọi máy này: nút Allow, chưa có lệnh để chạy</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":
|
|
11486
|
+
<section id="assistant-bridge"><h2>Trợ lý: cầu nối trên máy (0.32.0)</h2><p><code>useBridge</code> + <code>createBridgeClient</code> + <code>bridgePickerProps</code> (<code>@gemboss/ui/assistant</code>): dò cầu nối sau quyền Local Network Access của Chrome (chỉ hỏi từ một cú bấm), ghép cặp bằng mã trang tự sinh và nhét vào lệnh cài, token dữ liệu ngắn hạn, gửi lượt + đọc stream (<code>readTurnEvents</code>), dò mỗi 3 giây khi đồng đội đang cài, dò lại khi quay về tab, Stop / Remove. Ba radar từng giữ ba bản chép; bề mặt nay chỉ cấp cổng, khoá mã, tên app và phần riêng của nó. Dưới đây là tab Setup / Status mà gói dựng cho từng trạng thái.</p><figure class="cat-demo"><figcaption>Chưa có quyền gọi máy này: nút Allow, chưa có lệnh để chạy</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c107-R0:-tab-engine" aria-controls=":c107-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c107-R0:-tab-setup" aria-controls=":c107-R0:-pane-setup" aria-selected="true" tabindex="0">Setup</button><button type="button" role="tab" id=":c107-R0:-tab-status" aria-controls=":c107-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c107-R0:-pane-setup" aria-labelledby=":c107-R0:-tab-setup"><p class="gb-engine-callout gb-engine-callout--down"><strong>Bridge on your machine: not connected.</strong> The browser needs permission to connect to this computer (localhost).</p><div class="gb-engine-steps"><p>Chrome will ask to “access devices on your local network”: choose Allow.</p><div><button type="button" class="ui-btn ui-btn--primary">Allow connecting to this computer</button></div></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="max-width:360px">
|
|
11344
11487
|
<div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine">
|
|
11345
11488
|
<div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status">
|
|
11346
|
-
<button type="button" role="tab" id=":
|
|
11347
|
-
<button type="button" role="tab" id=":
|
|
11348
|
-
<button type="button" role="tab" id=":
|
|
11489
|
+
<button type="button" role="tab" id=":c107-R0:-tab-engine" aria-controls=":c107-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button>
|
|
11490
|
+
<button type="button" role="tab" id=":c107-R0:-tab-setup" aria-controls=":c107-R0:-pane-setup" aria-selected="true" tabindex="0">Setup</button>
|
|
11491
|
+
<button type="button" role="tab" id=":c107-R0:-tab-status" aria-controls=":c107-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button>
|
|
11349
11492
|
</div>
|
|
11350
|
-
<div class="gb-engine-pane" role="tabpanel" id=":
|
|
11493
|
+
<div class="gb-engine-pane" role="tabpanel" id=":c107-R0:-pane-setup" aria-labelledby=":c107-R0:-tab-setup">
|
|
11351
11494
|
<p class="gb-engine-callout gb-engine-callout--down">
|
|
11352
11495
|
<strong>Bridge on your machine: not connected.</strong> The browser needs permission to connect to this computer (localhost).</p>
|
|
11353
11496
|
<div class="gb-engine-steps">
|
|
@@ -11358,14 +11501,14 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11358
11501
|
</div>
|
|
11359
11502
|
</div>
|
|
11360
11503
|
</div>
|
|
11361
|
-
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Chrome đã chặn: ba bước mở lại trong cài đặt trang</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":
|
|
11504
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Chrome đã chặn: ba bước mở lại trong cài đặt trang</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c108-R0:-tab-engine" aria-controls=":c108-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c108-R0:-tab-setup" aria-controls=":c108-R0:-pane-setup" aria-selected="true" tabindex="0">Setup</button><button type="button" role="tab" id=":c108-R0:-tab-status" aria-controls=":c108-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c108-R0:-pane-setup" aria-labelledby=":c108-R0:-tab-setup"><p class="gb-engine-callout gb-engine-callout--down"><strong>Bridge on your machine: not connected.</strong> Chrome is blocking this page from connecting to your computer.</p><div class="gb-engine-steps"><ol><li>Click the <strong>⚙︎ / ⓘ</strong> icon to the left of the address bar.</li><li>Find <strong>Local network access</strong> and choose <strong>Allow</strong>.</li><li>Come back to this tab. The panel picks it up without a reload.</li></ol><div><button type="button" class="ui-btn">Check again</button></div></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="max-width:360px">
|
|
11362
11505
|
<div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine">
|
|
11363
11506
|
<div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status">
|
|
11364
|
-
<button type="button" role="tab" id=":
|
|
11365
|
-
<button type="button" role="tab" id=":
|
|
11366
|
-
<button type="button" role="tab" id=":
|
|
11507
|
+
<button type="button" role="tab" id=":c108-R0:-tab-engine" aria-controls=":c108-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button>
|
|
11508
|
+
<button type="button" role="tab" id=":c108-R0:-tab-setup" aria-controls=":c108-R0:-pane-setup" aria-selected="true" tabindex="0">Setup</button>
|
|
11509
|
+
<button type="button" role="tab" id=":c108-R0:-tab-status" aria-controls=":c108-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button>
|
|
11367
11510
|
</div>
|
|
11368
|
-
<div class="gb-engine-pane" role="tabpanel" id=":
|
|
11511
|
+
<div class="gb-engine-pane" role="tabpanel" id=":c108-R0:-pane-setup" aria-labelledby=":c108-R0:-tab-setup">
|
|
11369
11512
|
<p class="gb-engine-callout gb-engine-callout--down">
|
|
11370
11513
|
<strong>Bridge on your machine: not connected.</strong> Chrome is blocking this page from connecting to your computer.</p>
|
|
11371
11514
|
<div class="gb-engine-steps">
|
|
@@ -11380,14 +11523,14 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11380
11523
|
</div>
|
|
11381
11524
|
</div>
|
|
11382
11525
|
</div>
|
|
11383
|
-
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Cầu nối chạy nhưng mã khác: ô Pair (Enter cũng ghép) + lệnh cài lại mang mã của trình duyệt này</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":
|
|
11526
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Cầu nối chạy nhưng mã khác: ô Pair (Enter cũng ghép) + lệnh cài lại mang mã của trình duyệt này</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c109-R0:-tab-engine" aria-controls=":c109-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c109-R0:-tab-setup" aria-controls=":c109-R0:-pane-setup" aria-selected="true" tabindex="0">Setup</button><button type="button" role="tab" id=":c109-R0:-tab-status" aria-controls=":c109-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c109-R0:-pane-setup" aria-labelledby=":c109-R0:-tab-setup"><p class="gb-engine-callout gb-engine-callout--down"><strong>Bridge on your machine: not connected.</strong> The bridge is running on your machine but is not paired with this browser.</p><div class="gb-engine-steps"><p>Paste the <strong>pairing code</strong> shown in the terminal:</p><form class="ui-toolbar"><input class="gemboss-field" style="flex:1 1 140px;min-width:0;text-transform:uppercase;letter-spacing:.08em" placeholder="e.g. 7KQ2M9XA" aria-label="Pairing code" autoComplete="off" spellcheck="false" value=""/><button type="button" class="ui-btn ui-btn--primary">Pair</button></form><p role="status">Wrong code. Check the pairing code line in the terminal.</p><p>Or reinstall with this command, which includes this browser’s code:</p></div><pre class="gb-engine-cmd"><code>curl -fsSL https://partner-radar.ops.gemboss.ai/bridge/install.sh | sh -s -- --code 5PQFMWW9 --autostart</code></pre><div class="gb-engine-actions"><button type="button" class="ui-btn ui-btn--primary">Copy command</button><span class="gb-engine-said" role="status"></span></div><p class="gb-engine-note">The panel connects as soon as the bridge starts, and the bridge starts with your computer after that. Requires macOS, Node.js, and Claude Code or Codex signed in.</p></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="max-width:360px">
|
|
11384
11527
|
<div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine">
|
|
11385
11528
|
<div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status">
|
|
11386
|
-
<button type="button" role="tab" id=":
|
|
11387
|
-
<button type="button" role="tab" id=":
|
|
11388
|
-
<button type="button" role="tab" id=":
|
|
11529
|
+
<button type="button" role="tab" id=":c109-R0:-tab-engine" aria-controls=":c109-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button>
|
|
11530
|
+
<button type="button" role="tab" id=":c109-R0:-tab-setup" aria-controls=":c109-R0:-pane-setup" aria-selected="true" tabindex="0">Setup</button>
|
|
11531
|
+
<button type="button" role="tab" id=":c109-R0:-tab-status" aria-controls=":c109-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button>
|
|
11389
11532
|
</div>
|
|
11390
|
-
<div class="gb-engine-pane" role="tabpanel" id=":
|
|
11533
|
+
<div class="gb-engine-pane" role="tabpanel" id=":c109-R0:-pane-setup" aria-labelledby=":c109-R0:-tab-setup">
|
|
11391
11534
|
<p class="gb-engine-callout gb-engine-callout--down">
|
|
11392
11535
|
<strong>Bridge on your machine: not connected.</strong> The bridge is running on your machine but is not paired with this browser.</p>
|
|
11393
11536
|
<div class="gb-engine-steps">
|
|
@@ -11410,14 +11553,14 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11410
11553
|
<p class="gb-engine-note">The panel connects as soon as the bridge starts, and the bridge starts with your computer after that. Requires macOS, Node.js, and Claude Code or Codex signed in.</p>
|
|
11411
11554
|
</div>
|
|
11412
11555
|
</div>
|
|
11413
|
-
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Chưa thấy cầu nối: hai bước + lệnh cài</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":
|
|
11556
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Chưa thấy cầu nối: hai bước + lệnh cài</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c110-R0:-tab-engine" aria-controls=":c110-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c110-R0:-tab-setup" aria-controls=":c110-R0:-pane-setup" aria-selected="true" tabindex="0">Setup</button><button type="button" role="tab" id=":c110-R0:-tab-status" aria-controls=":c110-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c110-R0:-pane-setup" aria-labelledby=":c110-R0:-tab-setup"><p class="gb-engine-callout gb-engine-callout--down"><strong>Bridge on your machine: not set up.</strong></p><div class="gb-engine-steps"><ol><li>Open <strong>Terminal</strong> (⌘ + Space, type Terminal).</li><li>Paste this command and press Enter (about 1 minute).</li></ol></div><pre class="gb-engine-cmd"><code>curl -fsSL https://partner-radar.ops.gemboss.ai/bridge/install.sh | sh -s -- --code 5PQFMWW9 --autostart</code></pre><div class="gb-engine-actions"><button type="button" class="ui-btn ui-btn--primary">Copy command</button><span class="gb-engine-said" role="status"></span></div><p class="gb-engine-note">The panel connects as soon as the bridge starts, and the bridge starts with your computer after that. Requires macOS, Node.js, and Claude Code or Codex signed in.</p></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="max-width:360px">
|
|
11414
11557
|
<div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine">
|
|
11415
11558
|
<div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status">
|
|
11416
|
-
<button type="button" role="tab" id=":
|
|
11417
|
-
<button type="button" role="tab" id=":
|
|
11418
|
-
<button type="button" role="tab" id=":
|
|
11559
|
+
<button type="button" role="tab" id=":c110-R0:-tab-engine" aria-controls=":c110-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button>
|
|
11560
|
+
<button type="button" role="tab" id=":c110-R0:-tab-setup" aria-controls=":c110-R0:-pane-setup" aria-selected="true" tabindex="0">Setup</button>
|
|
11561
|
+
<button type="button" role="tab" id=":c110-R0:-tab-status" aria-controls=":c110-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button>
|
|
11419
11562
|
</div>
|
|
11420
|
-
<div class="gb-engine-pane" role="tabpanel" id=":
|
|
11563
|
+
<div class="gb-engine-pane" role="tabpanel" id=":c110-R0:-pane-setup" aria-labelledby=":c110-R0:-tab-setup">
|
|
11421
11564
|
<p class="gb-engine-callout gb-engine-callout--down">
|
|
11422
11565
|
<strong>Bridge on your machine: not set up.</strong>
|
|
11423
11566
|
</p>
|
|
@@ -11438,16 +11581,16 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11438
11581
|
<p class="gb-engine-note">The panel connects as soon as the bridge starts, and the bridge starts with your computer after that. Requires macOS, Node.js, and Claude Code or Codex signed in.</p>
|
|
11439
11582
|
</div>
|
|
11440
11583
|
</div>
|
|
11441
|
-
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Đã nối, bản cũ: Status với phiên bản, tự khởi động, Check again / Stop / Remove</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":
|
|
11584
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Đã nối, bản cũ: Status với phiên bản, tự khởi động, Check again / Stop / Remove</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c111-R0:-tab-engine" aria-controls=":c111-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c111-R0:-tab-setup" aria-controls=":c111-R0:-pane-setup" aria-selected="false" tabindex="-1">Setup<span class="gb-engine-dot gb-engine-dot--warn" role="img" aria-label="Update available"></span></button><button type="button" role="tab" id=":c111-R0:-tab-status" aria-controls=":c111-R0:-pane-status" aria-selected="true" tabindex="0">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c111-R0:-pane-status" aria-labelledby=":c111-R0:-tab-status"><dl class="gb-engine-rows"><dt>Bridge on your machine</dt><dd><span class="gb-engine-dot gb-engine-dot--warn" aria-hidden="true"></span> Outdated</dd><dt>Version</dt><dd>2 · Latest 3</dd><dt>Starts at sign-in</dt><dd>Yes</dd></dl><p class="gb-engine-note">This bridge is older than the one the panel expects: update it once (Setup).</p><div class="gb-engine-actions"><button type="button" class="ui-btn">Check again</button><button type="button" class="ui-btn">Stop bridge</button><button type="button" class="ui-btn ui-btn--critical">Remove from this machine</button></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="max-width:360px">
|
|
11442
11585
|
<div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine">
|
|
11443
11586
|
<div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status">
|
|
11444
|
-
<button type="button" role="tab" id=":
|
|
11445
|
-
<button type="button" role="tab" id=":
|
|
11587
|
+
<button type="button" role="tab" id=":c111-R0:-tab-engine" aria-controls=":c111-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button>
|
|
11588
|
+
<button type="button" role="tab" id=":c111-R0:-tab-setup" aria-controls=":c111-R0:-pane-setup" aria-selected="false" tabindex="-1">Setup<span class="gb-engine-dot gb-engine-dot--warn" role="img" aria-label="Update available">
|
|
11446
11589
|
</span>
|
|
11447
11590
|
</button>
|
|
11448
|
-
<button type="button" role="tab" id=":
|
|
11591
|
+
<button type="button" role="tab" id=":c111-R0:-tab-status" aria-controls=":c111-R0:-pane-status" aria-selected="true" tabindex="0">Status</button>
|
|
11449
11592
|
</div>
|
|
11450
|
-
<div class="gb-engine-pane" role="tabpanel" id=":
|
|
11593
|
+
<div class="gb-engine-pane" role="tabpanel" id=":c111-R0:-pane-status" aria-labelledby=":c111-R0:-tab-status">
|
|
11451
11594
|
<dl class="gb-engine-rows">
|
|
11452
11595
|
<dt>Bridge on your machine</dt>
|
|
11453
11596
|
<dd>
|
|
@@ -11467,7 +11610,7 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11467
11610
|
</div>
|
|
11468
11611
|
</div>
|
|
11469
11612
|
</div></code></pre></details></figure></section>
|
|
11470
|
-
<section id="assistant-chat"><h2>Trợ lý: khung chat (0.29.0)</h2><p><code>AssistantChat</code> + các mảnh (<code>ChatThread</code>, <code>ChatMessage</code>, <code>ChatMarkdown</code>, <code>ChatSteps</code>, <code>ChatPending</code>, <code>ChatStarters</code>, <code>ChatMeta</code>, <code>ChatError</code>, <code>ChatComposer</code>, <code>ChatAttach</code>) và <code>useChatTurns</code> (ghi lượt theo id). Bề mặt chỉ cấp dữ liệu + hành động; HTML thuần dùng <code>chat-plain.js</code> (cùng markup). CSS: <code>chat.css</code> + <code>chat-composer.css</code> + entry <code>assistant-chat.css</code>, component tự nạp.</p><figure class="cat-demo"><figcaption>Rỗng: lời mở + ví dụ điền sẵn + câu hỏi gợi ý (xuống dòng, không bị cắt)</figcaption><div class="cat-live"><div style="width:420px;max-width:100%;height:520px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden"><div class="gb-chat"><div class="gemboss-ec-scroll" role="log" aria-label="Conversation"><div class="gemboss-ec-msg assistant"><div class="gemboss-ec-bubble"><p class="gemboss-md-p"><strong>Describe</strong> a meeting, call or message with a partner. The AI proposes the updates; you click <strong>Save</strong>.</p></div><div class="gemboss-ec-starters"><button type="button" class="gemboss-ec-starter gb-chat-starter"><span class="gb-chat-starter-hint">Example, click to fill in</span>Had dinner with Amit Porwal from Wiser yesterday; promised a co-marketing proposal next week.</button></div><p class="gb-chat-label">Or ask about partners in the radar:</p><div class="gemboss-ec-starters"><button type="button" class="gemboss-ec-starter gb-chat-starter">Which partners have a next step due in the next 2 weeks?</button><button type="button" class="gemboss-ec-starter gb-chat-starter">Summarize partner meetings from the last 30 days</button></div></div></div><div class="gemboss-ec-input" data-density="full"><textarea rows="1" aria-label="Message" placeholder="Ask, or describe a partner meeting…"></textarea><div class="gemboss-ec-toolbar"><div class="gemboss-ec-toolbar-lead"><span class="gb-engine"><button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":
|
|
11613
|
+
<section id="assistant-chat"><h2>Trợ lý: khung chat (0.29.0)</h2><p><code>AssistantChat</code> + các mảnh (<code>ChatThread</code>, <code>ChatMessage</code>, <code>ChatMarkdown</code>, <code>ChatSteps</code>, <code>ChatPending</code>, <code>ChatStarters</code>, <code>ChatMeta</code>, <code>ChatError</code>, <code>ChatComposer</code>, <code>ChatAttach</code>) và <code>useChatTurns</code> (ghi lượt theo id). Bề mặt chỉ cấp dữ liệu + hành động; HTML thuần dùng <code>chat-plain.js</code> (cùng markup). CSS: <code>chat.css</code> + <code>chat-composer.css</code> + entry <code>assistant-chat.css</code>, component tự nạp.</p><figure class="cat-demo"><figcaption>Rỗng: lời mở + ví dụ điền sẵn + câu hỏi gợi ý (xuống dòng, không bị cắt)</figcaption><div class="cat-live"><div style="width:420px;max-width:100%;height:520px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden"><div class="gb-chat"><div class="gemboss-ec-scroll" role="log" aria-label="Conversation"><div class="gemboss-ec-msg assistant"><div class="gemboss-ec-bubble"><p class="gemboss-md-p"><strong>Describe</strong> a meeting, call or message with a partner. The AI proposes the updates; you click <strong>Save</strong>.</p></div><div class="gemboss-ec-starters"><button type="button" class="gemboss-ec-starter gb-chat-starter"><span class="gb-chat-starter-hint">Example, click to fill in</span>Had dinner with Amit Porwal from Wiser yesterday; promised a co-marketing proposal next week.</button></div><p class="gb-chat-label">Or ask about partners in the radar:</p><div class="gemboss-ec-starters"><button type="button" class="gemboss-ec-starter gb-chat-starter">Which partners have a next step due in the next 2 weeks?</button><button type="button" class="gemboss-ec-starter gb-chat-starter">Summarize partner meetings from the last 30 days</button></div></div></div><div class="gemboss-ec-input" data-density="full"><textarea rows="1" aria-label="Message" placeholder="Ask, or describe a partner meeting…"></textarea><div class="gemboss-ec-toolbar"><div class="gemboss-ec-toolbar-lead"><span class="gb-engine"><button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c112-Rv:" aria-label="Engine: Claude Code · Opus" title="Engine: Claude Code · Opus"><span class="gb-engine-dot gb-engine-dot--ok" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span><span class="gb-engine-chipmark"><svg class="gemboss-engine-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 13.7L21.6 12.5Q22.2 12 21.6 11.5L12 10.3Z M10.8 13.2L18.43 19.14Q19.21 19.21 19.14 18.43L13.2 10.8Z M10.3 12L11.5 21.6Q12 22.2 12.5 21.6L13.7 12Z M10.8 10.8L4.86 18.43Q4.79 19.21 5.57 19.14L13.2 13.2Z M12 10.3L2.4 11.5Q1.8 12 2.4 12.5L12 13.7Z M13.2 10.8L5.57 4.86Q4.79 4.79 4.86 5.57L10.8 13.2Z M13.7 12L12.5 2.4Q12 1.8 11.5 2.4L10.3 12Z M13.2 13.2L19.14 5.57Q19.21 4.79 18.43 4.86L10.8 10.8Z" fill-rule="nonzero"></path></svg></span></button><div id=":c112-Rv:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span></div><div class="gemboss-ec-toolbar-tools"><button type="button" class="gemboss-ec-attach-btn" aria-label="Attach a file" title="Attach a file"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.4 11.1l-8.5 8.5a5.5 5.5 0 01-7.8-7.8l8.5-8.5a3.7 3.7 0 015.2 5.2l-8.5 8.5a1.8 1.8 0 01-2.6-2.6l7.8-7.8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><input type="file" hidden="" tabindex="-1"/></div><button type="submit" disabled="" aria-label="Send" title="Send"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M10.53 4.47a.75.75 0 0 0-1.06 0l-4.5 4.5a.75.75 0 0 0 1.06 1.06l3.22-3.22v8.69a.75.75 0 0 0 1.5 0v-8.69l3.22 3.22a.75.75 0 1 0 1.06-1.06l-4.5-4.5Z"></path></svg></button></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="width:420px;max-width:100%;height:520px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden">
|
|
11471
11614
|
<div class="gb-chat">
|
|
11472
11615
|
<div class="gemboss-ec-scroll" role="log" aria-label="Conversation">
|
|
11473
11616
|
<div class="gemboss-ec-msg assistant">
|
|
@@ -11492,7 +11635,7 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11492
11635
|
<div class="gemboss-ec-toolbar">
|
|
11493
11636
|
<div class="gemboss-ec-toolbar-lead">
|
|
11494
11637
|
<span class="gb-engine">
|
|
11495
|
-
<button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":
|
|
11638
|
+
<button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c112-Rv:" aria-label="Engine: Claude Code · Opus" title="Engine: Claude Code · Opus">
|
|
11496
11639
|
<span class="gb-engine-dot gb-engine-dot--ok" aria-hidden="true">
|
|
11497
11640
|
</span>
|
|
11498
11641
|
<span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span>
|
|
@@ -11504,7 +11647,7 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11504
11647
|
</svg>
|
|
11505
11648
|
</span>
|
|
11506
11649
|
</button>
|
|
11507
|
-
<div id=":
|
|
11650
|
+
<div id=":c112-Rv:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden="">
|
|
11508
11651
|
</div>
|
|
11509
11652
|
</span>
|
|
11510
11653
|
</div>
|
|
@@ -11526,7 +11669,7 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11526
11669
|
</div>
|
|
11527
11670
|
</div>
|
|
11528
11671
|
</div>
|
|
11529
|
-
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Đang chạy: các bước in rồi đứng yên, một nhịp ✳ duy nhất chuyển động; Dừng thay chỗ Gửi</figcaption><div class="cat-live"><div style="width:420px;max-width:100%;height:520px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden"><div class="gb-chat"><div class="gemboss-ec-scroll" role="log" aria-label="Conversation" aria-busy="true"><div class="gemboss-ec-msg user"><div class="gemboss-ec-bubble">Who is exploring a partnership, and when did we last talk?</div></div><div class="gemboss-ec-msg assistant"><ul class="gemboss-narr" aria-label="What it is doing"><li class="gemboss-narr-row ok"><span class="gemboss-narr-dot" aria-hidden="true">✓</span><span class="gemboss-narr-text">Search partners<span class="gb-chat-target"> Wiser</span></span></li><li class="gemboss-narr-row ok"><span class="gemboss-narr-dot" aria-hidden="true">✓</span><span class="gemboss-narr-text">Read history<span class="gb-chat-target"> Amit Porwal</span></span></li><li class="gemboss-narr-row trace ok"><span class="gemboss-narr-dot" aria-hidden="true">⏺</span><details class="gemboss-narr-trace"><summary><code>partner_timeline(id: 418, days: 30)</code></summary><div class="gemboss-narr-trace-body"><code>{ "events": 6, "last": "2026-10-05" }</code></div></details></li><li class="gemboss-narr-row running"><span class="gemboss-narr-dot" aria-hidden="true">·</span><span class="gemboss-narr-text">Draft a proposal</span></li></ul><div class="gemboss-ec-pending" role="status"><span class="gemboss-assistant-sronly">Working</span><span class="gemboss-ec-pending-star" aria-hidden="true">✳</span><span class="gemboss-ec-pending-verb" aria-hidden="true">Working…</span><span class="gemboss-ec-pending-meta" aria-hidden="true">0s</span></div></div></div><div class="gemboss-ec-input" data-density="full"><textarea rows="1" aria-label="Message" placeholder="Ask, or describe a partner meeting…"></textarea><div class="gemboss-ec-toolbar"><div class="gemboss-ec-toolbar-lead"><span class="gb-engine"><button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":
|
|
11672
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Đang chạy: các bước in rồi đứng yên, một nhịp ✳ duy nhất chuyển động; Dừng thay chỗ Gửi</figcaption><div class="cat-live"><div style="width:420px;max-width:100%;height:520px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden"><div class="gb-chat"><div class="gemboss-ec-scroll" role="log" aria-label="Conversation" aria-busy="true"><div class="gemboss-ec-msg user"><div class="gemboss-ec-bubble">Who is exploring a partnership, and when did we last talk?</div></div><div class="gemboss-ec-msg assistant"><ul class="gemboss-narr" aria-label="What it is doing"><li class="gemboss-narr-row ok"><span class="gemboss-narr-dot" aria-hidden="true">✓</span><span class="gemboss-narr-text">Search partners<span class="gb-chat-target"> Wiser</span></span></li><li class="gemboss-narr-row ok"><span class="gemboss-narr-dot" aria-hidden="true">✓</span><span class="gemboss-narr-text">Read history<span class="gb-chat-target"> Amit Porwal</span></span></li><li class="gemboss-narr-row trace ok"><span class="gemboss-narr-dot" aria-hidden="true">⏺</span><details class="gemboss-narr-trace"><summary><code>partner_timeline(id: 418, days: 30)</code></summary><div class="gemboss-narr-trace-body"><code>{ "events": 6, "last": "2026-10-05" }</code></div></details></li><li class="gemboss-narr-row running"><span class="gemboss-narr-dot" aria-hidden="true">·</span><span class="gemboss-narr-text">Draft a proposal</span></li></ul><div class="gemboss-ec-pending" role="status"><span class="gemboss-assistant-sronly">Working</span><span class="gemboss-ec-pending-star" aria-hidden="true">✳</span><span class="gemboss-ec-pending-verb" aria-hidden="true">Working…</span><span class="gemboss-ec-pending-meta" aria-hidden="true">0s</span></div></div></div><div class="gemboss-ec-input" data-density="full"><textarea rows="1" aria-label="Message" placeholder="Ask, or describe a partner meeting…"></textarea><div class="gemboss-ec-toolbar"><div class="gemboss-ec-toolbar-lead"><span class="gb-engine"><button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c113-Rv:" aria-label="Engine: Claude Code · Opus" title="Engine: Claude Code · Opus"><span class="gb-engine-dot gb-engine-dot--ok" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span><span class="gb-engine-chipmark"><svg class="gemboss-engine-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 13.7L21.6 12.5Q22.2 12 21.6 11.5L12 10.3Z M10.8 13.2L18.43 19.14Q19.21 19.21 19.14 18.43L13.2 10.8Z M10.3 12L11.5 21.6Q12 22.2 12.5 21.6L13.7 12Z M10.8 10.8L4.86 18.43Q4.79 19.21 5.57 19.14L13.2 13.2Z M12 10.3L2.4 11.5Q1.8 12 2.4 12.5L12 13.7Z M13.2 10.8L5.57 4.86Q4.79 4.79 4.86 5.57L10.8 13.2Z M13.7 12L12.5 2.4Q12 1.8 11.5 2.4L10.3 12Z M13.2 13.2L19.14 5.57Q19.21 4.79 18.43 4.86L10.8 10.8Z" fill-rule="nonzero"></path></svg></span></button><div id=":c113-Rv:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span></div><div class="gemboss-ec-toolbar-tools"><button type="button" class="gemboss-ec-attach-btn" aria-label="Attach a file" title="Attach a file"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.4 11.1l-8.5 8.5a5.5 5.5 0 01-7.8-7.8l8.5-8.5a3.7 3.7 0 015.2 5.2l-8.5 8.5a1.8 1.8 0 01-2.6-2.6l7.8-7.8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><input type="file" hidden="" tabindex="-1"/></div><button type="button" class="gemboss-ec-stop" aria-label="Stop" title="Stop"><svg viewBox="0 0 12 12" aria-hidden="true" focusable="false"><rect x="1" y="1" width="10" height="10" rx="2"></rect></svg></button></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="width:420px;max-width:100%;height:520px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden">
|
|
11530
11673
|
<div class="gb-chat">
|
|
11531
11674
|
<div class="gemboss-ec-scroll" role="log" aria-label="Conversation" aria-busy="true">
|
|
11532
11675
|
<div class="gemboss-ec-msg user">
|
|
@@ -11574,7 +11717,7 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11574
11717
|
<div class="gemboss-ec-toolbar">
|
|
11575
11718
|
<div class="gemboss-ec-toolbar-lead">
|
|
11576
11719
|
<span class="gb-engine">
|
|
11577
|
-
<button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":
|
|
11720
|
+
<button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c113-Rv:" aria-label="Engine: Claude Code · Opus" title="Engine: Claude Code · Opus">
|
|
11578
11721
|
<span class="gb-engine-dot gb-engine-dot--ok" aria-hidden="true">
|
|
11579
11722
|
</span>
|
|
11580
11723
|
<span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span>
|
|
@@ -11586,7 +11729,7 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11586
11729
|
</svg>
|
|
11587
11730
|
</span>
|
|
11588
11731
|
</button>
|
|
11589
|
-
<div id=":
|
|
11732
|
+
<div id=":c113-Rv:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden="">
|
|
11590
11733
|
</div>
|
|
11591
11734
|
</span>
|
|
11592
11735
|
</div>
|
|
@@ -11608,7 +11751,7 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11608
11751
|
</div>
|
|
11609
11752
|
</div>
|
|
11610
11753
|
</div>
|
|
11611
|
-
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Trả lời xong: markdown (bảng, danh sách, code, URL trần thành link từ 0.29.2), dòng Copy · engine · giây</figcaption><div class="cat-live"><div style="width:460px;max-width:100%;height:640px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden"><div class="gb-chat"><div class="gemboss-ec-scroll" role="log" aria-label="Conversation"><div class="gemboss-ec-msg user"><div class="gemboss-ec-bubble">Who is exploring a partnership?</div></div><div class="gemboss-ec-msg assistant"><ul class="gemboss-narr" aria-label="What it is doing"><li class="gemboss-narr-row ok"><span class="gemboss-narr-dot" aria-hidden="true">✓</span><span class="gemboss-narr-text">Search partners<span class="gb-chat-target"> Wiser</span></span></li><li class="gemboss-narr-row ok"><span class="gemboss-narr-dot" aria-hidden="true">✓</span><span class="gemboss-narr-text">Read history<span class="gb-chat-target"> Amit Porwal</span></span></li><li class="gemboss-narr-row trace ok"><span class="gemboss-narr-dot" aria-hidden="true">⏺</span><details class="gemboss-narr-trace"><summary><code>partner_timeline(id: 418, days: 30)</code></summary><div class="gemboss-narr-trace-body"><code>{ "events": 6, "last": "2026-10-05" }</code></div></details></li></ul><div class="gemboss-ec-bubble"><p class="gemboss-md-p"><strong>Wiser</strong> is exploring a deeper partnership.</p><div class="gemboss-md-tablewrap"><table class="gemboss-md-table"><thead><tr><th>Partner</th><th>Last talk</th><th>Next step</th></tr></thead><tbody><tr><td>Wiser</td><td>3 days ago</td><td>Co-marketing proposal</td></tr><tr><td>Loox</td><td>12 days ago</td><td>Intro call</td></tr></tbody></table></div><ul class="gemboss-md-list"><li>Send the proposal by <strong>Friday</strong></li><li>Ask about the <code class="gemboss-md-code">affiliate</code> tier</li></ul><p class="gemboss-md-p">Their partner page: <a class="gemboss-ec-md-link" href="https://wiser.test/partners" target="_blank" rel="noopener noreferrer">https://wiser.test/partners</a>. Notes from the call are in the CRM.</p></div><div class="gb-chat-meta"><button type="button" class="ui-btn ui-btn--ghost gb-chat-copy">Copy</button><span>Claude Code</span><span>6.2s</span></div></div></div><div class="gemboss-ec-input" data-density="full"><textarea rows="1" aria-label="Message" placeholder="Ask, or describe a partner meeting…"></textarea><div class="gemboss-ec-toolbar"><div class="gemboss-ec-toolbar-lead"><span class="gb-engine"><button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":
|
|
11754
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Trả lời xong: markdown (bảng, danh sách, code, URL trần thành link từ 0.29.2), dòng Copy · engine · giây</figcaption><div class="cat-live"><div style="width:460px;max-width:100%;height:640px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden"><div class="gb-chat"><div class="gemboss-ec-scroll" role="log" aria-label="Conversation"><div class="gemboss-ec-msg user"><div class="gemboss-ec-bubble">Who is exploring a partnership?</div></div><div class="gemboss-ec-msg assistant"><ul class="gemboss-narr" aria-label="What it is doing"><li class="gemboss-narr-row ok"><span class="gemboss-narr-dot" aria-hidden="true">✓</span><span class="gemboss-narr-text">Search partners<span class="gb-chat-target"> Wiser</span></span></li><li class="gemboss-narr-row ok"><span class="gemboss-narr-dot" aria-hidden="true">✓</span><span class="gemboss-narr-text">Read history<span class="gb-chat-target"> Amit Porwal</span></span></li><li class="gemboss-narr-row trace ok"><span class="gemboss-narr-dot" aria-hidden="true">⏺</span><details class="gemboss-narr-trace"><summary><code>partner_timeline(id: 418, days: 30)</code></summary><div class="gemboss-narr-trace-body"><code>{ "events": 6, "last": "2026-10-05" }</code></div></details></li></ul><div class="gemboss-ec-bubble"><p class="gemboss-md-p"><strong>Wiser</strong> is exploring a deeper partnership.</p><div class="gemboss-md-tablewrap"><table class="gemboss-md-table"><thead><tr><th>Partner</th><th>Last talk</th><th>Next step</th></tr></thead><tbody><tr><td>Wiser</td><td>3 days ago</td><td>Co-marketing proposal</td></tr><tr><td>Loox</td><td>12 days ago</td><td>Intro call</td></tr></tbody></table></div><ul class="gemboss-md-list"><li>Send the proposal by <strong>Friday</strong></li><li>Ask about the <code class="gemboss-md-code">affiliate</code> tier</li></ul><p class="gemboss-md-p">Their partner page: <a class="gemboss-ec-md-link" href="https://wiser.test/partners" target="_blank" rel="noopener noreferrer">https://wiser.test/partners</a>. Notes from the call are in the CRM.</p></div><div class="gb-chat-meta"><button type="button" class="ui-btn ui-btn--ghost gb-chat-copy">Copy</button><span>Claude Code</span><span>6.2s</span></div></div></div><div class="gemboss-ec-input" data-density="full"><textarea rows="1" aria-label="Message" placeholder="Ask, or describe a partner meeting…"></textarea><div class="gemboss-ec-toolbar"><div class="gemboss-ec-toolbar-lead"><span class="gb-engine"><button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c114-Rv:" aria-label="Engine: Claude Code · Opus" title="Engine: Claude Code · Opus"><span class="gb-engine-dot gb-engine-dot--ok" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span><span class="gb-engine-chipmark"><svg class="gemboss-engine-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 13.7L21.6 12.5Q22.2 12 21.6 11.5L12 10.3Z M10.8 13.2L18.43 19.14Q19.21 19.21 19.14 18.43L13.2 10.8Z M10.3 12L11.5 21.6Q12 22.2 12.5 21.6L13.7 12Z M10.8 10.8L4.86 18.43Q4.79 19.21 5.57 19.14L13.2 13.2Z M12 10.3L2.4 11.5Q1.8 12 2.4 12.5L12 13.7Z M13.2 10.8L5.57 4.86Q4.79 4.79 4.86 5.57L10.8 13.2Z M13.7 12L12.5 2.4Q12 1.8 11.5 2.4L10.3 12Z M13.2 13.2L19.14 5.57Q19.21 4.79 18.43 4.86L10.8 10.8Z" fill-rule="nonzero"></path></svg></span></button><div id=":c114-Rv:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span></div><div class="gemboss-ec-toolbar-tools"><button type="button" class="gemboss-ec-attach-btn" aria-label="Attach a file" title="Attach a file"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.4 11.1l-8.5 8.5a5.5 5.5 0 01-7.8-7.8l8.5-8.5a3.7 3.7 0 015.2 5.2l-8.5 8.5a1.8 1.8 0 01-2.6-2.6l7.8-7.8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><input type="file" hidden="" tabindex="-1"/></div><button type="submit" disabled="" aria-label="Send" title="Send"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M10.53 4.47a.75.75 0 0 0-1.06 0l-4.5 4.5a.75.75 0 0 0 1.06 1.06l3.22-3.22v8.69a.75.75 0 0 0 1.5 0v-8.69l3.22 3.22a.75.75 0 1 0 1.06-1.06l-4.5-4.5Z"></path></svg></button></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="width:460px;max-width:100%;height:640px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden">
|
|
11612
11755
|
<div class="gb-chat">
|
|
11613
11756
|
<div class="gemboss-ec-scroll" role="log" aria-label="Conversation">
|
|
11614
11757
|
<div class="gemboss-ec-msg user">
|
|
@@ -11684,7 +11827,7 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11684
11827
|
<div class="gemboss-ec-toolbar">
|
|
11685
11828
|
<div class="gemboss-ec-toolbar-lead">
|
|
11686
11829
|
<span class="gb-engine">
|
|
11687
|
-
<button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":
|
|
11830
|
+
<button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c114-Rv:" aria-label="Engine: Claude Code · Opus" title="Engine: Claude Code · Opus">
|
|
11688
11831
|
<span class="gb-engine-dot gb-engine-dot--ok" aria-hidden="true">
|
|
11689
11832
|
</span>
|
|
11690
11833
|
<span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span>
|
|
@@ -11696,7 +11839,7 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11696
11839
|
</svg>
|
|
11697
11840
|
</span>
|
|
11698
11841
|
</button>
|
|
11699
|
-
<div id=":
|
|
11842
|
+
<div id=":c114-Rv:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden="">
|
|
11700
11843
|
</div>
|
|
11701
11844
|
</span>
|
|
11702
11845
|
</div>
|
|
@@ -11718,7 +11861,7 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11718
11861
|
</div>
|
|
11719
11862
|
</div>
|
|
11720
11863
|
</div>
|
|
11721
|
-
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Lỗi: lỗi lượt có cách sửa (câu + lệnh + Copy + lỗi gốc gập); lỗi cầu nối là MỘT dòng BridgeNotice (Open setup 24px chuột / 44px chạm)</figcaption><div class="cat-live"><div style="width:420px;max-width:100%;height:520px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden"><div class="gb-chat"><div class="gemboss-ec-scroll" role="log" aria-label="Conversation"><div class="gemboss-ec-msg user"><div class="gemboss-ec-bubble">Summarize last week</div></div><div class="gemboss-ec-msg assistant"><div class="ui-notice ui-notice--danger gb-chat-error" role="alert"><div>Not signed in on your machine. Open Terminal, run the command below, then sign in:</div><code class="gb-chat-cmd">claude</code><div><button type="button" class="ui-btn ui-btn--ghost gb-chat-copy">Copy command</button></div><details class="gb-chat-original"><summary>Original error</summary><span>Error: not logged in · Please run /login</span></details></div></div><div class="gemboss-ec-msg user"><div class="gemboss-ec-bubble">Try again</div></div><div class="gemboss-ec-msg assistant"><p class="gb-engine-notice gb-engine-notice--down" role="status"><span class="gb-engine-dot gb-engine-dot--down" aria-hidden="true"></span><span class="gb-engine-notice-text">The bridge on your machine rejected this browser's pairing code (it was installed with another code). Pair again in Setup.</span><button type="button" class="gb-engine-notice-link">Open setup</button></p></div></div><div class="gemboss-ec-input" data-density="full"><textarea rows="1" aria-label="Message" placeholder="Ask, or describe a partner meeting…"></textarea><div class="gemboss-ec-toolbar"><div class="gemboss-ec-toolbar-lead"><span class="gb-engine"><button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":
|
|
11864
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Lỗi: lỗi lượt có cách sửa (câu + lệnh + Copy + lỗi gốc gập); lỗi cầu nối là MỘT dòng BridgeNotice (Open setup 24px chuột / 44px chạm)</figcaption><div class="cat-live"><div style="width:420px;max-width:100%;height:520px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden"><div class="gb-chat"><div class="gemboss-ec-scroll" role="log" aria-label="Conversation"><div class="gemboss-ec-msg user"><div class="gemboss-ec-bubble">Summarize last week</div></div><div class="gemboss-ec-msg assistant"><div class="ui-notice ui-notice--danger gb-chat-error" role="alert"><div>Not signed in on your machine. Open Terminal, run the command below, then sign in:</div><code class="gb-chat-cmd">claude</code><div><button type="button" class="ui-btn ui-btn--ghost gb-chat-copy">Copy command</button></div><details class="gb-chat-original"><summary>Original error</summary><span>Error: not logged in · Please run /login</span></details></div></div><div class="gemboss-ec-msg user"><div class="gemboss-ec-bubble">Try again</div></div><div class="gemboss-ec-msg assistant"><p class="gb-engine-notice gb-engine-notice--down" role="status"><span class="gb-engine-dot gb-engine-dot--down" aria-hidden="true"></span><span class="gb-engine-notice-text">The bridge on your machine rejected this browser's pairing code (it was installed with another code). Pair again in Setup.</span><button type="button" class="gb-engine-notice-link">Open setup</button></p></div></div><div class="gemboss-ec-input" data-density="full"><textarea rows="1" aria-label="Message" placeholder="Ask, or describe a partner meeting…"></textarea><div class="gemboss-ec-toolbar"><div class="gemboss-ec-toolbar-lead"><span class="gb-engine"><button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c115-Rv:" aria-label="Engine: Claude Code · Opus. Bridge on your machine: Not connected" title="Engine: Claude Code · Opus. Bridge on your machine: Not connected"><span class="gb-engine-dot gb-engine-dot--down" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span><span class="gb-engine-chipmark"><svg class="gemboss-engine-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 13.7L21.6 12.5Q22.2 12 21.6 11.5L12 10.3Z M10.8 13.2L18.43 19.14Q19.21 19.21 19.14 18.43L13.2 10.8Z M10.3 12L11.5 21.6Q12 22.2 12.5 21.6L13.7 12Z M10.8 10.8L4.86 18.43Q4.79 19.21 5.57 19.14L13.2 13.2Z M12 10.3L2.4 11.5Q1.8 12 2.4 12.5L12 13.7Z M13.2 10.8L5.57 4.86Q4.79 4.79 4.86 5.57L10.8 13.2Z M13.7 12L12.5 2.4Q12 1.8 11.5 2.4L10.3 12Z M13.2 13.2L19.14 5.57Q19.21 4.79 18.43 4.86L10.8 10.8Z" fill-rule="nonzero"></path></svg></span></button><div id=":c115-Rv:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span></div><div class="gemboss-ec-toolbar-tools"><button type="button" class="gemboss-ec-attach-btn" aria-label="Attach a file" title="Attach a file"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.4 11.1l-8.5 8.5a5.5 5.5 0 01-7.8-7.8l8.5-8.5a3.7 3.7 0 015.2 5.2l-8.5 8.5a1.8 1.8 0 01-2.6-2.6l7.8-7.8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><input type="file" hidden="" tabindex="-1"/></div><button type="submit" disabled="" aria-label="Send" title="Send"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M10.53 4.47a.75.75 0 0 0-1.06 0l-4.5 4.5a.75.75 0 0 0 1.06 1.06l3.22-3.22v8.69a.75.75 0 0 0 1.5 0v-8.69l3.22 3.22a.75.75 0 1 0 1.06-1.06l-4.5-4.5Z"></path></svg></button></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="width:420px;max-width:100%;height:520px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden">
|
|
11722
11865
|
<div class="gb-chat">
|
|
11723
11866
|
<div class="gemboss-ec-scroll" role="log" aria-label="Conversation">
|
|
11724
11867
|
<div class="gemboss-ec-msg user">
|
|
@@ -11755,7 +11898,7 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11755
11898
|
<div class="gemboss-ec-toolbar">
|
|
11756
11899
|
<div class="gemboss-ec-toolbar-lead">
|
|
11757
11900
|
<span class="gb-engine">
|
|
11758
|
-
<button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":
|
|
11901
|
+
<button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c115-Rv:" aria-label="Engine: Claude Code · Opus. Bridge on your machine: Not connected" title="Engine: Claude Code · Opus. Bridge on your machine: Not connected">
|
|
11759
11902
|
<span class="gb-engine-dot gb-engine-dot--down" aria-hidden="true">
|
|
11760
11903
|
</span>
|
|
11761
11904
|
<span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span>
|
|
@@ -11767,7 +11910,7 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11767
11910
|
</svg>
|
|
11768
11911
|
</span>
|
|
11769
11912
|
</button>
|
|
11770
|
-
<div id=":
|
|
11913
|
+
<div id=":c115-Rv:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden="">
|
|
11771
11914
|
</div>
|
|
11772
11915
|
</span>
|
|
11773
11916
|
</div>
|
|
@@ -11789,7 +11932,7 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11789
11932
|
</div>
|
|
11790
11933
|
</div>
|
|
11791
11934
|
</div>
|
|
11792
|
-
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Ghi chú trong luồng: dòng lặng (đổi engine) và cầu nối lỗi thời (vàng)</figcaption><div class="cat-live"><div style="width:420px;max-width:100%;height:240px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden"><div class="gb-chat"><div class="gemboss-ec-scroll" role="log" aria-label="Conversation"><p class="gb-chat-note">Switched to Codex: a new conversation.</p><p class="gb-engine-notice gb-engine-notice--warn" role="status"><span class="gb-engine-dot gb-engine-dot--warn" aria-hidden="true"></span><span class="gb-engine-notice-text">This bridge is older than the one the panel expects: update it once.</span><button type="button" class="gb-engine-notice-link">Open setup</button></p></div><div class="gemboss-ec-input" data-density="full"><textarea rows="1" aria-label="Message" placeholder="Ask, or describe a partner meeting…"></textarea><div class="gemboss-ec-toolbar"><div class="gemboss-ec-toolbar-lead"><span class="gb-engine"><button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":
|
|
11935
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Ghi chú trong luồng: dòng lặng (đổi engine) và cầu nối lỗi thời (vàng)</figcaption><div class="cat-live"><div style="width:420px;max-width:100%;height:240px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden"><div class="gb-chat"><div class="gemboss-ec-scroll" role="log" aria-label="Conversation"><p class="gb-chat-note">Switched to Codex: a new conversation.</p><p class="gb-engine-notice gb-engine-notice--warn" role="status"><span class="gb-engine-dot gb-engine-dot--warn" aria-hidden="true"></span><span class="gb-engine-notice-text">This bridge is older than the one the panel expects: update it once.</span><button type="button" class="gb-engine-notice-link">Open setup</button></p></div><div class="gemboss-ec-input" data-density="full"><textarea rows="1" aria-label="Message" placeholder="Ask, or describe a partner meeting…"></textarea><div class="gemboss-ec-toolbar"><div class="gemboss-ec-toolbar-lead"><span class="gb-engine"><button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c116-Rv:" aria-label="Engine: Claude Code · Opus. Bridge on your machine: Outdated" title="Engine: Claude Code · Opus. Bridge on your machine: Outdated"><span class="gb-engine-dot gb-engine-dot--warn" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span><span class="gb-engine-chipmark"><svg class="gemboss-engine-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 13.7L21.6 12.5Q22.2 12 21.6 11.5L12 10.3Z M10.8 13.2L18.43 19.14Q19.21 19.21 19.14 18.43L13.2 10.8Z M10.3 12L11.5 21.6Q12 22.2 12.5 21.6L13.7 12Z M10.8 10.8L4.86 18.43Q4.79 19.21 5.57 19.14L13.2 13.2Z M12 10.3L2.4 11.5Q1.8 12 2.4 12.5L12 13.7Z M13.2 10.8L5.57 4.86Q4.79 4.79 4.86 5.57L10.8 13.2Z M13.7 12L12.5 2.4Q12 1.8 11.5 2.4L10.3 12Z M13.2 13.2L19.14 5.57Q19.21 4.79 18.43 4.86L10.8 10.8Z" fill-rule="nonzero"></path></svg></span></button><div id=":c116-Rv:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span></div><div class="gemboss-ec-toolbar-tools"><button type="button" class="gemboss-ec-attach-btn" aria-label="Attach a file" title="Attach a file"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.4 11.1l-8.5 8.5a5.5 5.5 0 01-7.8-7.8l8.5-8.5a3.7 3.7 0 015.2 5.2l-8.5 8.5a1.8 1.8 0 01-2.6-2.6l7.8-7.8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><input type="file" hidden="" tabindex="-1"/></div><button type="submit" disabled="" aria-label="Send" title="Send"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M10.53 4.47a.75.75 0 0 0-1.06 0l-4.5 4.5a.75.75 0 0 0 1.06 1.06l3.22-3.22v8.69a.75.75 0 0 0 1.5 0v-8.69l3.22 3.22a.75.75 0 1 0 1.06-1.06l-4.5-4.5Z"></path></svg></button></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="width:420px;max-width:100%;height:240px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden">
|
|
11793
11936
|
<div class="gb-chat">
|
|
11794
11937
|
<div class="gemboss-ec-scroll" role="log" aria-label="Conversation">
|
|
11795
11938
|
<p class="gb-chat-note">Switched to Codex: a new conversation.</p>
|
|
@@ -11806,7 +11949,7 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11806
11949
|
<div class="gemboss-ec-toolbar">
|
|
11807
11950
|
<div class="gemboss-ec-toolbar-lead">
|
|
11808
11951
|
<span class="gb-engine">
|
|
11809
|
-
<button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":
|
|
11952
|
+
<button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c116-Rv:" aria-label="Engine: Claude Code · Opus. Bridge on your machine: Outdated" title="Engine: Claude Code · Opus. Bridge on your machine: Outdated">
|
|
11810
11953
|
<span class="gb-engine-dot gb-engine-dot--warn" aria-hidden="true">
|
|
11811
11954
|
</span>
|
|
11812
11955
|
<span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span>
|
|
@@ -11818,7 +11961,7 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11818
11961
|
</svg>
|
|
11819
11962
|
</span>
|
|
11820
11963
|
</button>
|
|
11821
|
-
<div id=":
|
|
11964
|
+
<div id=":c116-Rv:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden="">
|
|
11822
11965
|
</div>
|
|
11823
11966
|
</span>
|
|
11824
11967
|
</div>
|
|
@@ -11840,7 +11983,7 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11840
11983
|
</div>
|
|
11841
11984
|
</div>
|
|
11842
11985
|
</div>
|
|
11843
|
-
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Hàng soạn hẹp: tên model rơi trước, rồi tên engine thành DẤU engine (data-density="icon")</figcaption><div class="cat-live"><div style="width:260px;max-width:100%;height:200px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden"><div class="gb-chat"><div class="gemboss-ec-scroll" role="log" aria-label="Conversation"></div><div class="gemboss-ec-input" data-density="icon"><textarea rows="1" aria-label="Message" placeholder="Ask, or describe a partner meeting…"></textarea><div class="gemboss-ec-toolbar"><div class="gemboss-ec-toolbar-lead"><span class="gb-engine"><button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":
|
|
11986
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Hàng soạn hẹp: tên model rơi trước, rồi tên engine thành DẤU engine (data-density="icon")</figcaption><div class="cat-live"><div style="width:260px;max-width:100%;height:200px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden"><div class="gb-chat"><div class="gemboss-ec-scroll" role="log" aria-label="Conversation"></div><div class="gemboss-ec-input" data-density="icon"><textarea rows="1" aria-label="Message" placeholder="Ask, or describe a partner meeting…"></textarea><div class="gemboss-ec-toolbar"><div class="gemboss-ec-toolbar-lead"><span class="gb-engine"><button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c117-Rv:" aria-label="Engine: Claude Code · Opus" title="Engine: Claude Code · Opus"><span class="gb-engine-dot gb-engine-dot--ok" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span><span class="gb-engine-chipmark"><svg class="gemboss-engine-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 13.7L21.6 12.5Q22.2 12 21.6 11.5L12 10.3Z M10.8 13.2L18.43 19.14Q19.21 19.21 19.14 18.43L13.2 10.8Z M10.3 12L11.5 21.6Q12 22.2 12.5 21.6L13.7 12Z M10.8 10.8L4.86 18.43Q4.79 19.21 5.57 19.14L13.2 13.2Z M12 10.3L2.4 11.5Q1.8 12 2.4 12.5L12 13.7Z M13.2 10.8L5.57 4.86Q4.79 4.79 4.86 5.57L10.8 13.2Z M13.7 12L12.5 2.4Q12 1.8 11.5 2.4L10.3 12Z M13.2 13.2L19.14 5.57Q19.21 4.79 18.43 4.86L10.8 10.8Z" fill-rule="nonzero"></path></svg></span></button><div id=":c117-Rv:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span></div><div class="gemboss-ec-toolbar-tools"><button type="button" class="gemboss-ec-attach-btn" aria-label="Attach a file" title="Attach a file"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.4 11.1l-8.5 8.5a5.5 5.5 0 01-7.8-7.8l8.5-8.5a3.7 3.7 0 015.2 5.2l-8.5 8.5a1.8 1.8 0 01-2.6-2.6l7.8-7.8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><input type="file" hidden="" tabindex="-1"/></div><button type="submit" disabled="" aria-label="Send" title="Send"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M10.53 4.47a.75.75 0 0 0-1.06 0l-4.5 4.5a.75.75 0 0 0 1.06 1.06l3.22-3.22v8.69a.75.75 0 0 0 1.5 0v-8.69l3.22 3.22a.75.75 0 1 0 1.06-1.06l-4.5-4.5Z"></path></svg></button></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="width:260px;max-width:100%;height:200px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden">
|
|
11844
11987
|
<div class="gb-chat">
|
|
11845
11988
|
<div class="gemboss-ec-scroll" role="log" aria-label="Conversation">
|
|
11846
11989
|
</div>
|
|
@@ -11850,7 +11993,7 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11850
11993
|
<div class="gemboss-ec-toolbar">
|
|
11851
11994
|
<div class="gemboss-ec-toolbar-lead">
|
|
11852
11995
|
<span class="gb-engine">
|
|
11853
|
-
<button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":
|
|
11996
|
+
<button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c117-Rv:" aria-label="Engine: Claude Code · Opus" title="Engine: Claude Code · Opus">
|
|
11854
11997
|
<span class="gb-engine-dot gb-engine-dot--ok" aria-hidden="true">
|
|
11855
11998
|
</span>
|
|
11856
11999
|
<span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span>
|
|
@@ -11862,7 +12005,7 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11862
12005
|
</svg>
|
|
11863
12006
|
</span>
|
|
11864
12007
|
</button>
|
|
11865
|
-
<div id=":
|
|
12008
|
+
<div id=":c117-Rv:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden="">
|
|
11866
12009
|
</div>
|
|
11867
12010
|
</span>
|
|
11868
12011
|
</div>
|
|
@@ -11884,12 +12027,12 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11884
12027
|
</div>
|
|
11885
12028
|
</div>
|
|
11886
12029
|
</div>
|
|
11887
|
-
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Popup engine kiểu admin: mọi engine với model riêng, một cú bấm chọn cả hai (onPick)</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="gb-engine-pane" id=":
|
|
12030
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Popup engine kiểu admin: mọi engine với model riêng, một cú bấm chọn cả hai (onPick)</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="gb-engine-pane" id=":c118-R0:-pane-engine"><div class="gb-engine-field"><span class="gb-engine-label" id=":c118-R3d:">Engine</span><div class="gb-engine-groups" role="group" aria-labelledby=":c118-R3d:"><div class="gb-engine-group" data-current=""><span class="gb-engine-rowhead"><span class="gb-engine-rowname">Claude Code</span><span class="ui-badge ui-badge--success">Claude Max</span></span><div class="gb-engine-opts" role="group" aria-label="Claude Code"><button type="button" class="gb-engine-opt" aria-pressed="false">Default</button><button type="button" class="gb-engine-opt" aria-pressed="true">Opus</button><button type="button" class="gb-engine-opt" aria-pressed="false">Sonnet</button></div></div><div class="gb-engine-group"><span class="gb-engine-rowhead"><span class="gb-engine-rowname">Codex</span><span class="ui-badge ui-badge--warning">installed, not signed in</span></span><span class="gb-engine-note">Run codex login in Terminal.</span><div class="gb-engine-opts" role="group" aria-label="Codex"><button type="button" class="gb-engine-opt" aria-pressed="false" disabled="">Default</button><button type="button" class="gb-engine-opt" aria-pressed="false" disabled="">GPT-5</button></div></div></div></div><div class="gb-engine-notes"><p>Claude Code has no access to this machine in a store session.</p></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="max-width:360px">
|
|
11888
12031
|
<div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine">
|
|
11889
|
-
<div class="gb-engine-pane" id=":
|
|
12032
|
+
<div class="gb-engine-pane" id=":c118-R0:-pane-engine">
|
|
11890
12033
|
<div class="gb-engine-field">
|
|
11891
|
-
<span class="gb-engine-label" id=":
|
|
11892
|
-
<div class="gb-engine-groups" role="group" aria-labelledby=":
|
|
12034
|
+
<span class="gb-engine-label" id=":c118-R3d:">Engine</span>
|
|
12035
|
+
<div class="gb-engine-groups" role="group" aria-labelledby=":c118-R3d:">
|
|
11893
12036
|
<div class="gb-engine-group" data-current="">
|
|
11894
12037
|
<span class="gb-engine-rowhead">
|
|
11895
12038
|
<span class="gb-engine-rowname">Claude Code</span>
|
|
@@ -11919,14 +12062,14 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11919
12062
|
</div>
|
|
11920
12063
|
</div>
|
|
11921
12064
|
</div>
|
|
11922
|
-
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Tab Setup với form ghép cặp của bề mặt: nút submit giữ kiểu của nó trong composer (0.29.2)</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":
|
|
12065
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>Tab Setup với form ghép cặp của bề mặt: nút submit giữ kiểu của nó trong composer (0.29.2)</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c119-R0:-tab-engine" aria-controls=":c119-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c119-R0:-tab-setup" aria-controls=":c119-R0:-pane-setup" aria-selected="true" tabindex="0">Setup</button><button type="button" role="tab" id=":c119-R0:-tab-status" aria-controls=":c119-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c119-R0:-pane-setup" aria-labelledby=":c119-R0:-tab-setup"><p class="gb-engine-callout gb-engine-callout--down"><strong>Bridge on your machine: not connected.</strong></p><div class="gb-engine-steps"><form class="ui-toolbar"><input class="gemboss-field" aria-label="Pairing code" placeholder="Pairing code"/><button type="submit" class="ui-btn ui-btn--primary">Pair</button></form></div><pre class="gb-engine-cmd"><code>curl -fsSL https://radar.test/bridge/install.sh | sh</code></pre><div class="gb-engine-actions"><button type="button" class="ui-btn ui-btn--primary">Copy command</button><span class="gb-engine-said" role="status"></span></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="max-width:360px">
|
|
11923
12066
|
<div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine">
|
|
11924
12067
|
<div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status">
|
|
11925
|
-
<button type="button" role="tab" id=":
|
|
11926
|
-
<button type="button" role="tab" id=":
|
|
11927
|
-
<button type="button" role="tab" id=":
|
|
12068
|
+
<button type="button" role="tab" id=":c119-R0:-tab-engine" aria-controls=":c119-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button>
|
|
12069
|
+
<button type="button" role="tab" id=":c119-R0:-tab-setup" aria-controls=":c119-R0:-pane-setup" aria-selected="true" tabindex="0">Setup</button>
|
|
12070
|
+
<button type="button" role="tab" id=":c119-R0:-tab-status" aria-controls=":c119-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button>
|
|
11928
12071
|
</div>
|
|
11929
|
-
<div class="gb-engine-pane" role="tabpanel" id=":
|
|
12072
|
+
<div class="gb-engine-pane" role="tabpanel" id=":c119-R0:-pane-setup" aria-labelledby=":c119-R0:-tab-setup">
|
|
11930
12073
|
<p class="gb-engine-callout gb-engine-callout--down">
|
|
11931
12074
|
<strong>Bridge on your machine: not connected.</strong>
|
|
11932
12075
|
</p>
|
|
@@ -12067,7 +12210,7 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
12067
12210
|
</div>
|
|
12068
12211
|
</aside>
|
|
12069
12212
|
</div></code></pre></details></figure></section>
|
|
12070
|
-
<section id="icons"><h2>Icon</h2><p>Bộ icon GemBoss: 55 icon, lưới 20px, nét 1.5. <code>fill="none"</code> nằm trên <code><g></code>, không trên <code><svg></code>.</p><div class="cat-icons"><div class="gnav-ico cat-icon" title="reaction"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg><code>reaction</code></div><div class="gnav-ico cat-icon" title="home"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 9 10 3.5 16.5 9"></path><path d="M5 7.8v8.7h10V7.8"></path><path d="M8.5 16.5v-4h3v4"></path></g></svg><code>home</code></div><div class="gnav-ico cat-icon" title="dashboard"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="6" height="6" rx="1.3"></rect><rect x="11" y="3" width="6" height="6" rx="1.3"></rect><rect x="3" y="11" width="6" height="6" rx="1.3"></rect><rect x="11" y="11" width="6" height="6" rx="1.3"></rect></g></svg><code>dashboard</code></div><div class="gnav-ico cat-icon" title="board"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg><code>board</code></div><div class="gnav-ico cat-icon" title="layout"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="8.25" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="13.5" width="13" height="3.5" rx="1"></rect></g></svg><code>layout</code></div><div class="gnav-ico cat-icon" title="layers"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3 17 6.8 10 10.6 3 6.8z"></path><path d="M3 10.1l7 3.8 7-3.8"></path><path d="M3 13.4l7 3.8 7-3.8"></path></g></svg><code>layers</code></div><div class="gnav-ico cat-icon" title="document"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 2.8h6.8l3.2 3.2v11.2H5z"></path><path d="M11.8 2.8V6H15M7.5 10h5M7.5 13h5"></path></g></svg><code>document</code></div><div class="gnav-ico cat-icon" title="article"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="1.5"></rect><path d="M6 7h8M6 10h8M6 13h5"></path></g></svg><code>article</code></div><div class="gnav-ico cat-icon" title="page"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="3.5" width="15" height="13" rx="2"></rect><path d="M2.5 7.5h15M6 11h8M6 13.5h5"></path></g></svg><code>page</code></div><div class="gnav-ico cat-icon" title="image"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="1.8"></rect><circle cx="7.3" cy="7.8" r="1.3"></circle><path d="M3.5 15l4.2-4.2 3 3 2.2-2.2 3.6 3.6"></path></g></svg><code>image</code></div><div class="gnav-ico cat-icon" title="folder"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.8 5.3c0-.8.6-1.3 1.3-1.3h3.4l1.8 2h6.6c.8 0 1.3.6 1.3 1.3v7.7c0 .8-.6 1.3-1.3 1.3H4.1c-.8 0-1.3-.6-1.3-1.3z"></path></g></svg><code>folder</code></div><div class="gnav-ico cat-icon" title="list"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 5h9M8 10h9M8 15h9"></path><circle cx="4" cy="5" r=".9"></circle><circle cx="4" cy="10" r=".9"></circle><circle cx="4" cy="15" r=".9"></circle></g></svg><code>list</code></div><div class="gnav-ico cat-icon" title="activity"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 10h3l2-5 3 10 2-5h5"></path></g></svg><code>activity</code></div><div class="gnav-ico cat-icon" title="chart"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 16.5h14"></path><rect x="4.5" y="9" width="2.8" height="5.5" rx=".7"></rect><rect x="8.6" y="5" width="2.8" height="9.5" rx=".7"></rect><rect x="12.7" y="11" width="2.8" height="3.5" rx=".7"></rect></g></svg><code>chart</code></div><div class="gnav-ico cat-icon" title="radar"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><circle cx="10" cy="10" r="3.5"></circle><path d="M10 10l5-5"></path></g></svg><code>radar</code></div><div class="gnav-ico cat-icon" title="map"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="14" height="14" rx="2"></rect><path d="M3 7.7h14M3 12.3h14M7.7 3v14M12.3 3v14"></path></g></svg><code>map</code></div><div class="gnav-ico cat-icon" title="globe"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M3 10h14M10 3c2 2 2.8 4.3 2.8 7s-.8 5-2.8 7c-2-2-2.8-4.3-2.8-7s.8-5 2.8-7z"></path></g></svg><code>globe</code></div><div class="gnav-ico cat-icon" title="megaphone"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8v4h3l6 4V4L6 8H3z"></path><path d="M15 7.5a3.5 3.5 0 0 1 0 5"></path></g></svg><code>megaphone</code></div><div class="gnav-ico cat-icon" title="star"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2.8l2.2 4.5 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5L2.8 8l5-.7z"></path></g></svg><code>star</code></div><div class="gnav-ico cat-icon" title="eye"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1.8 10S4.7 4.8 10 4.8 18.2 10 18.2 10 15.3 15.2 10 15.2 1.8 10 1.8 10z"></path><circle cx="10" cy="10" r="2.5"></circle></g></svg><code>eye</code></div><div class="gnav-ico cat-icon" title="inbox"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l2-7h10l2 7v5H3z"></path><path d="M3 11h4l1 2h4l1-2h4"></path></g></svg><code>inbox</code></div><div class="gnav-ico cat-icon" title="bell"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13.5V9a5 5 0 0 1 10 0v4.5l1.3 1.5H3.7z"></path><path d="M8.3 17.2a1.9 1.9 0 0 0 3.4 0"></path></g></svg><code>bell</code></div><div class="gnav-ico cat-icon" title="chat"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path></g></svg><code>chat</code></div><div class="gnav-ico cat-icon" title="money"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M12 7.6c-.5-.7-1.2-1-2-1-1.1 0-2 .7-2 1.6 0 2.1 4 1.2 4 3.4 0 .9-.9 1.6-2 1.6-.8 0-1.6-.3-2.1-1M10 5v1.6M10 13.2V15"></path></g></svg><code>money</code></div><div class="gnav-ico cat-icon" title="store"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.2 7.5 4.5 3.5h11l1.3 4"></path><path d="M3.2 7.5c0 1.3 1 2.2 2.3 2.2s2.2-1 2.2-2.2c0 1.3 1 2.2 2.3 2.2s2.3-1 2.3-2.2c0 1.3.9 2.2 2.2 2.2s2.3-.9 2.3-2.2"></path><path d="M4.5 9.5v7h11v-7M8.5 16.5v-3.5h3v3.5"></path></g></svg><code>store</code></div><div class="gnav-ico cat-icon" title="user"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><code>user</code></div><div class="gnav-ico cat-icon" title="users"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><code>users</code></div><div class="gnav-ico cat-icon" title="calendar"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4.5" width="14" height="12.5" rx="1.8"></rect><path d="M3 8.5h14M7 3v3M13 3v3"></path></g></svg><code>calendar</code></div><div class="gnav-ico cat-icon" title="clock"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M10 6v4l2.8 1.8"></path></g></svg><code>clock</code></div><div class="gnav-ico cat-icon" title="search"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.8" cy="8.8" r="5.3"></circle><path d="M12.8 12.8 17 17"></path></g></svg><code>search</code></div><div class="gnav-ico cat-icon" title="moon"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.6 12.4A6.2 6.2 0 0 1 7.6 4.4a6.2 6.2 0 1 0 8 8Z"></path></g></svg><code>moon</code></div><div class="gnav-ico cat-icon" title="sun"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="3.2"></circle><path d="M10 2.6v1.8M10 15.6v1.8M2.6 10h1.8M15.6 10h1.8M4.8 4.8l1.3 1.3M13.9 13.9l1.3 1.3M4.8 15.2l1.3-1.3M13.9 6.1l1.3-1.3"></path></g></svg><code>sun</code></div><div class="gnav-ico cat-icon" title="link"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.6 11.4a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-1 1"></path><path d="M11.4 8.6a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l1-1"></path></g></svg><code>link</code></div><div class="gnav-ico cat-icon" title="sliders"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h14M3 10h14M3 15h14"></path><circle cx="7" cy="5" r="1.6"></circle><circle cx="13" cy="10" r="1.6"></circle><circle cx="9" cy="15" r="1.6"></circle></g></svg><code>sliders</code></div><div class="gnav-ico cat-icon" title="settings"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.52 9.08 17.15 9.15 17.15 10.85 15.52 10.92 14.56 13.26 15.66 14.45 14.45 15.66 13.26 14.56 10.92 15.52 10.85 17.15 9.15 17.15 9.08 15.52 6.74 14.56 5.55 15.66 4.34 14.45 5.44 13.26 4.48 10.92 2.85 10.85 2.85 9.15 4.48 9.08 5.44 6.74 4.34 5.55 5.55 4.34 6.74 5.44 9.08 4.48 9.15 2.85 10.85 2.85 10.92 4.48 13.26 5.44 14.45 4.34 15.66 5.55 14.56 6.74Z"></path><circle cx="10" cy="10" r="2.4"></circle></g></svg><code>settings</code></div><div class="gnav-ico cat-icon" title="alert"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.2 17.3 16H2.7z"></path><path d="M10 8.2v3.6M10 13.9v.1"></path></g></svg><code>alert</code></div><div class="gnav-ico cat-icon" title="info"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M10 9v4.5M10 6.4v.1"></path></g></svg><code>info</code></div><div class="gnav-ico cat-icon" title="check"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10.5 8 14.5 16 5.5"></path></g></svg><code>check</code></div><div class="gnav-ico cat-icon" title="plus"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg><code>plus</code></div><div class="gnav-ico cat-icon" title="close"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10M15 5 5 15"></path></g></svg><code>close</code></div><div class="gnav-ico cat-icon" title="more"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="4.5" cy="10" r="1"></circle><circle cx="10" cy="10" r="1"></circle><circle cx="15.5" cy="10" r="1"></circle></g></svg><code>more</code></div><div class="gnav-ico cat-icon" title="apps"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="4.5" cy="4.5" r="1"></circle><circle cx="10" cy="4.5" r="1"></circle><circle cx="15.5" cy="4.5" r="1"></circle><circle cx="4.5" cy="10" r="1"></circle><circle cx="10" cy="10" r="1"></circle><circle cx="15.5" cy="10" r="1"></circle><circle cx="4.5" cy="15.5" r="1"></circle><circle cx="10" cy="15.5" r="1"></circle><circle cx="15.5" cy="15.5" r="1"></circle></g></svg><code>apps</code></div><div class="gnav-ico cat-icon" title="utensils"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3v5a2 2 0 0 0 4 0V3M8 3v14"></path><path d="M15 3c-1.6 1.4-2.5 3.6-2.5 6.5H15V17"></path></g></svg><code>utensils</code></div><div class="gnav-ico cat-icon" title="signOut"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5H4v13h4M12.5 6.5 16 10l-3.5 3.5M16 10H8"></path></g></svg><code>signOut</code></div><div class="gnav-ico cat-icon" title="sparkle"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3.5c.4 2.9 1.6 4.1 4.5 4.5-2.9.4-4.1 1.6-4.5 4.5-.4-2.9-1.6-4.1-4.5-4.5 2.9-.4 4.1-1.6 4.5-4.5z"></path><path d="M14.5 12.5c.2 1.3.7 1.8 2 2-1.3.2-1.8.7-2 2-.2-1.3-.7-1.8-2-2 1.3-.2 1.8-.7 2-2z"></path></g></svg><code>sparkle</code></div><div class="gnav-ico cat-icon" title="hash"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg><code>hash</code></div><div class="gnav-ico cat-icon" title="lock"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="9" width="11" height="8" rx="1.5"></rect><path d="M7 9V6.5a3 3 0 0 1 6 0V9"></path></g></svg><code>lock</code></div><div class="gnav-ico cat-icon" title="reply"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg><code>reply</code></div><div class="gnav-ico cat-icon" title="thread"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg><code>thread</code></div><div class="gnav-ico cat-icon" title="paperclip"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg><code>paperclip</code></div><div class="gnav-ico cat-icon" title="send"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg><code>send</code></div><div class="gnav-ico cat-icon" title="chevronLeft"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg><code>chevronLeft</code></div><div class="gnav-ico cat-icon" title="chevronsDown"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5.5l4 4 4-4M6 10.5l4 4 4-4"></path></g></svg><code>chevronsDown</code></div><div class="gnav-ico cat-icon" title="panelRight"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="2"></rect><path d="M12.5 3.5v13"></path></g></svg><code>panelRight</code></div><div class="gnav-ico cat-icon" title="emoji"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="6.5"></circle><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path></g></svg><code>emoji</code></div></div><figure class="cat-demo"><figcaption>Một icon (markup)</figcaption><div class="cat-live"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg></div><details class="cat-code"><summary>Markup</summary><pre><code><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
12213
|
+
<section id="icons"><h2>Icon</h2><p>Bộ icon GemBoss: 56 icon, lưới 20px, nét 1.5. <code>fill="none"</code> nằm trên <code><g></code>, không trên <code><svg></code>.</p><div class="cat-icons"><div class="gnav-ico cat-icon" title="reaction"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg><code>reaction</code></div><div class="gnav-ico cat-icon" title="home"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 9 10 3.5 16.5 9"></path><path d="M5 7.8v8.7h10V7.8"></path><path d="M8.5 16.5v-4h3v4"></path></g></svg><code>home</code></div><div class="gnav-ico cat-icon" title="dashboard"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="6" height="6" rx="1.3"></rect><rect x="11" y="3" width="6" height="6" rx="1.3"></rect><rect x="3" y="11" width="6" height="6" rx="1.3"></rect><rect x="11" y="11" width="6" height="6" rx="1.3"></rect></g></svg><code>dashboard</code></div><div class="gnav-ico cat-icon" title="board"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg><code>board</code></div><div class="gnav-ico cat-icon" title="layout"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="8.25" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="13.5" width="13" height="3.5" rx="1"></rect></g></svg><code>layout</code></div><div class="gnav-ico cat-icon" title="layers"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3 17 6.8 10 10.6 3 6.8z"></path><path d="M3 10.1l7 3.8 7-3.8"></path><path d="M3 13.4l7 3.8 7-3.8"></path></g></svg><code>layers</code></div><div class="gnav-ico cat-icon" title="document"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 2.8h6.8l3.2 3.2v11.2H5z"></path><path d="M11.8 2.8V6H15M7.5 10h5M7.5 13h5"></path></g></svg><code>document</code></div><div class="gnav-ico cat-icon" title="article"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="1.5"></rect><path d="M6 7h8M6 10h8M6 13h5"></path></g></svg><code>article</code></div><div class="gnav-ico cat-icon" title="page"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="3.5" width="15" height="13" rx="2"></rect><path d="M2.5 7.5h15M6 11h8M6 13.5h5"></path></g></svg><code>page</code></div><div class="gnav-ico cat-icon" title="image"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="1.8"></rect><circle cx="7.3" cy="7.8" r="1.3"></circle><path d="M3.5 15l4.2-4.2 3 3 2.2-2.2 3.6 3.6"></path></g></svg><code>image</code></div><div class="gnav-ico cat-icon" title="folder"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.8 5.3c0-.8.6-1.3 1.3-1.3h3.4l1.8 2h6.6c.8 0 1.3.6 1.3 1.3v7.7c0 .8-.6 1.3-1.3 1.3H4.1c-.8 0-1.3-.6-1.3-1.3z"></path></g></svg><code>folder</code></div><div class="gnav-ico cat-icon" title="list"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 5h9M8 10h9M8 15h9"></path><circle cx="4" cy="5" r=".9"></circle><circle cx="4" cy="10" r=".9"></circle><circle cx="4" cy="15" r=".9"></circle></g></svg><code>list</code></div><div class="gnav-ico cat-icon" title="activity"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 10h3l2-5 3 10 2-5h5"></path></g></svg><code>activity</code></div><div class="gnav-ico cat-icon" title="chart"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 16.5h14"></path><rect x="4.5" y="9" width="2.8" height="5.5" rx=".7"></rect><rect x="8.6" y="5" width="2.8" height="9.5" rx=".7"></rect><rect x="12.7" y="11" width="2.8" height="3.5" rx=".7"></rect></g></svg><code>chart</code></div><div class="gnav-ico cat-icon" title="radar"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><circle cx="10" cy="10" r="3.5"></circle><path d="M10 10l5-5"></path></g></svg><code>radar</code></div><div class="gnav-ico cat-icon" title="map"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="14" height="14" rx="2"></rect><path d="M3 7.7h14M3 12.3h14M7.7 3v14M12.3 3v14"></path></g></svg><code>map</code></div><div class="gnav-ico cat-icon" title="globe"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M3 10h14M10 3c2 2 2.8 4.3 2.8 7s-.8 5-2.8 7c-2-2-2.8-4.3-2.8-7s.8-5 2.8-7z"></path></g></svg><code>globe</code></div><div class="gnav-ico cat-icon" title="megaphone"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8v4h3l6 4V4L6 8H3z"></path><path d="M15 7.5a3.5 3.5 0 0 1 0 5"></path></g></svg><code>megaphone</code></div><div class="gnav-ico cat-icon" title="star"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2.8l2.2 4.5 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5L2.8 8l5-.7z"></path></g></svg><code>star</code></div><div class="gnav-ico cat-icon" title="eye"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1.8 10S4.7 4.8 10 4.8 18.2 10 18.2 10 15.3 15.2 10 15.2 1.8 10 1.8 10z"></path><circle cx="10" cy="10" r="2.5"></circle></g></svg><code>eye</code></div><div class="gnav-ico cat-icon" title="inbox"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l2-7h10l2 7v5H3z"></path><path d="M3 11h4l1 2h4l1-2h4"></path></g></svg><code>inbox</code></div><div class="gnav-ico cat-icon" title="bell"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13.5V9a5 5 0 0 1 10 0v4.5l1.3 1.5H3.7z"></path><path d="M8.3 17.2a1.9 1.9 0 0 0 3.4 0"></path></g></svg><code>bell</code></div><div class="gnav-ico cat-icon" title="chat"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path></g></svg><code>chat</code></div><div class="gnav-ico cat-icon" title="money"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M12 7.6c-.5-.7-1.2-1-2-1-1.1 0-2 .7-2 1.6 0 2.1 4 1.2 4 3.4 0 .9-.9 1.6-2 1.6-.8 0-1.6-.3-2.1-1M10 5v1.6M10 13.2V15"></path></g></svg><code>money</code></div><div class="gnav-ico cat-icon" title="store"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.2 7.5 4.5 3.5h11l1.3 4"></path><path d="M3.2 7.5c0 1.3 1 2.2 2.3 2.2s2.2-1 2.2-2.2c0 1.3 1 2.2 2.3 2.2s2.3-1 2.3-2.2c0 1.3.9 2.2 2.2 2.2s2.3-.9 2.3-2.2"></path><path d="M4.5 9.5v7h11v-7M8.5 16.5v-3.5h3v3.5"></path></g></svg><code>store</code></div><div class="gnav-ico cat-icon" title="user"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><code>user</code></div><div class="gnav-ico cat-icon" title="users"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><code>users</code></div><div class="gnav-ico cat-icon" title="calendar"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4.5" width="14" height="12.5" rx="1.8"></rect><path d="M3 8.5h14M7 3v3M13 3v3"></path></g></svg><code>calendar</code></div><div class="gnav-ico cat-icon" title="clock"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M10 6v4l2.8 1.8"></path></g></svg><code>clock</code></div><div class="gnav-ico cat-icon" title="search"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.8" cy="8.8" r="5.3"></circle><path d="M12.8 12.8 17 17"></path></g></svg><code>search</code></div><div class="gnav-ico cat-icon" title="moon"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.6 12.4A6.2 6.2 0 0 1 7.6 4.4a6.2 6.2 0 1 0 8 8Z"></path></g></svg><code>moon</code></div><div class="gnav-ico cat-icon" title="sun"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="3.2"></circle><path d="M10 2.6v1.8M10 15.6v1.8M2.6 10h1.8M15.6 10h1.8M4.8 4.8l1.3 1.3M13.9 13.9l1.3 1.3M4.8 15.2l1.3-1.3M13.9 6.1l1.3-1.3"></path></g></svg><code>sun</code></div><div class="gnav-ico cat-icon" title="link"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.6 11.4a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-1 1"></path><path d="M11.4 8.6a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l1-1"></path></g></svg><code>link</code></div><div class="gnav-ico cat-icon" title="sliders"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h14M3 10h14M3 15h14"></path><circle cx="7" cy="5" r="1.6"></circle><circle cx="13" cy="10" r="1.6"></circle><circle cx="9" cy="15" r="1.6"></circle></g></svg><code>sliders</code></div><div class="gnav-ico cat-icon" title="settings"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.52 9.08 17.15 9.15 17.15 10.85 15.52 10.92 14.56 13.26 15.66 14.45 14.45 15.66 13.26 14.56 10.92 15.52 10.85 17.15 9.15 17.15 9.08 15.52 6.74 14.56 5.55 15.66 4.34 14.45 5.44 13.26 4.48 10.92 2.85 10.85 2.85 9.15 4.48 9.08 5.44 6.74 4.34 5.55 5.55 4.34 6.74 5.44 9.08 4.48 9.15 2.85 10.85 2.85 10.92 4.48 13.26 5.44 14.45 4.34 15.66 5.55 14.56 6.74Z"></path><circle cx="10" cy="10" r="2.4"></circle></g></svg><code>settings</code></div><div class="gnav-ico cat-icon" title="alert"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.2 17.3 16H2.7z"></path><path d="M10 8.2v3.6M10 13.9v.1"></path></g></svg><code>alert</code></div><div class="gnav-ico cat-icon" title="info"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M10 9v4.5M10 6.4v.1"></path></g></svg><code>info</code></div><div class="gnav-ico cat-icon" title="check"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10.5 8 14.5 16 5.5"></path></g></svg><code>check</code></div><div class="gnav-ico cat-icon" title="plus"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg><code>plus</code></div><div class="gnav-ico cat-icon" title="close"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10M15 5 5 15"></path></g></svg><code>close</code></div><div class="gnav-ico cat-icon" title="more"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="4.5" cy="10" r="1"></circle><circle cx="10" cy="10" r="1"></circle><circle cx="15.5" cy="10" r="1"></circle></g></svg><code>more</code></div><div class="gnav-ico cat-icon" title="apps"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="4.5" cy="4.5" r="1"></circle><circle cx="10" cy="4.5" r="1"></circle><circle cx="15.5" cy="4.5" r="1"></circle><circle cx="4.5" cy="10" r="1"></circle><circle cx="10" cy="10" r="1"></circle><circle cx="15.5" cy="10" r="1"></circle><circle cx="4.5" cy="15.5" r="1"></circle><circle cx="10" cy="15.5" r="1"></circle><circle cx="15.5" cy="15.5" r="1"></circle></g></svg><code>apps</code></div><div class="gnav-ico cat-icon" title="utensils"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3v5a2 2 0 0 0 4 0V3M8 3v14"></path><path d="M15 3c-1.6 1.4-2.5 3.6-2.5 6.5H15V17"></path></g></svg><code>utensils</code></div><div class="gnav-ico cat-icon" title="signOut"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5H4v13h4M12.5 6.5 16 10l-3.5 3.5M16 10H8"></path></g></svg><code>signOut</code></div><div class="gnav-ico cat-icon" title="sparkle"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3.5c.4 2.9 1.6 4.1 4.5 4.5-2.9.4-4.1 1.6-4.5 4.5-.4-2.9-1.6-4.1-4.5-4.5 2.9-.4 4.1-1.6 4.5-4.5z"></path><path d="M14.5 12.5c.2 1.3.7 1.8 2 2-1.3.2-1.8.7-2 2-.2-1.3-.7-1.8-2-2 1.3-.2 1.8-.7 2-2z"></path></g></svg><code>sparkle</code></div><div class="gnav-ico cat-icon" title="hash"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg><code>hash</code></div><div class="gnav-ico cat-icon" title="lock"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="9" width="11" height="8" rx="1.5"></rect><path d="M7 9V6.5a3 3 0 0 1 6 0V9"></path></g></svg><code>lock</code></div><div class="gnav-ico cat-icon" title="reply"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg><code>reply</code></div><div class="gnav-ico cat-icon" title="thread"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg><code>thread</code></div><div class="gnav-ico cat-icon" title="paperclip"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg><code>paperclip</code></div><div class="gnav-ico cat-icon" title="send"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg><code>send</code></div><div class="gnav-ico cat-icon" title="chevronLeft"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg><code>chevronLeft</code></div><div class="gnav-ico cat-icon" title="chevronsDown"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5.5l4 4 4-4M6 10.5l4 4 4-4"></path></g></svg><code>chevronsDown</code></div><div class="gnav-ico cat-icon" title="chevronDown"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8l4 4 4-4"></path></g></svg><code>chevronDown</code></div><div class="gnav-ico cat-icon" title="panelRight"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="2"></rect><path d="M12.5 3.5v13"></path></g></svg><code>panelRight</code></div><div class="gnav-ico cat-icon" title="emoji"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="6.5"></circle><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path></g></svg><code>emoji</code></div></div><figure class="cat-demo"><figcaption>Một icon (markup)</figcaption><div class="cat-live"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg></div><details class="cat-code"><summary>Markup</summary><pre><code><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
12071
12214
|
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
12072
12215
|
<rect x="3" y="3.5" width="4" height="13" rx="1.2">
|
|
12073
12216
|
</rect>
|