@lostgradient/cinder 0.6.0 → 0.7.0

package/src/components/chat/message/parts/tool-approval-part.svelte

@@ -0,0 +1,298 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { stringify } from '../../../../utilities/stringify.ts';
+let { part, onapprove, ondeny } = $props();
+const isPending = $derived(part.approved === undefined);
+const isApproved = $derived(part.approved === true);
+const isDenied = $derived(part.approved === false);
+const actionMessage = $derived(part.action.message ?? 'This tool call requires your approval before it can continue.');
+const actionSchema = $derived(part.action.schema !== undefined ? stringify(part.action.schema) : undefined);
+// Tool-call ids are external data (may contain whitespace, ':', etc. that make
+// invalid/duplicate DOM ids). Sanitize from the stable part key, mirroring
+// reasoning-part, so aria-labelledby/aria-describedby always resolve.
+const safeKey = $derived(part.key.replace(/[^a-z0-9-]/gi, '-'));
+const labelId = $derived(`tool-approval-label-${safeKey}`);
+const descId = $derived(`tool-approval-desc-${safeKey}`);
+function handleApprove() {
+    if (!isPending)
+        return;
+    onapprove?.(part.toolCallId);
+}
+function handleDeny() {
+    if (!isPending)
+        return;
+    ondeny?.(part.toolCallId);
+}
+function handleKeydown(event) {
+    if (event.key === 'Escape' && isPending) {
+        handleDeny();
+    }
+}
+</script>
+
+<!--
+  Tool approval prompt. This is an INLINE timeline item, not a modal overlay, so
+  it uses role="group" (labelled + described) rather than role="alertdialog":
+  alertdialog implies modal/interruption semantics and would let any pending row
+  (incl. historical/virtualized rows) steal focus on render. The assertive
+  announcement is owned by ChatStatusAnnouncer instead. tabindex="-1" makes the
+  container programmatically focusable and the Escape→reject keydown reliable.
+-->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div
+  class="chat-tool-approval"
+  role="group"
+  tabindex="-1"
+  aria-labelledby={labelId}
+  aria-describedby={descId}
+  data-cinder-tool-approval
+  data-cinder-status={isApproved ? 'approved' : isDenied ? 'denied' : 'pending'}
+  onkeydown={handleKeydown}
+>
+  <div class="chat-tool-approval-header">
+    <span class="chat-tool-approval-icon" aria-hidden="true">
+      {#if isApproved}
+        ✓
+      {:else if isDenied}
+        ✕
+      {:else}
+        ⚠
+      {/if}
+    </span>
+    <span id={labelId} class="chat-tool-approval-title">
+      {#if isApproved}
+        Approved: <code class="chat-tool-approval-name">{part.toolName}</code>
+      {:else if isDenied}
+        Denied: <code class="chat-tool-approval-name">{part.toolName}</code>
+      {:else}
+        Action required: <code class="chat-tool-approval-name">{part.toolName}</code>
+      {/if}
+    </span>
+  </div>
+
+  <p id={descId} class="chat-tool-approval-message">{actionMessage}</p>
+
+  {#if actionSchema !== undefined}
+    <details class="chat-tool-approval-args">
+      <summary class="chat-tool-approval-args-toggle">View parameters</summary>
+      <pre class="chat-tool-approval-args-code"><code>{actionSchema}</code></pre>
+    </details>
+  {/if}
+
+  {#if isPending}
+    <div class="chat-tool-approval-actions">
+      <button
+        type="button"
+        class="chat-tool-approval-btn chat-tool-approval-btn-approve"
+        onclick={handleApprove}
+        disabled={onapprove === undefined}
+      >
+        Approve
+      </button>
+      <button
+        type="button"
+        class="chat-tool-approval-btn chat-tool-approval-btn-deny"
+        onclick={handleDeny}
+        disabled={ondeny === undefined}
+      >
+        Reject
+      </button>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .chat-tool-approval {
+    --cinder-chat-tool-approval-bg: var(--cinder-surface-raised);
+    --cinder-chat-tool-approval-border: var(--cinder-border);
+    --cinder-chat-tool-approval-approve-color: var(--cinder-color-success-fg);
+    --cinder-chat-tool-approval-deny-color: var(--cinder-color-danger-fg);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-3);
+    padding: var(--cinder-space-4);
+    background: var(--cinder-chat-tool-approval-bg);
+    border: 1px solid var(--cinder-chat-tool-approval-border);
+    border-radius: var(--cinder-radius-md);
+    inline-size: 100%;
+  }
+
+  .chat-tool-approval[data-cinder-status='approved'] {
+    border-color: var(--cinder-color-success-border, var(--cinder-chat-tool-approval-border));
+  }
+
+  .chat-tool-approval[data-cinder-status='denied'] {
+    border-color: var(--cinder-color-danger-border, var(--cinder-chat-tool-approval-border));
+  }
+
+  .chat-tool-approval-header {
+    display: flex;
+    align-items: center;
+    gap: var(--cinder-space-2);
+  }
+
+  .chat-tool-approval-icon {
+    flex-shrink: 0;
+    font-size: var(--cinder-text-base);
+    line-height: 1;
+  }
+
+  [data-cinder-status='approved'] .chat-tool-approval-icon {
+    color: var(--cinder-chat-tool-approval-approve-color);
+  }
+
+  [data-cinder-status='denied'] .chat-tool-approval-icon {
+    color: var(--cinder-chat-tool-approval-deny-color);
+  }
+
+  [data-cinder-status='pending'] .chat-tool-approval-icon {
+    color: var(--cinder-color-warning-fg, var(--cinder-text-muted));
+  }
+
+  .chat-tool-approval-title {
+    font-size: var(--cinder-text-sm);
+    font-weight: var(--cinder-font-medium);
+    color: var(--cinder-text);
+  }
+
+  .chat-tool-approval-name {
+    font-family: var(--cinder-font-mono);
+    font-size: var(--cinder-text-sm);
+    background: var(--cinder-surface-inset);
+    padding-inline: var(--cinder-space-1);
+    border-radius: var(--cinder-radius-sm);
+  }
+
+  .chat-tool-approval-message {
+    margin: 0;
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text-muted);
+    line-height: var(--cinder-leading-normal, 1.5);
+  }
+
+  .chat-tool-approval-args {
+    font-size: var(--cinder-text-sm);
+  }
+
+  .chat-tool-approval-args-toggle {
+    cursor: pointer;
+    color: var(--cinder-text-muted);
+    user-select: none;
+
+    &:hover {
+      color: var(--cinder-text);
+    }
+  }
+
+  .chat-tool-approval-args-code {
+    margin: var(--cinder-space-2) 0 0;
+    padding: var(--cinder-space-3);
+    background: var(--cinder-surface-inset);
+    border-radius: var(--cinder-radius-sm);
+    font-family: var(--cinder-font-mono);
+    font-size: var(--cinder-text-xs);
+    overflow-x: auto;
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+
+  .chat-tool-approval-actions {
+    display: flex;
+    gap: var(--cinder-space-2);
+  }
+
+  .chat-tool-approval-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    /* Match the cinder Button component's default (md) size scale, rather
+       than the AAA 44px touch target — the latter made these buttons look
+       like oversized outliers next to every other control in the system. */
+    min-block-size: var(--cinder-button-height-md);
+    padding-block: var(--cinder-button-padding-y-md);
+    padding-inline: var(--cinder-button-padding-x-md);
+    border: 1px solid transparent;
+    border-radius: var(--cinder-radius-md);
+    font-size: var(--cinder-text-sm);
+    font-weight: var(--cinder-font-medium);
+    cursor: pointer;
+    transition: background-color var(--cinder-duration-fast) var(--cinder-ease-standard);
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    &:focus-visible {
+      outline: var(--cinder-ring-width) solid transparent;
+      outline-offset: 2px;
+      box-shadow: var(--_cinder-focus-ring-shadow);
+    }
+
+    @media (forced-colors: active) {
+      &:focus-visible {
+        outline: var(--cinder-ring-width) solid ButtonText;
+        outline-offset: 3px;
+        box-shadow: none;
+      }
+    }
+  }
+
+  .chat-tool-approval-btn-approve {
+    background: var(--cinder-success);
+    color: var(--cinder-success-contrast, var(--cinder-text));
+    border-color: var(--cinder-success);
+
+    @media (hover: hover) {
+      &:not(:disabled):hover {
+        /* cinder-allow-raw-color: structural-pattern — neutral hover overlay tint, not a themeable surface */
+        --_cinder-chat-tool-approval-hover-overlay: light-dark(
+          /* cinder-allow-raw-color: structural-pattern — neutral hover overlay tint, not a themeable surface */
+            oklch(0% 0 0 / 0.08),
+          /* cinder-allow-raw-color: structural-pattern — neutral hover overlay tint, not a themeable surface */
+            oklch(100% 0 0 / 0.1)
+        );
+
+        background-image: linear-gradient(
+          var(--_cinder-chat-tool-approval-hover-overlay),
+          var(--_cinder-chat-tool-approval-hover-overlay)
+        );
+      }
+    }
+  }
+
+  .chat-tool-approval-btn-deny {
+    background: transparent;
+    color: var(--cinder-chat-tool-approval-deny-color);
+    border-color: var(--cinder-color-danger-border, var(--cinder-chat-tool-approval-border));
+
+    @media (hover: hover) {
+      &:not(:disabled):hover {
+        background: var(--cinder-color-danger-bg, var(--cinder-surface-raised));
+      }
+    }
+  }
+
+  /* Forced-colors: the resolved-state border color is overridden by the system.
+     The title text ("Approved:"/"Denied:") is the primary non-color signal, but
+     keep a visible distinction by pinning the border to a system color. The
+     box-shadow focus ring also vanishes, so fall back to a system outline. */
+  @media (forced-colors: active) {
+    .chat-tool-approval[data-cinder-status='approved'] {
+      border-color: Highlight;
+    }
+
+    .chat-tool-approval[data-cinder-status='denied'] {
+      border-color: GrayText;
+    }
+
+    .chat-tool-approval-btn:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 2px;
+    }
+  }
+</style>

package/src/components/chat/message/parts/tool-call-part.svelte

@@ -0,0 +1,19 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import ToolCallGroup from '../tool-call-group.svelte';
+const noop = () => { };
+let { part, expanded = false, ontoggle } = $props();
+// ToolCallGroup's `ontoggle` is non-optional under exactOptionalPropertyTypes;
+// collapse an omitted handler to a noop so we never forward `undefined`.
+const handleToggle = $derived(ontoggle ?? noop);
+</script>
+
+<!--
+  A tool invocation paired with its result, if one has arrived. The disclosure
+  state stays owned by the message (forwarded through `expanded`/`ontoggle`) so
+  the historical "Show more / less" coupling is preserved unchanged.
+-->
+<ToolCallGroup pair={part.pair} {expanded} ontoggle={handleToggle} />

package/src/components/chat/message/parts/tool-result-part.svelte

@@ -0,0 +1,65 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { stringify } from '../../../../utilities/stringify.ts';
+import ToolPayloadCode from '../tool-payload-code.svelte';
+let { part } = $props();
+const result = $derived(part.result);
+const isError = $derived(result.outcome === 'error');
+const isActionRequired = $derived(result.outcome === 'action_required');
+// Render text by outcome, mirroring the historical tool-result branch:
+// - error: the structured error's `.message` (a ToolError object would
+//   otherwise stringify to `[object Object]`).
+// - action_required: the requested action's message, with a neutral
+//   fallback so it is never blank.
+// - otherwise: the safely-stringified content.
+const formatted = $derived.by(() => {
+    if (result.outcome === 'error' && result.error) {
+        return result.error.message;
+    }
+    if (result.outcome === 'action_required') {
+        return result.action?.message ?? 'This tool call requires action.';
+    }
+    return stringify(result.content);
+});
+</script>
+
+<div
+  class="chat-message-tool-result"
+  data-error={isError || undefined}
+  data-action-required={isActionRequired || undefined}
+>
+  {#if isError}
+    <div class="chat-message-tool-error" role="alert">
+      {formatted}
+    </div>
+  {:else if isActionRequired}
+    <div class="chat-message-tool-action" role="status">
+      {formatted}
+    </div>
+  {:else}
+    <ToolPayloadCode code={formatted} />
+  {/if}
+</div>
+
+<style>
+  /* Reproduces the historical tool-result body styling from chat-message so the
+     visual output is unchanged after moving onto the part layer. */
+  .chat-message-tool-result {
+    inline-size: 100%;
+  }
+
+  .chat-message-tool-error {
+    padding: var(--cinder-space-3);
+    background: var(--cinder-color-danger-bg);
+    border-radius: var(--cinder-radius-md);
+    color: var(--cinder-color-danger-fg);
+    font-size: var(--cinder-text-sm);
+  }
+
+  /* `.chat-message-tool-action` is intentionally unstyled here — the historical
+     tool-result branch rendered the action message with no dedicated rule, so
+     adding one would be a visual change. Keep the markup, not the styling. */
+</style>

package/src/components/chat/message/tool-call-group.svelte

@@ -0,0 +1,274 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { classNames } from '../../../utilities/class-names.ts';
+import { stringify } from '../../../utilities/stringify.ts';
+import Check from 'lucide-svelte/icons/check';
+import ChevronDown from 'lucide-svelte/icons/chevron-down';
+import CircleAlert from 'lucide-svelte/icons/circle-alert';
+import MoreHorizontal from 'lucide-svelte/icons/more-horizontal';
+import X from 'lucide-svelte/icons/x';
+import ToolPayloadCode from './tool-payload-code.svelte';
+let { pair, expanded = false, ontoggle, class: className, ...rest } = $props();
+// Stable ID for the disclosed region so the toggle can reference it via aria-controls.
+// Reactive so the ID tracks the current pair when the component instance is reused.
+const detailsId = $derived(`tool-call-details-${pair.call.id}`);
+// Determine result status
+const hasResult = $derived(!!pair.result);
+const isError = $derived(pair.result?.outcome === 'error');
+const isSuccess = $derived(pair.result?.outcome === 'success');
+const isActionRequired = $derived(pair.result?.outcome === 'action_required');
+// Status string drives data-status, the header icon, and the label.
+const status = $derived(isError ? 'error' : isSuccess ? 'success' : isActionRequired ? 'action-required' : 'pending');
+// The structured error's message (never the ToolError object, which would
+// render as `[object Object]`).
+const errorMessage = $derived(pair.result?.error?.message ?? '');
+// For an action_required result, surface the requested action's message; fall
+// back to a neutral label when no action detail is present (never blank).
+const actionMessage = $derived(pair.result?.action?.message ?? 'This tool call requires action.');
+// Format arguments for display
+const formattedArguments = $derived(stringify(pair.call.arguments));
+// Format result content for display
+// Return strings as-is to preserve formatting (e.g., file contents with newlines).
+// Only JSON-stringify objects/arrays since those need structure visualization.
+const formattedResult = $derived(pair.result ? stringify(pair.result.content) : '');
+function handleToggle() {
+    ontoggle?.();
+}
+</script>
+
+<div class={classNames('tool-call-group', className)} data-status={status} {...rest}>
+  <button
+    type="button"
+    class="tool-call-header"
+    aria-expanded={expanded}
+    aria-controls={detailsId}
+    aria-label={`Toggle tool call details for ${pair.call.name}`}
+    onclick={handleToggle}
+  >
+    <span class="tool-call-icon" aria-hidden="true">
+      {#if isError}
+        <X class="cinder-icon-xs" />
+      {:else if isSuccess}
+        <Check class="cinder-icon-xs" />
+      {:else if isActionRequired}
+        <CircleAlert class="cinder-icon-xs" />
+      {:else}
+        <MoreHorizontal class="cinder-icon-xs" />
+      {/if}
+    </span>
+    <span class="tool-call-name">{pair.call.name}</span>
+    <span class="tool-call-status" role="status" aria-live="polite">
+      {#if isError}
+        Failed
+      {:else if isSuccess}
+        Complete
+      {:else if isActionRequired}
+        Action required
+      {:else}
+        Pending
+      {/if}
+    </span>
+    <span class="tool-call-chevron" aria-hidden="true" data-expanded={expanded}>
+      <ChevronDown class="cinder-icon-xs" />
+    </span>
+  </button>
+
+  {#if expanded}
+    <div id={detailsId} class="tool-call-details" role="region" aria-label="Tool details">
+      <div class="tool-call-section">
+        <h4 class="tool-call-section-title">Arguments</h4>
+        <ToolPayloadCode code={formattedArguments} />
+      </div>
+
+      {#if hasResult}
+        <div class="tool-call-section" data-error={isError || undefined}>
+          <h4 class="tool-call-section-title">Result</h4>
+          {#if isError}
+            <div class="tool-call-error" role="alert">
+              {errorMessage || formattedResult}
+            </div>
+          {:else if isActionRequired}
+            <div class="tool-call-action" role="status">
+              {actionMessage}
+            </div>
+          {:else}
+            <ToolPayloadCode code={formattedResult} />
+          {/if}
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .tool-call-group {
+    inline-size: max-content;
+    min-inline-size: min(18rem, 100%);
+    max-inline-size: 100%;
+    border-radius: var(--cinder-radius-md);
+    border: 1px solid var(--cinder-border-muted);
+    overflow: hidden;
+  }
+
+  .tool-call-group[data-status='error'] {
+    border-color: var(--cinder-danger);
+  }
+
+  .tool-call-group[data-status='success'] {
+    border-color: var(--cinder-success);
+  }
+
+  .tool-call-group[data-status='action-required'] {
+    border-color: var(--cinder-warning);
+  }
+
+  /* Uses min-height for WCAG 2.2 AA touch target compliance */
+  .tool-call-header {
+    display: flex;
+    align-items: center;
+    gap: var(--cinder-space-2);
+    width: 100%;
+    min-height: var(--cinder-touch-target-min);
+    padding: var(--cinder-space-2) var(--cinder-space-3);
+    background: var(--cinder-surface);
+    border: none;
+    cursor: pointer;
+    user-select: none;
+    text-align: left;
+    font: inherit;
+    color: inherit;
+  }
+
+  /* Hover: subtle inset tint instead of the full surface-hover gray, which
+   * looked harsh against the colored card border. */
+  @media (hover: hover) {
+    .tool-call-header:hover {
+      background: color-mix(in oklch, var(--cinder-surface), var(--cinder-text) 4%);
+    }
+  }
+
+  /* Focus: ring travels via box-shadow, not outline, so it sits inside the
+   * card's colored border instead of doubling up on top of it. */
+  .tool-call-header:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: inset 0 0 0 var(--cinder-ring-width)
+      var(--_cinder-tool-call-header-ring, var(--cinder-ring-color));
+  }
+
+  @media (forced-colors: active) {
+    .tool-call-header:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: calc(var(--cinder-ring-width) * -1);
+    }
+  }
+
+  .tool-call-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: var(--cinder-text-muted);
+  }
+
+  .tool-call-group[data-status='error'] .tool-call-icon {
+    color: var(--cinder-danger);
+  }
+
+  .tool-call-group[data-status='success'] .tool-call-icon {
+    color: var(--cinder-success);
+  }
+
+  .tool-call-group[data-status='action-required'] .tool-call-icon {
+    color: var(--cinder-warning);
+  }
+
+  .tool-call-name {
+    font-family: var(--cinder-font-mono);
+    font-size: var(--cinder-text-sm);
+    font-weight: var(--cinder-font-medium);
+    color: var(--cinder-text);
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .tool-call-status {
+    font-size: var(--cinder-text-xs);
+    color: var(--cinder-text-subtle);
+    flex-shrink: 0;
+  }
+
+  .tool-call-group[data-status='error'] .tool-call-status {
+    color: var(--cinder-danger);
+  }
+
+  .tool-call-group[data-status='success'] .tool-call-status {
+    color: var(--cinder-success);
+  }
+
+  .tool-call-group[data-status='action-required'] .tool-call-status {
+    color: var(--cinder-warning);
+  }
+
+  .tool-call-chevron {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: var(--cinder-text-muted);
+    transition: transform var(--cinder-duration-fast) var(--cinder-ease-standard);
+  }
+
+  .tool-call-chevron[data-expanded='true'] {
+    transform: rotate(180deg);
+  }
+
+  .tool-call-details {
+    padding: var(--cinder-space-3);
+    border-top: 1px solid var(--cinder-border-muted);
+    background: var(--cinder-surface-inset);
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-2);
+  }
+
+  .tool-call-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-1);
+  }
+
+  .tool-call-section-title {
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-semibold);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--cinder-text-muted);
+    margin: 0;
+  }
+
+  .tool-call-error {
+    padding: var(--cinder-space-3);
+    background: var(--cinder-color-danger-bg);
+    border-radius: var(--cinder-radius-md);
+    color: var(--cinder-color-danger-fg);
+    font-size: var(--cinder-text-sm);
+  }
+
+  .tool-call-section[data-error] :global(.cinder-code-block) {
+    border-color: var(--cinder-color-danger-border);
+  }
+
+  .tool-call-action {
+    padding: var(--cinder-space-3);
+    background: var(--cinder-color-warning-bg);
+    border-radius: var(--cinder-radius-md);
+    color: var(--cinder-color-warning-fg);
+    font-size: var(--cinder-text-sm);
+  }
+</style>

package/src/components/chat/message/tool-payload-code.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import CodeBlock from '../../code-block/code-block.svelte';
+import { classNames } from '../../../utilities/class-names.ts';
+let { code, class: className } = $props();
+</script>
+
+<div class={classNames('tool-payload-code', className)}>
+  <CodeBlock {code} language="json" />
+</div>
+
+<style>
+  .tool-payload-code {
+    inline-size: max-content;
+    min-inline-size: min(18rem, 100%);
+    max-inline-size: 100%;
+  }
+
+  .tool-payload-code :global(.cinder-code-block) {
+    inline-size: 100%;
+  }
+
+  /* Cap tall payloads so a large arguments/result blob scrolls in place instead
+   * of dominating the transcript. The viewport already owns overflow-x and is
+   * focusable (tabindex=0), so adding a block-axis cap here keeps it keyboard-
+   * scrollable on both axes without nesting scroll containers. Matches the
+   * reasoning block's scroll region cap. */
+  .tool-payload-code :global(.cinder-code-block__viewport) {
+    max-block-size: 16rem;
+    overflow-y: auto;
+  }
+</style>