@perspective-dev/viewer 5.1.0 → 5.2.0

package/dist/wasm/perspective-viewer.wasm.d.ts

@@ -27,6 +27,9 @@ export const perspectivedebugpluginelement_select_mode: (a: number, b: number) =
 export const perspectivedebugpluginelement_update: (a: number, b: number) => number;
 export const perspectiveviewerelement___get_model: (a: number) => number;
 export const perspectiveviewerelement_addPanel: (a: number, b: number) => number;
+export const perspectiveviewerelement_agentConfig: (a: number, b: number, c: number) => void;
+export const perspectiveviewerelement_agentPrompt: (a: number, b: number, c: number) => number;
+export const perspectiveviewerelement_agentReset: (a: number) => number;
 export const perspectiveviewerelement_connectedCallback: (a: number, b: number) => void;
 export const perspectiveviewerelement_copy: (a: number, b: number) => number;
 export const perspectiveviewerelement_delete: (a: number) => number;
@@ -163,21 +166,21 @@ export const virtualdataslice_setIntegerCol: (a: number, b: number, c: number, d
 export const virtualdataslice_setStringCol: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
 export const virtualserver_handleRequest: (a: number, b: number, c: number) => number;
 export const virtualserver_new: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_3667: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_16364: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_19409: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_20067: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_20096: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_27549: (a: number, b: number, c: number, d: number) => void;
-export const __wasm_bindgen_func_elem_6430: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_6431: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_6432: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_6428: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_19529: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_20072: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_20113: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_17084: (a: number, b: number) => number;
-export const __wasm_bindgen_func_elem_20071: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_17003: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_17713: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_18571: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_3989: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_23208: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_31328: (a: number, b: number, c: number, d: number) => void;
+export const __wasm_bindgen_func_elem_17122: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_17718: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_6981: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_6982: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_6983: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_6979: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_23225: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_19569: (a: number, b: number) => number;
+export const __wasm_bindgen_func_elem_17717: (a: number, b: number) => void;
 export const __wbindgen_export: (a: number, b: number) => number;
 export const __wbindgen_export2: (a: number, b: number, c: number, d: number) => number;
 export const __wbindgen_export3: (a: number) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perspective-dev/viewer",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "The `<perspective-viewer>` Custom Element, frontend for Perspective",
   "keywords": [
     "perspective",
@@ -69,6 +69,7 @@
     "@types/node": ">=22",
     "@types/react-dom": ">17 <20",
     "prettier": ">=3 <4",
+    "ts-json-schema-generator": "^2.4.0",
     "typedoc": "^0.28.7",
     "typescript": ">=5 <6",
     "zx": ">=8 <9"

package/src/css/_viewer_bundle.css

@@ -35,6 +35,7 @@
 @import "render-warning.css";
 @import "status-bar.css";
 
+@import "form/mirrored-textarea.css";
 @import "form/code-editor.css";
 @import "form/debug.css";
 

package/src/css/column-selector.css

@@ -181,6 +181,14 @@
         border-color: var(--psp--color);
     }
 
+    /* Composed inside a `.pivot-column` pill (the window editor's slots),
+       the row's `min-width: auto` floor would hold it at content width and
+       overflow the container-stretched pill - collapse-to-0 requires the
+       definite-width chain to pass through. */
+    .pivot-column > .column-selector-column {
+        min-width: 0;
+    }
+
     .column-selector-column {
         display: flex;
         flex-direction: row-reverse;

package/src/css/config-selector.css

@@ -201,12 +201,46 @@
             pointer-events: none;
         }
 
+        /* `--psp-label--pivot--content` is set inline by the pivot slot
+         * when the ACTIVE plugin declares what the field draws (a `Y Line`
+         * groups by its X axis; a `Treemap` by its hierarchy). The slot
+         * emits an intl var reference rather than words, so these labels
+         * localize like any other.
+         *
+         * The role leads and the field's own name follows as a secondary
+         * label, so the reader learns what this slot DRAWS without losing
+         * which config field it IS - and a plugin that declares no role
+         * shows just the field name, exactly as before. The slot sets
+         * `--psp-label--pivot-secondary--display` as a presence flag,
+         * since CSS cannot test whether a custom property is set. */
         #group_by label.pivot-selector-label:before {
-            content: var(--psp-label--group-by--content, "Group By");
+            content: var(
+                --psp-label--pivot--content,
+                var(--psp-label--group-by--content, "Group By")
+            );
+        }
+
+        #group_by label.pivot-selector-label:after {
+            content: "(" var(--psp-label--group-by--content, "Group By") ")";
         }
 
         #split_by label.pivot-selector-label:before {
