@talgent/workbench-ui 0.0.0-stage → 0.1.2

package/public/assets/product-icons/openai.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>OpenAI</title><path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"/></svg>

package/public/assets/product-icons/qwen.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Qwen</title><path d="M12.604 1.34c.393.69.784 1.382 1.174 2.075a.18.18 0 00.157.091h5.552c.174 0 .322.11.446.327l1.454 2.57c.19.337.24.478.024.837-.26.43-.513.864-.76 1.3l-.367.658c-.106.196-.223.28-.04.512l2.652 4.637c.172.301.111.494-.043.77-.437.785-.882 1.564-1.335 2.34-.159.272-.352.375-.68.37-.777-.016-1.552-.01-2.327.016a.099.099 0 00-.081.05 575.097 575.097 0 01-2.705 4.74c-.169.293-.38.363-.725.364-.997.003-2.002.004-3.017.002a.537.537 0 01-.465-.271l-1.335-2.323a.09.09 0 00-.083-.049H4.982c-.285.03-.553-.001-.805-.092l-1.603-2.77a.543.543 0 01-.002-.54l1.207-2.12a.198.198 0 000-.197 550.951 550.951 0 01-1.875-3.272l-.79-1.395c-.16-.31-.173-.496.095-.965.465-.813.927-1.625 1.387-2.436.132-.234.304-.334.584-.335a338.3 338.3 0 012.589-.001.124.124 0 00.107-.063l2.806-4.895a.488.488 0 01.422-.246c.524-.001 1.053 0 1.583-.006L11.704 1c.341-.003.724.032.9.34zm-3.432.403a.06.06 0 00-.052.03L6.254 6.788a.157.157 0 01-.135.078H3.253c-.056 0-.07.025-.041.074l5.81 10.156c.025.042.013.062-.034.063l-2.795.015a.218.218 0 00-.2.116l-1.32 2.31c-.044.078-.021.118.068.118l5.716.008c.046 0 .08.02.104.061l1.403 2.454c.046.081.092.082.139 0l5.006-8.76.783-1.382a.055.055 0 01.096 0l1.424 2.53a.122.122 0 00.107.062l2.763-.02a.04.04 0 00.035-.02.041.041 0 000-.04l-2.9-5.086a.108.108 0 010-.113l.293-.507 1.12-1.977c.024-.041.012-.062-.035-.062H9.2c-.059 0-.073-.026-.043-.077l1.434-2.505a.107.107 0 000-.114L9.225 1.774a.06.06 0 00-.053-.031zm6.29 8.02c.046 0 .058.02.034.06l-.832 1.465-2.613 4.585a.056.056 0 01-.05.029.058.058 0 01-.05-.029L8.498 9.841c-.02-.034-.01-.052.028-.054l.216-.012 6.722-.012z"></path></svg>

package/styles/base.css

