@webskill/chatbot 0.6.0 → 0.8.0

package/README.md

@@ -154,9 +154,10 @@ so a symbol cannot be quietly downgraded — the change shows up in the diff.
     `configureA2uiMarkdown`, the `probe*` helpers, `RendererKind`,
     `RendererCapability` and `DEFAULT_RENDERER_CAPABILITIES`. Their shape
     tracks upstream ecosystems this package does not own.
-  - **Surfaces introduced in this release** — `ChatAttachmentInput` and
-    `ChatAttachmentMeta` (multimodal attachments), which no consumer has
-    exercised yet.
+  - **Surfaces not yet exercised by consumers** — `ChatAttachmentInput` and
+    `ChatAttachmentMeta` (multimodal attachments), `ChatThinking` and
+    `ChatTokenUsage` (thinking segments and token usage persisted on messages,
+    0.7.0), and `pickUsableLlmEntry` (usable-model entry criterion, 0.7.0).
   - **`RunSnapshot`** — the resume snapshot format, `@experimental` in
     `@webskill/sdk` for the same reason.
 

package/dist/chatbot.css

@@ -11,7 +11,6 @@
     --container-sm: 24rem;
     --container-md: 28rem;
     --container-2xl: 42rem;
-    --container-3xl: 48rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -279,9 +278,6 @@
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
-  .right-2\.5 {
-    right: calc(var(--spacing) * 2.5);
-  }
   .right-3 {
     right: calc(var(--spacing) * 3);
   }
@@ -381,6 +377,9 @@
   .my-3 {
     margin-block: calc(var(--spacing) * 3);
   }
+  .ms-1 {
+    margin-inline-start: var(--spacing);
+  }
   .ms-auto {
     margin-inline-start: auto;
   }
@@ -429,6 +428,9 @@
   .table {
     display: table;
   }
+  .aspect-\[4\/3\] {
+    aspect-ratio: 4/3;
+  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -475,6 +477,10 @@
     width: calc(var(--spacing) * 9);
     height: calc(var(--spacing) * 9);
   }
+  .size-\[3px\] {
+    width: 3px;
+    height: 3px;
+  }
   .size-full {
     width: 100%;
     height: 100%;
@@ -482,6 +488,9 @@
   .h-0 {
     height: 0px;
   }
+  .h-2 {
+    height: calc(var(--spacing) * 2);
+  }
   .h-2\.5 {
     height: calc(var(--spacing) * 2.5);
   }
@@ -527,6 +536,9 @@
   .max-h-\[calc\(100dvh-2rem\)\] {
     max-height: calc(100dvh - 2rem);
   }
+  .max-h-\[var\(--radix-select-content-available-height\)\] {
+    max-height: var(--radix-select-content-available-height);
+  }
   .min-h-0 {
     min-height: 0px;
   }
@@ -572,9 +584,15 @@
   .w-40 {
     width: calc(var(--spacing) * 40);
   }
+  .w-48 {
+    width: calc(var(--spacing) * 48);
+  }
   .w-72 {
     width: calc(var(--spacing) * 72);
   }
+  .w-80 {
+    width: calc(var(--spacing) * 80);
+  }
   .w-\[80\%\] {
     width: 80%;
   }
@@ -599,15 +617,15 @@
   .max-w-2xl {
     max-width: var(--container-2xl);
   }
-  .max-w-3xl {
-    max-width: var(--container-3xl);
-  }
   .max-w-48 {
     max-width: calc(var(--spacing) * 48);
   }
   .max-w-72 {
     max-width: calc(var(--spacing) * 72);
   }
+  .max-w-\[calc\(100vw-2rem\)\] {
+    max-width: calc(100vw - 2rem);
+  }
   .max-w-full {
     max-width: 100%;
   }
@@ -623,9 +641,6 @@
   .min-w-5 {
     min-width: calc(var(--spacing) * 5);
   }
-  .min-w-20 {
-    min-width: calc(var(--spacing) * 20);
-  }
   .min-w-32 {
     min-width: calc(var(--spacing) * 32);
   }
@@ -635,6 +650,9 @@
   .min-w-44 {
     min-width: calc(var(--spacing) * 44);
   }
+  .min-w-\[var\(--radix-select-trigger-width\)\] {
+    min-width: var(--radix-select-trigger-width);
+  }
   .min-w-max {
     min-width: max-content;
   }
@@ -709,20 +727,26 @@
   .resize-y {
     resize: vertical;
   }
+  .snap-x {
+    scroll-snap-type: x var(--tw-scroll-snap-strictness);
+  }
+  .snap-mandatory {
+    --tw-scroll-snap-strictness: mandatory;
+  }
+  .snap-start {
+    scroll-snap-align: start;
+  }
   .list-decimal {
     list-style-type: decimal;
   }
   .list-disc {
     list-style-type: disc;
   }
-  .appearance-none {
-    appearance: none;
-  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
-  .grid-cols-\[auto_auto_auto\] {
-    grid-template-columns: auto auto auto;
+  .grid-cols-\[auto_1fr\] {
+    grid-template-columns: auto 1fr;
   }
   .flex-col {
     flex-direction: column;
@@ -778,11 +802,20 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .gap-\[3px\] {
+    gap: 3px;
+  }
   :where(.space-y-1 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
     margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
   }
+  .gap-x-4 {
+    column-gap: calc(var(--spacing) * 4);
+  }
+  .gap-y-1 {
+    row-gap: var(--spacing);
+  }
   :where(.divide-y > :not(:last-child)) {
     --tw-divide-y-reverse: 0;
     border-bottom-style: var(--tw-border-style);
@@ -897,6 +930,10 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .border-l-2 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 2px;
+  }
   .border-dashed {
     --tw-border-style: dashed;
     border-style: dashed;
@@ -985,18 +1022,6 @@
   .bg-destructive-soft {
     background-color: var(--destructive-soft);
   }
-  .bg-foreground\/35 {
-    background-color: var(--foreground);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--foreground) 35%, transparent);
-    }
-  }
-  .bg-foreground\/45 {
-    background-color: var(--foreground);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--foreground) 45%, transparent);
-    }
-  }
   .bg-info {
     background-color: var(--info);
   }