-            content: var(--psp-label--split-by--content, "Split By");
+            content: var(
+                --psp-label--pivot--content,
+                var(--psp-label--split-by--content, "Split By")
+            );
+        }
+
+        #split_by label.pivot-selector-label:after {
+            content: "(" var(--psp-label--split-by--content, "Split By") ")";
+        }
+
+        #group_by label.pivot-selector-label:after,
+        #split_by label.pivot-selector-label:after {
+            display: var(--psp-label--pivot-secondary--display, none);
+            margin-left: 6px;
+            opacity: 0.6;
+            font-size: 0.9em;
         }
 
         #sort label.pivot-selector-label:before {
@@ -320,7 +354,8 @@
             }
         }
 
-        .group_rollup_wrapper {
+        .group_rollup_wrapper,
+        .split_rollup_wrapper {
             margin-bottom: -30px;
             flex: 0 1 auto;
             color: var(--psp-inactive--color);

package/src/css/form/code-editor.css

@@ -23,10 +23,9 @@
             height: 100px;
         }
 
-        #editor-inner {
+        /* `position`/`display` come from `.mirrored-textarea`. */
+        .editor-inner {
             overflow: hidden;
-            position: relative;
-            display: flex;
             flex: 1 1 auto;
         }
 

package/src/css/form/mirrored-textarea.css

@@ -0,0 +1,81 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+ * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+ * ┃ This file is part of the Perspective library, distributed under the terms ┃
+ * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
+
+/* Geometry for `components/form/mirrored_textarea.rs`: an invisible
+ * `<textarea>` stacked over a `<pre>` mirror of its text, so that layout -
+ * not a JS resize loop - sizes the box.
+ *
+ * This file fixes ONLY what must agree between the two layers, because
+ * every disagreement shows up as a caret sitting somewhere other than the
+ * glyphs it is between. Consumers own the rest of the box (padding,
+ * border, min/max size) and choose the growth axes via `white-space`. */
+
+:host {
+    .mirrored-textarea {
+        position: relative;
+        display: flex;
+
+        /* Anything affecting glyph advance or line breaking must be
+         * identical in both layers - hence one selector, never two. */
+        & > .mirrored-textarea-input,
+        & > .mirrored-textarea-mirror {
+            box-sizing: border-box;
+            font: inherit;
+            letter-spacing: inherit;
+            line-height: inherit;
+            tab-size: inherit;
+            margin: 0;
+            border: none;
+            white-space: pre-wrap;
+            overflow-wrap: anywhere;
+        }
+
+        & > .mirrored-textarea-input {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+
+            /* The container's padding, so the two layers' text origins
+             * and wrap widths coincide however a consumer pads the box:
+             * the mirror starts at the content box, and this element
+             * covers the padding box and re-applies the same inset. */
+            padding: inherit;
+
+            resize: none;
+            outline: none;
+            overscroll-behavior: none;
+
+            /* Functional, not visual: keystrokes, selection and caret
+             * only. The glyphs the user reads are the mirror's. */
+            color: transparent;
+            background-color: transparent;
+            caret-color: var(--psp--color, #161616);
+        }
+
+        & > .mirrored-textarea-mirror {
+            /* Clicks and drags belong to the input layer above. */
+            pointer-events: none;
+        }
+
+        /* The mirror paints everything the user sees, INCLUDING the
+         * placeholder: a consumer supplies it as `content` on
+         * `.is-empty`, which the intl label mechanism can localize.
+         * The native `placeholder` attribute stays for assistive tech
+         * but is never painted - it would double up, and no stylesheet
+         * can translate an attribute. */
+        & > .mirrored-textarea-input::placeholder {
+            color: transparent;
+        }
+    }
+}

package/src/css/viewer.css

@@ -664,6 +664,10 @@
         content: var(--psp-label--debug-tab--content);
     }
 
+    #chat_tabbar_tab:before {
+        content: var(--psp-label--chat-tab--content);
+    }
+
     label#stack-label:before {
         content: var(--psp-label--stack--content, "Stack");
     }
