@webskill/chatbot 0.5.0 → 0.7.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

@@ -279,9 +279,6 @@
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
-  .right-2\.5 {
-    right: calc(var(--spacing) * 2.5);
-  }
   .right-3 {
     right: calc(var(--spacing) * 3);
   }
@@ -291,8 +288,8 @@
   .right-full {
     right: 100%;
   }
-  .-bottom-7 {
-    bottom: calc(var(--spacing) * -7);
+  .-bottom-9 {
+    bottom: calc(var(--spacing) * -9);
   }
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
@@ -381,6 +378,9 @@
   .my-3 {
     margin-block: calc(var(--spacing) * 3);
   }
+  .ms-1 {
+    margin-inline-start: var(--spacing);
+  }
   .ms-auto {
     margin-inline-start: auto;
   }
@@ -402,8 +402,8 @@
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
-  .mb-7 {
-    margin-bottom: calc(var(--spacing) * 7);
+  .mb-9 {
+    margin-bottom: calc(var(--spacing) * 9);
   }
   .block {
     display: block;
@@ -475,6 +475,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 +486,9 @@
   .h-0 {
     height: 0px;
   }
+  .h-2 {
+    height: calc(var(--spacing) * 2);
+  }
   .h-2\.5 {
     height: calc(var(--spacing) * 2.5);
   }
@@ -527,9 +534,15 @@
   .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;
   }
+  .min-h-8 {
+    min-height: calc(var(--spacing) * 8);
+  }
   .min-h-16 {
     min-height: calc(var(--spacing) * 16);
   }
@@ -572,6 +585,12 @@
   .w-72 {
     width: calc(var(--spacing) * 72);
   }
+  .w-80 {
+    width: calc(var(--spacing) * 80);
+  }
+  .w-\[80\%\] {
+    width: 80%;
+  }
   .w-\[min\(36rem\,calc\(100vw-2rem\)\)\] {
     width: min(36rem, calc(100vw - 2rem));
   }
@@ -602,6 +621,9 @@
   .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%;
   }
@@ -617,9 +639,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);
   }
@@ -629,6 +648,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,9 +731,6 @@
   .list-disc {
     list-style-type: disc;
   }
-  .appearance-none {
-    appearance: none;
-  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -730,6 +749,9 @@
   .items-center {
     align-items: center;
   }
+  .items-end {
+    align-items: flex-end;
+  }
   .items-start {
     align-items: flex-start;
   }
@@ -766,6 +788,9 @@
   .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));
@@ -1012,6 +1037,9 @@
   .bg-primary {
     background-color: var(--primary);
   }
+  .bg-secondary {
+    background-color: var(--secondary);
+  }
   .bg-sidebar {
     background-color: var(--sidebar);
   }
@@ -1042,6 +1070,9 @@
   .fill-ink {
     fill: var(--foreground);
   }
+  .object-cover {
+    object-fit: cover;
+  }
   .p-0 {
     padding: 0px;
   }
@@ -1144,8 +1175,11 @@
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
-  .pl-3 {
-    padding-left: calc(var(--spacing) * 3);
+  .pl-2 {
+    padding-left: calc(var(--spacing) * 2);
+  }
+  .pl-4 {
+    padding-left: calc(var(--spacing) * 4);
   }
   .pl-5 {
     padding-left: calc(var(--spacing) * 5);
@@ -1229,12 +1263,12 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .whitespace-pre {
+    white-space: pre;
+  }
   .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
-  .text-background {
-    color: var(--background);
-  }
   .text-canvas {
     color: var(--background);
   }
@@ -1286,6 +1320,9 @@
   .uppercase {
     text-transform: uppercase;
   }
+  .italic {
+    font-style: italic;
+  }
   .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,);
@@ -1404,6 +1441,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%;
   }
@@ -1411,6 +1452,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%;
     }
@@ -1493,6 +1537,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);
   }
@@ -1563,12 +1640,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);
@@ -1670,8 +1750,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);
@@ -1707,6 +1787,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);
   }