@@ -1006,12 +1031,6 @@
   .bg-ink {
     background-color: var(--foreground);
   }
-  .bg-ink\/35 {
-    background-color: var(--foreground);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--foreground) 35%, transparent);
-    }
-  }
   .bg-muted {
     background-color: var(--muted-foreground);
   }
@@ -1024,6 +1043,12 @@
   .bg-primary {
     background-color: var(--primary);
   }
+  .bg-scrim {
+    background-color: var(--scrim);
+  }
+  .bg-secondary {
+    background-color: var(--secondary);
+  }
   .bg-sidebar {
     background-color: var(--sidebar);
   }
@@ -1054,6 +1079,9 @@
   .fill-ink {
     fill: var(--foreground);
   }
+  .object-cover {
+    object-fit: cover;
+  }
   .p-0 {
     padding: 0px;
   }
@@ -1072,6 +1100,9 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
+  .p-5 {
+    padding: calc(var(--spacing) * 5);
+  }
   .px-1 {
     padding-inline: var(--spacing);
   }
@@ -1156,9 +1187,15 @@
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
+  .pl-2 {
+    padding-left: calc(var(--spacing) * 2);
+  }
   .pl-3 {
     padding-left: calc(var(--spacing) * 3);
   }
+  .pl-4 {
+    padding-left: calc(var(--spacing) * 4);
+  }
   .pl-5 {
     padding-left: calc(var(--spacing) * 5);
   }
@@ -1247,9 +1284,6 @@
   .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
-  .text-background {
-    color: var(--background);
-  }
   .text-canvas {
     color: var(--background);
   }
@@ -1304,6 +1338,9 @@
   .italic {
     font-style: italic;
   }
