@perspective-dev/viewer 5.0.0 → 5.2.0

package/src/css/viewer.css

@@ -303,6 +303,14 @@
         }
     }
 
+    #modal_panel.pinned {
+        position: static;
+        flex: 0 0 auto;
+        width: auto;
+        pointer-events: all;
+        overflow: visible;
+    }
+
     #modal_panel > .split-panel-divider {
         border-left: 1px solid var(--psp-inactive--color, #6e6e6e);
         margin-right: -5px;
@@ -656,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");
     }
@@ -664,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};

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

@@ -0,0 +1,320 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+//! The OpenAI chat-completions wire shapes — only the fields this client
+//! produces or consumes. Unknown response fields are ignored by serde, so
+//! provider-specific extras (`usage`, `finish_reason`, ids) cost nothing.
+//! The format is pinned by the `test/js/agent/` specs, which assert these
+//! exact shapes against a scripted fake engine.
+
+use serde::{Deserialize, Serialize};
+use serde_json::Value;
+
+/// One conversation message, tagged by `role`. `Assistant` doubles as the
+/// response-message shape (`choices[n].message`).
+#[derive(Clone, Deserialize, Serialize)]
+#[serde(tag = "role", rename_all = "lowercase")]
+pub enum ChatMessage {
+    System {
+        content: String,
+    },
+    User {
+        content: String,
+    },
+    Assistant {
+        #[serde(default, skip_serializing_if = "Option::is_none")]
+        content: Option<String>,
+        #[serde(default, skip_serializing_if = "Vec::is_empty")]
+        tool_calls: Vec<ToolCall>,
+
+        /// Reasoning-model "thinking" text, captured for DISPLAY only:
+        /// `skip_serializing` is the contract that it is never replayed
+        /// into a request (providers reject or mis-tokenize replayed
+        /// reasoning). Two wire conventions, one field: DeepSeek-style
+        /// `reasoning_content` (also LM Studio/vLLM) and OpenRouter's
+        /// `reasoning`.
+        #[serde(default, skip_serializing, alias = "reasoning")]
+        reasoning_content: Option<String>,
+    },
+    Tool {
+        tool_call_id: String,
+        content: String,
+    },
+}
+
+/// A model-emitted tool invocation, echoed back verbatim in the transcript
+/// so the model can correlate `Tool` results by `id`.
+#[derive(Clone, Deserialize, Serialize)]
+pub struct ToolCall {
+    #[serde(default)]
+    pub id: String,
+    #[serde(default = "function_type", rename = "type")]
+    pub kind: String,
+    pub function: FunctionCall,
+}
+
+/// `arguments` is a JSON-*encoded string* per the OpenAI wire format, not a
+/// JSON object.
+#[derive(Clone, Deserialize, Serialize)]
+pub struct FunctionCall {
+    pub name: String,
+    #[serde(default)]
+    pub arguments: String,
+}
+
+fn function_type() -> String {
+    "function".to_owned()
+}
+
+/// A tool advertised to the model.
+#[derive(Serialize)]
+pub struct ToolDef {
+    #[serde(rename = "type")]
+    pub kind: &'static str,
+    pub function: FunctionDef,
+}
+
+#[derive(Serialize)]
+pub struct FunctionDef {
+    pub name: &'static str,
+    pub description: &'static str,
+    pub parameters: Value,
+}
+
+#[derive(Serialize)]
+pub struct ChatRequest<'a> {
+    pub model: &'a str,
+    pub messages: &'a [ChatMessage],
+    pub tools: &'a [ToolDef],
+
+    /// Always `true`; servers that ignore it get the buffered fallback in
+    /// `transport.rs`, so streaming needs no configuration surface.
+    pub stream: bool,
+}
+
+#[derive(Deserialize)]
+pub struct ChatResponse {
+    pub choices: Vec<ChatChoice>,
+}
+
+#[derive(Deserialize)]
+pub struct ChatChoice {
+    pub message: ChatMessage,
+}
+
+/// One `stream: true` SSE frame (`data: {...}`) — the delta shapes of the
+/// OpenAI streaming wire format.
+#[derive(Deserialize)]
+pub struct ChatChunk {
+    #[serde(default)]
+    pub choices: Vec<ChunkChoice>,
+}
+
+#[derive(Deserialize)]
+pub struct ChunkChoice {
+    #[serde(default)]
+    pub delta: ChunkDelta,
+}
+
+#[derive(Default, Deserialize)]
+pub struct ChunkDelta {
+    #[serde(default)]
+    pub content: Option<String>,
+    #[serde(default)]
+    pub reasoning_content: Option<String>,
+    #[serde(default)]
+    pub reasoning: Option<String>,
+    #[serde(default)]
+    pub tool_calls: Vec<ToolCallDelta>,
+}
+
+/// Tool-call fragments accumulate BY INDEX: `id`/`name` arrive on the
+/// first fragment, `arguments` arrives as string parts across many.
+#[derive(Deserialize)]
+pub struct ToolCallDelta {
+    #[serde(default)]
+    pub index: usize,
+    #[serde(default)]
+    pub id: Option<String>,
+    #[serde(default)]
+    pub function: Option<FunctionCallDelta>,
+}
+
+#[derive(Deserialize)]
+pub struct FunctionCallDelta {
+    #[serde(default)]
+    pub name: Option<String>,
+    #[serde(default)]
+    pub arguments: Option<String>,
+}
+
+/// Folds a stream of [`ChatChunk`]s into the same
+/// [`ChatMessage::Assistant`] the buffered path produces, so `turn.rs` is
+/// agnostic to how the response arrived. Reasoning takes the first
+/// non-empty of the two wire conventions per delta.
+#[derive(Default)]
+pub struct ChunkAccumulator {
+    content: String,
+    reasoning: String,
+    tool_calls: Vec<ToolCall>,
+}
+
+impl ChunkAccumulator {
+    pub fn push(&mut self, chunk: ChatChunk) {
+        for choice in chunk.choices {
+            let delta = choice.delta;
+            if let Some(content) = delta.content {
+                self.content.push_str(&content);
+            }
+
+            if let Some(reasoning) = delta
+                .reasoning_content
+                .into_iter()
+                .chain(delta.reasoning)
+                .find(|x| !x.is_empty())
+            {
+                self.reasoning.push_str(&reasoning);
+            }
+
+            for fragment in delta.tool_calls {
+                if self.tool_calls.len() <= fragment.index {
+                    self.tool_calls
+                        .resize_with(fragment.index + 1, || ToolCall {
+                            id: String::new(),
+                            kind: function_type(),
+                            function: FunctionCall {
+                                name: String::new(),
+                                arguments: String::new(),
+                            },
+                        });
+                }
+
+                let call = &mut self.tool_calls[fragment.index];
+                if let Some(id) = fragment.id {
+                    call.id = id;
+                }
+
+                if let Some(function) = fragment.function {
+                    if let Some(name) = function.name {
+                        call.function.name = name;
+                    }
+
+                    if let Some(arguments) = function.arguments {
+                        call.function.arguments.push_str(&arguments);
+                    }
+                }
+            }
+        }
+    }
+
+    /// Accumulated text/reasoning so far, for live-render callbacks.
+    pub fn progress(&self) -> (&str, &str) {
+        (&self.content, &self.reasoning)
+    }
+
+    pub fn finish(self) -> ChatMessage {
+        ChatMessage::Assistant {
+            content: (!self.content.is_empty()).then_some(self.content),
+            tool_calls: self.tool_calls,
+            reasoning_content: (!self.reasoning.is_empty()).then_some(self.reasoning),
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn chunk(json: &str) -> ChatChunk {
+        serde_json::from_str(json).unwrap()
+    }
+
+    #[test]
+    fn content_and_both_reasoning_conventions_fold() {
+        let mut acc = ChunkAccumulator::default();
+        acc.push(chunk(r#"{"choices":[{"delta":{"role":"assistant"}}]}"#));
+        acc.push(chunk(
+            r#"{"choices":[{"delta":{"reasoning_content":"th"}}]}"#,
+        ));
+        acc.push(chunk(r#"{"choices":[{"delta":{"reasoning":"ink"}}]}"#));
+        acc.push(chunk(r#"{"choices":[{"delta":{"content":"Hel"}}]}"#));
+        acc.push(chunk(
+            r#"{"choices":[{"delta":{"content":"lo","reasoning":""}}]}"#,
+        ));
+        assert_eq!(acc.progress(), ("Hello", "think"));
+        let ChatMessage::Assistant {
+            content,
+            tool_calls,
+            reasoning_content,
+        } = acc.finish()
+        else {
+            panic!("not assistant");
+        };
+
+        assert_eq!(content.as_deref(), Some("Hello"));
+        assert!(tool_calls.is_empty());
+        assert_eq!(reasoning_content.as_deref(), Some("think"));
+    }
+
+    #[test]
+    fn fragmented_tool_arguments_accumulate_by_index() {
+        let mut acc = ChunkAccumulator::default();
+        acc.push(chunk(
+            r#"{"choices":[{"delta":{"tool_calls":[
+                {"index":0,"id":"c0","function":{"name":"get_schema","arguments":""}}]}}]}"#,
+        ));
+
+        // Index 1 opens before index 0 finishes; both argument streams
+        // interleave.
+        acc.push(chunk(
+            r#"{"choices":[{"delta":{"tool_calls":[
+                {"index":1,"id":"c1","function":{"name":"set_view_config","arguments":"{\"con"}}]}}]}"#,
+        ));
+
+        acc.push(chunk(
+            r#"{"choices":[{"delta":{"tool_calls":[
+                {"index":1,"function":{"arguments":"fig\":{}}"}}]}}]}"#,
+        ));
+
+        let ChatMessage::Assistant { tool_calls, .. } = acc.finish() else {
+            panic!("not assistant");
+        };
+
+        assert_eq!(tool_calls.len(), 2);
+        assert_eq!(tool_calls[0].id, "c0");
+        assert_eq!(tool_calls[0].function.name, "get_schema");
+        assert_eq!(tool_calls[1].function.arguments, "{\"config\":{}}");
+        assert_eq!(tool_calls[1].kind, "function");
+    }
+
+    /// The display-only contract: reasoning deserializes from EITHER wire
+    /// field but NEVER serializes back into a request.
+    #[test]
+    fn assistant_reasoning_reads_both_aliases_and_never_serializes() {
+        for field in ["reasoning_content", "reasoning"] {
+            let message: ChatMessage = serde_json::from_str(&format!(
+                r#"{{"role":"assistant","content":"hi","{field}":"secret"}}"#
+            ))
+            .unwrap();
+
+            let ChatMessage::Assistant {
+                reasoning_content, ..
+            } = &message
+            else {
+                panic!("not assistant");
+            };
+
+            assert_eq!(reasoning_content.as_deref(), Some("secret"));
+            assert!(!serde_json::to_string(&message).unwrap().contains("secret"));
+        }
+    }
+}