@@ -1993,12 +2076,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);
@@ -2031,7 +2114,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);
@@ -2039,6 +2122,36 @@
   --brand-foreground: oklch(0.985 0 0);
   --text-min: 0.75rem;
   --text-code: 0.8125rem;
+  --code-base: hsl(230, 8%, 24%);
+  --code-comment: hsl(230, 4%, 64%);
+  --code-prolog: hsl(230, 4%, 64%);
+  --code-cdata: hsl(230, 4%, 64%);
+  --code-doctype: hsl(230, 8%, 24%);
+  --code-punctuation: hsl(230, 8%, 24%);
+  --code-entity: hsl(230, 8%, 24%);
+  --code-attr-name: hsl(35, 99%, 36%);
+  --code-class-name: hsl(35, 99%, 36%);
+  --code-boolean: hsl(35, 99%, 36%);
+  --code-constant: hsl(35, 99%, 36%);
+  --code-number: hsl(35, 99%, 36%);
+  --code-atrule: hsl(35, 99%, 36%);
+  --code-keyword: hsl(301, 63%, 40%);
+  --code-property: hsl(5, 74%, 59%);
+  --code-tag: hsl(5, 74%, 59%);
+  --code-symbol: hsl(5, 74%, 59%);
+  --code-deleted: hsl(5, 74%, 59%);
+  --code-important: hsl(5, 74%, 59%);
+  --code-selector: hsl(119, 34%, 47%);
+  --code-string: hsl(119, 34%, 47%);
+  --code-char: hsl(119, 34%, 47%);
+  --code-builtin: hsl(119, 34%, 47%);
+  --code-inserted: hsl(119, 34%, 47%);
+  --code-regex: hsl(119, 34%, 47%);
+  --code-attr-value: hsl(119, 34%, 47%);
+  --code-variable: hsl(221, 87%, 60%);
+  --code-operator: hsl(221, 87%, 60%);
+  --code-function: hsl(221, 87%, 60%);
+  --code-url: hsl(198, 99%, 37%);
 }
 :where(.dark, [data-theme='dark']) {
   --background: oklch(0.145 0 0);
@@ -2053,7 +2166,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%);
@@ -2086,12 +2199,42 @@
   --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);
   --brand: oklch(0.68 0.14 275);
   --brand-foreground: oklch(0.205 0 0);
+  --code-base: hsl(220, 14%, 71%);
+  --code-comment: hsl(220, 10%, 40%);
+  --code-prolog: hsl(220, 10%, 40%);
+  --code-cdata: hsl(220, 10%, 40%);
+  --code-doctype: hsl(220, 14%, 71%);
+  --code-punctuation: hsl(220, 14%, 71%);
+  --code-entity: hsl(220, 14%, 71%);
+  --code-attr-name: hsl(29, 54%, 61%);
+  --code-class-name: hsl(29, 54%, 61%);
+  --code-boolean: hsl(29, 54%, 61%);
+  --code-constant: hsl(29, 54%, 61%);
+  --code-number: hsl(29, 54%, 61%);
+  --code-atrule: hsl(29, 54%, 61%);
+  --code-keyword: hsl(286, 60%, 67%);
+  --code-property: hsl(355, 65%, 65%);
+  --code-tag: hsl(355, 65%, 65%);
+  --code-symbol: hsl(355, 65%, 65%);
+  --code-deleted: hsl(355, 65%, 65%);
+  --code-important: hsl(355, 65%, 65%);
+  --code-selector: hsl(95, 38%, 62%);
+  --code-string: hsl(95, 38%, 62%);
+  --code-char: hsl(95, 38%, 62%);
+  --code-builtin: hsl(95, 38%, 62%);
+  --code-inserted: hsl(95, 38%, 62%);
+  --code-regex: hsl(95, 38%, 62%);
+  --code-attr-value: hsl(95, 38%, 62%);
+  --code-variable: hsl(207, 82%, 66%);
+  --code-operator: hsl(207, 82%, 66%);
+  --code-function: hsl(207, 82%, 66%);
+  --code-url: hsl(187, 47%, 55%);
 }
 @layer base {
   *, ::before, ::after {
@@ -2240,6 +2383,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;