@@ -0,0 +1,95 @@
+/* Page geometry, brand artwork, scrollbars and the app shell. */
+
+/* HeroUI's inline span needs a layout box for its size to constrain the SVG. */
+.spinner {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+/* Page geometry and readable document content; HeroUI owns component appearance. */
+:root {
+  color-scheme: light;
+  --background: oklch(97.2% 0 0);
+  --brand-foreground: #18181b;
+  /* Shared topbar geometry: one row on desktop, controls no taller than a HeroUI Button. */
+  --topbar-height: 44px;
+  --topbar-control-height: 36px;
+}
+
+/* Approved brand artwork; component states remain owned by HeroUI. */
+.p-brand-icon, .p-brand-name { background: var(--brand-foreground); }
+.p-brand-icon { mask: url('/assets/brand/talgent-mark.png') center / 32px 32px no-repeat; }
+.p-brand-name { mask: url('/assets/brand/talgent-lettering.png') center calc(50% + 3px) / 84px auto no-repeat; }
+
+html {
+  scroll-behavior: smooth;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+/* One scrollbar everywhere: a 12px grab area (thinner than Windows' 17px
+   default) whose thumb draws 6px and widens to 8px under the pointer.
+   Engines with ::-webkit-scrollbar (Chromium, Safari) take the custom gutter;
+   setting scrollbar-width/scrollbar-color on an element switches Chromium back
+   to its standard scrollbar, so only Firefox gets those. A scroller that hides
+   its bar declares scrollbar-width: none, which still wins.
+   Overlay backdrops are excluded for the reason HeroUI disabled its own global
+   scrollbar rule (@heroui/styles base.css): backdrop clicks stop closing them.
+   :where() keeps these at zero specificity so any scroller can override.
+   HeroUI scrollers (Dropdown, Select, Modal, Table, ScrollShadow) apply its
+   `scrollbar` utility, which reads --scrollbar-width/--scrollbar-color; those
+   are reset to auto where the custom gutter exists, and HeroUI's thin default
+   is kept for Firefox with this thumb color. */
+:root, [data-theme] { --scrollbar-thumb: color-mix(in oklab, var(--foreground) 22%, transparent); }
+@supports selector(::-webkit-scrollbar) {
+  :root, [data-theme] { --scrollbar-width: auto; --scrollbar-color: auto; }
+}
+:where(:not(.modal__backdrop, .alert-dialog__backdrop))::-webkit-scrollbar { width: 12px; height: 12px; }
+:where(:not(.modal__backdrop, .alert-dialog__backdrop))::-webkit-scrollbar-track, :where(:not(.modal__backdrop, .alert-dialog__backdrop))::-webkit-scrollbar-corner { background: transparent; }
+:where(:not(.modal__backdrop, .alert-dialog__backdrop))::-webkit-scrollbar-thumb {
+  min-height: 32px;
+  min-width: 32px;
+  border: 3px solid transparent;
+  border-radius: 999px;
+  background: var(--scrollbar-thumb) padding-box;
+}
+:where(:not(.modal__backdrop, .alert-dialog__backdrop))::-webkit-scrollbar-thumb:hover { border-width: 2px; background-color: color-mix(in oklab, var(--foreground) 38%, transparent); }
+:where(:not(.modal__backdrop, .alert-dialog__backdrop))::-webkit-scrollbar-thumb:active { border-width: 2px; background-color: color-mix(in oklab, var(--foreground) 50%, transparent); }
+@supports not selector(::-webkit-scrollbar) {
+  :where(:not(.modal__backdrop, .alert-dialog__backdrop)) { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
+}
+
+body {
+  min-width: 0;
+  min-height: 100dvh;
+  margin: 0;
+  font-size: 16px;
+  line-height: 1.5;
+  font-variant-numeric: tabular-nums;
+  text-rendering: geometricPrecision;
+  -webkit-font-smoothing: antialiased;
+}
+
+button,
+[role="button"],
+select,
+label:has(input[type="file"]) {
+  cursor: pointer;
+}
+
+button:disabled,
+[aria-disabled="true"] {
+  cursor: not-allowed;
+}
+
+.app-shell {
+  display: grid;
+  grid-template-columns: 248px minmax(0, 1fr);
+  min-height: 100dvh;
+}
+
+.app-shell[data-sidebar-state="collapsed"] {
+  grid-template-columns: 72px minmax(0, 1fr);
+}

package/styles/fonts.css

@@ -0,0 +1,14 @@
+/* Inter Latin variable font used by the official HeroUI preview. SIL OFL: ../assets/fonts/Inter-OFL.txt */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
+  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+:root { --font-inter: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif; }
+/* Monospace Latin, then the same CJK sans as body text: monospace stacks carry
+ * no CJK face, so Chinese in code otherwise falls back to a serif system font. */
+:root { --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", monospace; }
+

package/styles/markdown.css

@@ -0,0 +1,79 @@
+/* Streamdown renders utility classes from its own bundle: beside this package
+   in the workspace, and as its sibling once installed from the registry. */
+@source "../node_modules/streamdown/dist/*.js";
+@source "../node_modules/@streamdown/code/dist/*.js";
+@source "../../../streamdown/dist/*.js";
+@source "../../../@streamdown/code/dist/*.js";
+
+@theme inline {
+  --color-primary: var(--foreground);
+  --color-muted-foreground: var(--foreground);
+  --color-sidebar: var(--surface-secondary);
+}
+
+/* Adapt Streamdown's document theme to HeroUI without changing UI tokens.
+ * Streamdown uses `muted` for a surface; HeroUI uses it for secondary text. */
+.app-markdown {
+  --muted: var(--surface-secondary);
+  --background: var(--surface);
+  min-width: 0;
+  max-width: 100%;
+  color: var(--foreground);
+  font-family: var(--font-sans);
+  font-size: 15px;
+  line-height: 1.75;
+  letter-spacing: normal;
+  overflow-wrap: anywhere;
+  line-break: strict;
+}
+
+.app-markdown > :first-child { margin-top: 0; }
+.app-markdown > :last-child { margin-bottom: 0; }
+.app-markdown :is(h1, h2, h3, h4, h5, h6) { line-height: 1.4; }
+:is(.app-markdown, .app-markdown-inline) [data-streamdown="inline-code"] {
+  border: 1px solid var(--separator);
+  background: color-mix(in oklab, var(--foreground) 9%, var(--surface));
+  font-size: .9em;
+  box-decoration-break: clone;
+}
+/* A code block is one framed box. Streamdown's header row (language label)
+ * and outer card double the frame and add a row, so they are dropped; the copy
+ * control floats in the box's corner while the block is hovered or focused. */
+.app-markdown [data-streamdown="code-block"] { position: relative; gap: 0; padding: 0; border: 0; border-radius: var(--radius); background: none; }
+.app-markdown [data-streamdown="code-block-header"] { display: none; }
+.app-markdown [data-streamdown="code-block"] > div:has(> [data-streamdown="code-block-actions"]) { position: absolute; top: 6px; right: 6px; margin: 0; height: auto; opacity: 0; transition: opacity .15s; }
+.app-markdown [data-streamdown="code-block"]:is(:hover, :focus-within) > div:has(> [data-streamdown="code-block-actions"]) { opacity: 1; }
+.app-markdown [data-streamdown="code-block-body"] { padding: 12px 14px; border-radius: var(--radius); font-size: 13px; line-height: 1.6; }
+.app-markdown .task-list-item { list-style: none; }
+.app-markdown [data-streamdown="blockquote"] { font-style: normal; }
+:is(.app-markdown, .app-markdown-inline) [data-streamdown="link"] { text-underline-offset: 3px; }
+.app-markdown :is(pre, code) { line-break: auto; }
+.app-markdown [data-streamdown="table-wrapper"] { min-width: 0; max-width: 100%; }
+/* Inherited `anywhere` lets the table squeeze columns until words split
+ * ("Rea|d"); cells keep whole words and the wrapper scrolls instead. */
+.app-markdown :is(th, td) { overflow-wrap: break-word; }
+
+@media (max-width: 640px) {
+  .app-markdown :is(th, td) { overflow-wrap: anywhere; white-space: normal; }
+  .app-markdown :is(th, td) code { white-space: normal; word-break: break-word; }
+}
+
+/* Inline Markdown takes the type of the line it sits in. */
+.app-markdown-inline { overflow-wrap: anywhere; }
+@media (hover: none) {
+  .app-markdown [data-streamdown="code-block"] > div:has(> [data-streamdown="code-block-actions"]) { opacity: 1; }
+}
+
+/* A source listing wraps long lines under a hanging indent, so the counter
+ * still numbers logical lines and continuations stay clear of the gutter,
+ * which is as wide as the last line number (--line-gutter, in ch). */
+.app-code-listing [data-streamdown="code-block-body"] { overflow-x: hidden; }
+.app-code-listing [data-streamdown="code-block-body"] :is(pre, code) { white-space: pre-wrap; overflow-wrap: anywhere; }
+.app-code-listing pre code > span { padding-left: calc(var(--line-gutter, 2ch) + 1rem); text-indent: calc(-1 * (var(--line-gutter, 2ch) + 1rem)); }
+.app-code-listing pre code > span::before { width: var(--line-gutter, 2ch); margin-right: 1rem; text-indent: 0; }
+
+/* A stored document shown inside a page: its headings sit below the page
+   title around it. */
+.app-markdown-document h1 { font-size: 18px; margin-top: 20px; }
+.app-markdown-document h2 { font-size: 16px; margin-top: 18px; }
+.app-markdown-document h3 { font-size: 15px; }

package/styles/uber-theme.css

@@ -0,0 +1,96 @@
+/* Exported from the user-selected HeroUI Theme Builder configuration.
+ * https://heroui.com/en/themes?base=0&chroma=0&formRadius=small&hue=0&lightness=0&radius=small
+ * Retrieved 2026-09-21; values below are the official export, unchanged. */
+/*
+ * HeroUI Theme Customization
+ * Add this to your global.css after importing @heroui/styles
+ * Only includes variables users need to customize
+ * @see https://heroui.com/docs/react/getting-started/theming
+ */
+
+:root,
+.light,
+.default,
+[data-theme="light"],
+[data-theme="default"] {
+  /* Theme Colors (Light Mode) */
+  --accent: oklch(0 0 0);
+  --accent-foreground: oklch(99.11% 0 0);
+  --background: oklch(97.02% 0.0000 0.00);
+  --border: oklch(90.00% 0.0000 0.00);
+  --danger: oklch(0.573 0.2249 21.97);
+  --danger-foreground: oklch(98% 0.0200 21.97);
+  --default: oklch(94.00% 0.0000 0.00);
+  --default-foreground: oklch(21.03% 0.0059 0.00);
+  --field-background: oklch(100.00% 0.0000 0.00);
+  --field-border: transparent;
+  --field-foreground: oklch(21.03% 0.0000 0.00);
+  --field-placeholder: oklch(55.17% 0.0000 0.00);
+  --focus: oklch(0 0 0);
+  --foreground: oklch(21.03% 0.0000 0.00);
+  /* 52.5% keeps secondary text at 4.5:1 on the page, white and --default surfaces. */
+  --muted: oklch(52.50% 0.0000 0.00);
+  --overlay: oklch(100.00% 0.0000 0.00);
+  --overlay-foreground: oklch(21.03% 0.0000 0.00);
+  --scrollbar: oklch(87.10% 0.0000 0.00);
+  --segment: oklch(100.00% 0.0000 0.00);
+  --segment-foreground: oklch(21.03% 0.0000 0.00);
+  --separator: oklch(92.00% 0.0000 0.00);
+  --success: oklch(0.6277 0.1604 153.06);
+  --success-foreground: oklch(98% 0.0160 153.06);
+  --surface: oklch(100.00% 0.0000 0.00);
+  --surface-foreground: oklch(21.03% 0.0000 0.00);
+  --surface-secondary: oklch(95.24% 0.0000 0.00);
+  --surface-secondary-foreground: oklch(21.03% 0.0000 0.00);
+  --surface-tertiary: oklch(93.73% 0.0000 0.00);
+  --surface-tertiary-foreground: oklch(21.03% 0.0000 0.00);
+  --warning: oklch(0.8446 0.1525 80.6);
+  --warning-foreground: oklch(15% 0.0457 80.60);
+  --accent-soft-foreground: oklch(0 0 0);
+
+  /* Border Radius */
+  --radius: 0.25rem;
+  --field-radius: 0.25rem;
+
+  /* Font Family */
+  /* Make sure to load Inter font in your app */
+  --font-sans: var(--font-inter);
+}
+
+.dark,
+[data-theme="dark"] {
+  color-scheme: dark;
+  /* Theme Colors (Dark Mode) */
+  --accent: oklch(0.9848 0 0);
+  --accent-foreground: oklch(15% 0.0000 0.00);
+  --background: oklch(12.00% 0.0000 0.00);
+  --border: oklch(28.00% 0.0000 0.00);
+  --danger: oklch(0.7044 0.1872 23.19);
+  --danger-foreground: oklch(15% 0.0500 23.19);
+  --default: oklch(27.40% 0.0000 0.00);
+  --default-foreground: oklch(99.11% 0 0);
+  --field-background: oklch(21.03% 0.0000 0.00);
+  --field-border: transparent;
+  --field-foreground: oklch(99.11% 0.0000 0.00);
+  --field-placeholder: oklch(70.50% 0.0000 0.00);
+  --focus: oklch(0.9848 0 0);
+  --foreground: oklch(99.11% 0.0000 0.00);
+  --muted: oklch(70.50% 0.0000 0.00);
+  --overlay: oklch(21.03% 0.0000 0.00);
+  --overlay-foreground: oklch(99.11% 0.0000 0.00);
+  --scrollbar: oklch(70.50% 0.0000 0.00);
+  --segment: oklch(39.64% 0.0000 0.00);
+  --segment-foreground: oklch(99.11% 0.0000 0.00);
+  --separator: oklch(25.00% 0.0000 0.00);
+  --success: oklch(0.6514 0.1321 156.22);
+  --success-foreground: oklch(15% 0.0396 156.22);
+  --surface: oklch(21.03% 0.0000 0.00);
+  --surface-foreground: oklch(99.11% 0.0000 0.00);
+  --surface-secondary: oklch(25.70% 0.0000 0.00);
+  --surface-secondary-foreground: oklch(99.11% 0.0000 0.00);
+  --surface-tertiary: oklch(27.21% 0.0000 0.00);
+  --surface-tertiary-foreground: oklch(99.11% 0.0000 0.00);
+  --warning: oklch(0.8803 0.1348 86.06);
+  --warning-foreground: oklch(15% 0.0404 86.06);
+  --accent-soft-foreground: oklch(0.9848 0 0);
+}

package/styles/work-composer.css

@@ -0,0 +1,222 @@
+/* A Work's pending actions, composer, progress, charts and previews. */
+
+.pending-action-dock {
+  position: relative;
+  z-index: 5;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: start;
+  gap: 8px;
+  margin: 0 12px 7px;
+  pointer-events: auto;
+}
+
+.pending-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: start;
+  gap: 10px;
+  min-height: 62px;
+  padding: 7px 9px;
+  pointer-events: auto;
+}
+
+.pending-card-collapsed {
+  min-height: 48px;
+}
+
+.composer {
+  padding: 8px 12px 10px;
+}
+
+.composer-box {
+  position: relative;
+  padding: 10px 10px 9px;
+}
+
+.composer-textarea {
+  min-height: 38px;
+  width: 100%;
+  resize: none;
+  padding: 0 2px;
+  font-size: 15px;
+  line-height: 1.5;
+  outline: none;
+}
+
+.composer-tools {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 8px;
+}
+
+.composer-tool-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.composer-status-icon {
+  width: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+}
+
+.composer-primary-actions {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.composer-primary-actions-split {
+  height: 34px;
+  overflow: visible;
+}
+
+.composer-split-button,
+.composer-primary-button {
+  display: inline-flex;
+  width: 38px;
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+}
+
+.composer-primary-actions-split .composer-primary-button {
+  width: 42px;
+  min-width: 42px;
+  height: 34px;
+  padding: 0;
+}
+
+.composer-primary-actions-split .composer-primary-send {
+  width: 42px;
+}
+
+.composer-primary-actions-split .composer-split-menu-button {
+  width: 28px;
+  height: 34px;
+}
+
+.composer-primary-button:active,
+.composer-split-button:active {
+  transform: translateY(1px) scale(0.99);
+}
+
+.composer-primary-button:focus-visible,
+.composer-split-button:focus-visible {
+  outline: 2px solid rgb(0 212 164 / 0.34);
+  outline-offset: 2px;
+}
+
+.composer-primary-button:disabled,
+.composer-split-button:disabled {
+  cursor: not-allowed;
+  transform: none;
+}
+
+.progress-steps,
+.artifacts-section {
+  display: grid;
+  gap: 6px;
+}
+
+.artifacts-toolbar {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.artifacts-count {
+  font-size: 12px;
+  font-weight: 680;
+}
+
+.artifacts-file-list {
+  margin-top: 0;
+}
+
+.progress-steps {
+  font-size: 13px;
+}
+
+.progress-steps div {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+}
+
+@media (max-width: 1280px) {
+  .agent-grid {
+    grid-template-columns: minmax(0, 1fr);
+    height: auto;
+    min-height: 0;
+  }
+
+  .agent-grid .stream-panel {
+    height: min(760px, calc(100vh - 96px));
+    min-height: min(560px, calc(100vh - 96px));
+  }
+
+}
+
+.token-chart {
+  overflow: hidden;
+  padding: 8px 9px 9px;
+}
+
+.token-chart svg {
+  display: block;
+  width: 100%;
+  height: 145px;
+  overflow: visible;
+}
+
+.chart-axis-label {
+  font-size: 10px;
+  font-weight: 650;
+}
+
+.chart-legend {
+  display: flex;
+  gap: 12px;
+  margin-top: 6px;
+  font-size: 11px;
+}
+
+.chart-legend span {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.chart-legend i {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+}
+
+.html-preview-shell {
+  position: relative;
+  min-width: 0;
+}
+
+.html-preview-fullscreen {
+  position: absolute;
+  z-index: 2;
+  top: 8px;
+  right: 8px;
+}
+
+.html-frame {
+  width: 100%;
+  height: 220px;
+}