+  .not-italic {
+    font-style: normal;
+  }
   .tabular-nums {
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
@@ -1422,6 +1459,10 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .select-text {
+    -webkit-user-select: text;
+    user-select: text;
+  }
   .group-focus-within\:opacity-100:is(:where(.group):focus-within *) {
     opacity: 100%;
   }
@@ -1429,6 +1470,9 @@
     opacity: 100%;
   }
   @media (hover: hover) {
+    .group-hover\:bg-border:is(:where(.group):hover *) {
+      background-color: var(--border);
+    }
     .group-hover\:opacity-100:is(:where(.group):hover *) {
       opacity: 100%;
     }
@@ -1511,6 +1555,39 @@
   .peer-data-\[size\=sm\]\/menu-button\:top-1:is(:where(.peer\/menu-button)[data-size="sm"] ~ *) {
     top: var(--spacing);
   }
+  .file\:mr-3::file-selector-button {
+    margin-right: calc(var(--spacing) * 3);
+  }
+  .file\:cursor-pointer::file-selector-button {
+    cursor: pointer;
+  }
+  .file\:rounded-md::file-selector-button {
+    border-radius: calc(var(--radius) - 2px);
+  }
+  .file\:border-0::file-selector-button {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
+  .file\:bg-primary::file-selector-button {
+    background-color: var(--primary);
+  }
+  .file\:px-3::file-selector-button {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+  .file\:py-1::file-selector-button {
+    padding-block: var(--spacing);
+  }
+  .file\:text-sm::file-selector-button {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .file\:font-medium::file-selector-button {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .file\:text-primary-foreground::file-selector-button {
+    color: var(--primary-foreground);
+  }
   .placeholder\:text-muted::placeholder {
     color: var(--muted-foreground);
   }
@@ -1581,12 +1658,15 @@
     .hover\:text-sidebar-accent-foreground:hover {
       color: var(--sidebar-accent-foreground);
     }
-    .hover\:opacity-85:hover {
-      opacity: 85%;
-    }
     .hover\:opacity-90:hover {
       opacity: 90%;
     }
+    .hover\:file\:bg-primary\/90:hover::file-selector-button {
+      background-color: var(--primary);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
+      }
+    }
   }
   .focus\:border-ring:focus {
     border-color: var(--ring);
@@ -1688,8 +1768,8 @@
   .data-dragging\:bg-subtle[data-dragging] {
     background-color: var(--accent);
   }
-  .data-\[active\=true\]\:bg-sidebar-accent[data-active="true"] {
-    background-color: var(--sidebar-accent);
+  .data-\[active\=true\]\:bg-subtle[data-active="true"] {
+    background-color: var(--accent);
   }
   .data-\[active\=true\]\:font-medium[data-active="true"] {
     --tw-font-weight: var(--font-weight-medium);
@@ -1725,6 +1805,9 @@
   .data-\[orientation\=vertical\]\:flex-col[data-orientation="vertical"] {
     flex-direction: column;
   }
+  .data-\[placeholder\]\:text-muted[data-placeholder] {
+    color: var(--muted-foreground);
+  }
   .data-\[selected\=true\]\:bg-subtle[data-selected="true"] {
     background-color: var(--accent);
   }
@@ -1949,6 +2032,7 @@
 :where(.dark, .light, [data-theme]) {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
+  --color-scrim: var(--scrim);
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
   --color-popover: var(--popover);
@@ -1999,8 +2083,22 @@
 }
 :root, :where(.light, [data-theme='light']) {
   --radius: 0.625rem;
+  --shadow-card-vivid: 0 6px 20px oklch(0 0 0 / 12%);
+  --surface-dashboard: oklch(0.2 0.01 260);
+  --border-dashboard: oklch(1 0 0 / 14%);
+  --palette-sky: oklch(0.95 0.03 240);
+  --palette-sky-ink: oklch(0.35 0.09 240);
+  --palette-violet: oklch(0.95 0.03 300);
+  --palette-violet-ink: oklch(0.35 0.1 300);
+  --palette-amber: oklch(0.95 0.05 85);
+  --palette-amber-ink: oklch(0.36 0.09 85);
+  --palette-rose: oklch(0.95 0.03 15);
+  --palette-rose-ink: oklch(0.37 0.11 15);
+  --palette-emerald: oklch(0.95 0.04 160);
+  --palette-emerald-ink: oklch(0.34 0.08 160);
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
+  --scrim: oklch(0.145 0 0 / 45%);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
@@ -2011,12 +2109,12 @@
   --secondary-foreground: oklch(0.205 0 0);
   --muted: oklch(0.97 0 0);
   --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
+  --accent: #0000000f;
   --accent-foreground: oklch(0.205 0 0);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
+  --destructive: oklch(0.52 0.22 27);
   --destructive-foreground: oklch(0.985 0 0);
   --success: oklch(0.62 0.13 150);
   --success-foreground: oklch(0.985 0 0);
@@ -2049,7 +2147,7 @@
   --sidebar-foreground: oklch(0.145 0 0);
   --sidebar-primary: oklch(0.205 0 0);
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent: #0000000f;
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
@@ -2089,8 +2187,22 @@
   --code-url: hsl(198, 99%, 37%);
 }
 :where(.dark, [data-theme='dark']) {
+  --shadow-card-vivid: 0 6px 20px oklch(0 0 0 / 40%);
+  --surface-dashboard: oklch(0.18 0.01 260);
+  --border-dashboard: oklch(1 0 0 / 16%);
+  --palette-sky: oklch(0.3 0.05 240);
+  --palette-sky-ink: oklch(0.88 0.06 240);
+  --palette-violet: oklch(0.3 0.06 300);
+  --palette-violet-ink: oklch(0.88 0.07 300);
+  --palette-amber: oklch(0.32 0.06 85);
+  --palette-amber-ink: oklch(0.9 0.09 85);
+  --palette-rose: oklch(0.31 0.06 15);
+  --palette-rose-ink: oklch(0.89 0.07 15);
+  --palette-emerald: oklch(0.29 0.05 160);
+  --palette-emerald-ink: oklch(0.88 0.08 160);
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
+  --scrim: oklch(0 0 0 / 60%);
   --card: oklch(0.205 0 0);
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.205 0 0);
@@ -2101,7 +2213,7 @@
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.269 0 0);
   --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
+  --accent: #ffffff0d;
   --accent-foreground: oklch(0.985 0 0);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
@@ -2134,7 +2246,7 @@
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.985 0 0);
   --sidebar-primary-foreground: oklch(0.205 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent: #ffffff0d;
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.556 0 0);
@@ -2318,6 +2430,15 @@
 .webskill-surface--form, .webskill-surface--metric, .webskill-surface--file, .webskill-surface--error, .webskill-surface--unsupported {
   padding: 1rem;
 }
+.webskill-surface.webskill-surface--spec {
+  padding: 1rem;
+}
+.webskill-surface--spec > .webskill-spec-card:only-child, .webskill-surface--spec > div > .webskill-spec-card:only-child {
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  padding: 0;
+}
 .webskill-surface--form, .webskill-surface__field {
   display: flex;
   flex-direction: column;
@@ -2457,8 +2578,86 @@
 .webskill-surface--error, .webskill-surface--unsupported {
   border-color: var(--destructive);
 }
+.webskill-palette-sky {
+  background: var(--palette-sky);
+  color: var(--palette-sky-ink);
+}
+.webskill-palette-violet {
+  background: var(--palette-violet);
+  color: var(--palette-violet-ink);
+}
+.webskill-palette-amber {
+  background: var(--palette-amber);
+  color: var(--palette-amber-ink);
+}
+.webskill-palette-rose {
+  background: var(--palette-rose);
+  color: var(--palette-rose-ink);
+}
+.webskill-palette-emerald {
+  background: var(--palette-emerald);
+  color: var(--palette-emerald-ink);
+}
+[data-webskill-theme='vivid'] {
+  --radius-card: 1rem;
+  --shadow-card: var(--shadow-card-vivid);
+}
+[data-webskill-theme='dashboard-dark'] {
+  --radius-card: 0.375rem;
+  --shadow-card: none;
+  --color-surface: var(--surface-dashboard);
+  --color-border: var(--border-dashboard);
+}
+.webskill-spec-split {
+  container-type: inline-size;
+  grid-template-columns: var(--split-ratio, 1fr 1fr);
+}
+.webskill-spec-card--span2 {
+  grid-column: span 2;
+}
+@container (max-width: 30rem) {
+  .webskill-spec-split {
+    grid-template-columns: 1fr;
+  }
+  .webskill-spec-card--span2 {
+    grid-column: auto;
+  }
+}
+.webskill-spec-form__fields {
+  display: grid;
+  gap: 0.75rem;
+  container-type: inline-size;
+  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+}
+.webskill-spec-form__fields > :has(textarea), .webskill-spec-form__fields > [data-field-span='full'] {
+  grid-column: 1 / -1;
+}
 .webskill-aui-shell {
   background: var(--color-background);
+  --webskill-chat-prose-max: 48rem;
+  --webskill-chat-surface-max: 64rem;
+}
+.webskill-aui-shell[data-layout='fullscreen'] {
+  --webskill-chat-surface-max: 80rem;
+}
+.webskill-aui-shell[data-layout='mobile'] {
+  --webskill-chat-prose-max: 100%;
+  --webskill-chat-surface-max: 100%;
+}
+.webskill-chat-prose {
+  max-width: var(--webskill-chat-prose-max);
+}
+.webskill-chat-column {
+  container-type: inline-size;
+}
+.webskill-chat-surface-wide:has([data-webskill-multicol]) {
+  --webskill-chat-surface-w: min(var(--webskill-chat-surface-max), 100cqw - 2rem);
+  width: var(--webskill-chat-surface-w);
+  margin-inline: calc((100% - var(--webskill-chat-surface-w)) / 2);
+}
+.webskill-aui-shell[data-layout='mobile'] .webskill-chat-surface-wide {
+  width: 100%;
+  margin-inline: 0;
 }
 .webskill-aui-header {
   border-color: var(--color-border);
@@ -2575,6 +2774,11 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-scroll-snap-strictness {
+  syntax: "*";
+  inherits: false;
+  initial-value: proximity;
+}
 @property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;
@@ -2810,6 +3014,7 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-scroll-snap-strictness: proximity;
       --tw-space-y-reverse: 0;
       --tw-divide-y-reverse: 0;
       --tw-border-style: solid;