@@ -672,3 +676,327 @@
         content: var(--psp-label--alt-axis--content, "Alt Axis");
     }
 }
+
+#chat_panel {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    min-width: 0;
+    contain: inline-size;
+    padding: 0px;
+    gap: 6px;
+
+    #chat_log:empty {
+        flex: 0 0 auto;
+        padding-bottom: 0px;
+        margin-bottom: -6px; /* offset gap */
+    }
+
+    #chat_log {
+        flex: 1 1 auto;
+        min-height: 0;
+        overflow-y: scroll;
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        padding: 12px 6px 6px 2px;
+    }
+
+    .chat-message {
+        overflow-wrap: anywhere;
+        border-radius: 3px;
+        padding: 6px 8px;
+        max-width: 90%;
+        font-size: 1em;
+    }
+
+    /* User/error text is NOT markdown-rendered - preserve its whitespace. */
+    .chat-user,
+    .chat-error {
+        white-space: pre-wrap;
+    }
+
+    .chat-user {
+        align-self: flex-end;
+        background-color: var(--psp--background-color);
+        border: 1px solid var(--psp-inactive--color, #6e6e6e);
+    }
+
+    .chat-assistant {
+        align-self: flex-start;
+        background-color: #00000010;
+        border: 1px solid var(--psp-inactive--color, #6e6e6e);
+
+        /* Markdown content (see `agent/markdown.rs`). */
+        p,
+        ul,
+        ol,
+        blockquote,
+        pre,
+        table,
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6,
+        hr {
+            margin: 0.4em 0;
+
+            &:first-child {
+                margin-top: 0;
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            font-size: 1.05em;
+            font-weight: 700;
+        }
+
+        ul,
+        ol {
+            padding-inline-start: 1.5em;
+        }
+
+        code {
+            font-family: inherit;
+            background-color: #00000028;
+            border-radius: 3px;
+            padding: 0 3px;
+        }
+
+        pre {
+            overflow-x: auto;
+            background-color: #00000028;
+            border-radius: 3px;
+            padding: 6px 8px;
+
+            code {
+                background-color: transparent;
+                padding: 0;
+                white-space: pre;
+            }
+        }
+
+        blockquote {
+            border-left: 2px solid var(--psp-inactive--color, #6e6e6e);
+            padding-left: 8px;
+            color: var(--psp-inactive--color, #6e6e6e);
+        }
+
+        hr {
+            border: none;
+            border-top: 1px solid var(--psp-inactive--color, #6e6e6e);
+        }
+
+        a {
+            color: var(--psp-active--color, #1a7da1);
+        }
+
+        table {
+            border-collapse: collapse;
+
+            th,
+            td {
+                border: 1px solid var(--psp-inactive--color, #6e6e6e);
+                padding: 2px 6px;
+            }
+
+            th {
+                font-weight: 700;
+            }
+        }
+
+        .chat-md-align-center {
+            text-align: center;
+        }
+
+        .chat-md-align-right {
+            text-align: right;
+        }
+    }
+
+    .chat-error {
+        align-self: flex-start;
+        color: var(--warning--color, #ff471e);
+        border: 1px dashed var(--warning--color, #ff471e);
+    }
+
+    .chat-tool-chip {
+        align-self: flex-start;
+        font-size: 0.66em;
+        text-transform: uppercase;
+        color: var(--psp-inactive--color, #6e6e6e);
+        border: 1px solid var(--psp-inactive--color, #6e6e6e);
+        border-radius: 3px;
+        padding: 1px 6px;
+        cursor: default;
+    }
+
+    .chat-tool-chip-error {
+        color: var(--warning--color, #ff471e);
+        border-color: var(--warning--color, #ff471e);
+    }
+
+    .chat-reasoning {
+        font-size: 0.9em;
+        color: var(--psp-inactive--color, #6e6e6e);
+        margin-bottom: 0.4em;
+
+        summary {
+            cursor: pointer;
+            user-select: none;
+            &:before {
+                text-transform: uppercase;
+                content: var(--psp-label--chat-reasoning--content);
+                font-size: var(--psp-label--font-size, 0.75em);
+            }
+        }
+
+        /* The BODY scrolls, not the `<details>` - the summary is the
+         * collapse toggle, and auto-scrolling an outer scroller to the
+         * bottom would carry it out of view. */
+        .chat-reasoning-body {
+            white-space: pre-wrap;
+            margin-top: 0.4em;
+            max-height: 96px;
+            overflow-y: auto;
+        }
+    }
+
+    .chat-pending span {
+        display: inline-block;
+        width: 4px;
+        height: 4px;
+        margin-right: 3px;
+        border-radius: 50%;
+        background-color: var(--psp-inactive--color, #6e6e6e);
+        animation: chat-pending-pulse 1.2s infinite ease-in-out;
+
+        &:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+
+        &:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+    }
+
+    #chat_input_row {
+        display: flex;
+        gap: 6px;
+        flex: 0 0 auto;
+        padding-right: 12px;
+
+        /* The input grows downward as it fills; the button stays anchored
+         * to the bottom rather than stretching with it. */
+        align-items: flex-end;
+
+        /* The prompt is a `MirroredTextarea` (see
+         * `form/mirrored-textarea.css`): it is exactly as tall as its
+         * text, so this wrapper owns the visible box and caps how far
+         * that growth goes before it scrolls instead. */
+        #chat_input_scroll {
+            flex: 1 1 auto;
+            min-width: 0;
+            display: flex;
+            flex-direction: column;
+            min-height: 40px;
+            max-height: 160px;
+            overflow-y: auto;
+            border: 1px solid var(--psp-inactive--color, #6e6e6e);
+            border-radius: 3px;
+
+            &:focus-within {
+                border-color: var(--psp-active--color, #1a7da1);
+            }
+
+            /* Fills the resting box so clicks anywhere in it reach the
+             * input, then grows past it with the text. */
+            .chat-input-box {
+                flex: 1 0 auto;
+                padding: 4px 6px;
+                font-size: 1em;
+
+                /* The mirror paints the text; the input layer above it is
+                 * caret-only (`mirrored-textarea.css`). */
+                .mirrored-textarea-mirror {
+                    color: inherit;
+
+                    /* The placeholder, as CSS `content` so the intl
+                     * label mechanism can localize it - the native
+                     * `placeholder` attribute is untranslatable and is
+                     * kept only for assistive tech. */
+                    &.is-empty:before {
+                        content: var(--psp-label--chat-placeholder--content);
+                        color: var(--psp-inactive--color, #6e6e6e);
+                    }
+                }
+
+                /* The wrapper is the scroller - the input must not
+                 * scroll independently of the text it mirrors. */
+                .mirrored-textarea-input {
+                    overflow: hidden;
+                }
+            }
+        }
+
+        button {
+            flex: 0 0 auto;
+            cursor: pointer;
+            font-family: inherit;
+            font-size: var(--label--font-size, 0.75em);
+            text-transform: uppercase;
+            color: inherit;
+            background-color: #00000020;
+            border: 1px solid var(--psp-inactive--color, #6e6e6e);
+            border-radius: 3px;
+            padding: 0 10px;
+
+            /* Matches `#chat_input`'s resting `min-height`: the row no
+             * longer stretches its children, so this keeps the button
+             * square with an empty input and anchored as it grows. */
+            height: 40px;
+        }
+
+        #chat_send_button:before {
+            content: var(--psp-label--chat-send--content);
+        }
+
+        #chat_stop_button:before {
+            content: var(--psp-label--chat-stop--content);
+        }
+    }
+
+    #chat_badge {
+        flex: 0 0 auto;
+        font-size: 0.66em;
+        color: var(--psp-inactive--color, #6e6e6e);
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        margin-bottom: 6px;
+    }
+}
+
+@keyframes chat-pending-pulse {
+    0%,
+    80%,
+    100% {
+        opacity: 0.25;
+    }
+
+    40% {
+        opacity: 1;
+    }
+}

package/src/rust/agent/client/mod.rs

@@ -0,0 +1,19 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+pub mod protocol;
+pub mod transport;
+pub mod turn;
+
+pub use protocol::ChatMessage;
+pub use transport::{AgentTransport, OnDelta};
+pub use turn::{TurnError, run_turn};