@plures/runebook 0.4.0

package/src/lib/agent/suggestions.ts

@@ -0,0 +1,169 @@
+// Suggestion rendering and management for Ambient Agent Mode
+
+import type { Suggestion } from '../types/agent';
+
+export interface SuggestionStore {
+  suggestions: Suggestion[];
+  add(suggestion: Suggestion): void;
+  remove(id: string): void;
+  clear(): void;
+  getByPriority(priority: 'low' | 'medium' | 'high'): Suggestion[];
+  getByType(type: Suggestion['type']): Suggestion[];
+  getForCommand(command: string): Suggestion[];
+  getTop(limit?: number): Suggestion[];
+  save(): Promise<void>;
+  load(): Promise<void>;
+}
+
+/**
+ * In-memory suggestion store
+ */
+export class MemorySuggestionStore implements SuggestionStore {
+  suggestions: Suggestion[] = [];
+
+  add(suggestion: Suggestion): void {
+    // Avoid duplicates
+    if (!this.suggestions.find(s => s.id === suggestion.id)) {
+      this.suggestions.push(suggestion);
+      // Keep only recent suggestions (last 100)
+      if (this.suggestions.length > 100) {
+        this.suggestions = this.suggestions.slice(-100);
+      }
+    }
+  }
+
+  remove(id: string): void {
+    this.suggestions = this.suggestions.filter(s => s.id !== id);
+  }
+
+  clear(): void {
+    this.suggestions = [];
+  }
+
+  getByPriority(priority: 'low' | 'medium' | 'high'): Suggestion[] {
+    return this.suggestions.filter(s => s.priority === priority);
+  }
+
+  getByType(type: Suggestion['type']): Suggestion[] {
+    return this.suggestions.filter(s => s.type === type);
+  }
+
+  getForCommand(command: string): Suggestion[] {
+    return this.suggestions.filter(s => 
+      s.context?.command === command || 
+      s.command === command
+    );
+  }
+
+  getTop(limit: number = 1): Suggestion[] {
+    // Sort by priority (high > medium > low) and timestamp (newest first)
+    const priorityOrder = { high: 3, medium: 2, low: 1 };
+    const sorted = [...this.suggestions].sort((a, b) => {
+      const priorityDiff = priorityOrder[b.priority] - priorityOrder[a.priority];
+      if (priorityDiff !== 0) return priorityDiff;
+      return b.timestamp - a.timestamp;
+    });
+    return sorted.slice(0, limit);
+  }
+
+  async save(): Promise<void> {
+    // No-op for in-memory store
+  }
+
+  async load(): Promise<void> {
+    // No-op for in-memory store
+  }
+}
+
+/**
+ * Format suggestion for display
+ */
+export function formatSuggestion(suggestion: Suggestion): string {
+  const priorityEmoji = {
+    low: '💡',
+    medium: '⚡',
+    high: '⚠️',
+  };
+
+  const typeEmoji = {
+    command: '▶️',
+    optimization: '⚡',
+    shortcut: '🔗',
+    warning: '⚠️',
+    tip: '💡',
+  };
+
+  const emoji = `${priorityEmoji[suggestion.priority]} ${typeEmoji[suggestion.type]}`;
+  let output = `${emoji} ${suggestion.title}\n`;
+  output += `   ${suggestion.description}\n`;
+  
+  if (suggestion.command) {
+    const args = suggestion.args ? suggestion.args.join(' ') : '';
+    output += `   Command: ${suggestion.command} ${args}\n`;
+  }
+
+  return output;
+}
+
+/**
+ * Format suggestions for headless/CLI output
+ */
+export function formatSuggestionsForCLI(suggestions: Suggestion[]): string {
+  if (suggestions.length === 0) {
+    return 'No suggestions available.\n';
+  }
+
+  let output = `\n=== Suggestions (${suggestions.length}) ===\n\n`;
+  
+  // Group by priority
+  const high = suggestions.filter(s => s.priority === 'high');
+  const medium = suggestions.filter(s => s.priority === 'medium');
+  const low = suggestions.filter(s => s.priority === 'low');
+
+  if (high.length > 0) {
+    output += 'HIGH PRIORITY:\n';
+    high.forEach(s => {
+      output += formatSuggestion(s) + '\n';
+    });
+  }
+
+  if (medium.length > 0) {
+    output += 'MEDIUM PRIORITY:\n';
+    medium.forEach(s => {
+      output += formatSuggestion(s) + '\n';
+    });
+  }
+
+  if (low.length > 0) {
+    output += 'LOW PRIORITY:\n';
+    low.forEach(s => {
+      output += formatSuggestion(s) + '\n';
+    });
+  }
+
+  return output;
+}
+
+/**
+ * Format a single suggestion for compact display (for status lines)
+ */
+export function formatSuggestionCompact(suggestion: Suggestion): string {
+  const prioritySymbol = {
+    low: '•',
+    medium: '▲',
+    high: '⚠',
+  };
+  
+  return `${prioritySymbol[suggestion.priority]} ${suggestion.title}`;
+}
+
+/**
+ * Format top suggestion for status display
+ */
+export function formatTopSuggestion(suggestion: Suggestion | null): string {
+  if (!suggestion) {
+    return '';
+  }
+  return formatSuggestionCompact(suggestion);
+}
+

package/src/lib/components/Canvas.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+  import { canvasStore } from '../stores/canvas';
+  import TerminalNodeComponent from './TerminalNode.svelte';
+  import InputNodeComponent from './InputNode.svelte';
+  import DisplayNodeComponent from './DisplayNode.svelte';
+  import TransformNodeComponent from './TransformNode.svelte';
+  import ConnectionLine from './ConnectionLine.svelte';
+  import type { CanvasNode } from '../types/canvas';
+  import type { ComponentType, SvelteComponent } from 'svelte';
+  import Box from '../design-dojo/Box.svelte';
+
+  interface Props {
+    tui?: boolean;
+  }
+
+  let { tui = false }: Props = $props();
+
+  let isDragging = $state(false);
+  let draggedNodeId = $state<string | null>(null);
+  let dragOffset = $state({ x: 0, y: 0 });
+  let viewportOffset = $state({ x: 0, y: 0 });
+  let scale = $state(1.0);
+
+  const canvasData = $derived($canvasStore);
+
+  function handleNodeMouseDown(event: MouseEvent, nodeId: string) {
+    const node = canvasData.nodes.find(n => n.id === nodeId);
+    if (!node) return;
+
+    isDragging = true;
+    draggedNodeId = nodeId;
+    dragOffset = {
+      x: event.clientX - node.position.x,
+      y: event.clientY - node.position.y
+    };
+    event.preventDefault();
+  }
+
+  function handleMouseMove(event: MouseEvent) {
+    if (isDragging && draggedNodeId) {
+      const newX = event.clientX - dragOffset.x;
+      const newY = event.clientY - dragOffset.y;
+      canvasStore.updateNodePosition(draggedNodeId, newX, newY);
+    }
+  }
+
+  function handleMouseUp() {
+    isDragging = false;
+    draggedNodeId = null;
+  }
+</script>
+
+<svelte:window 
+  onmousemove={handleMouseMove}
+  onmouseup={handleMouseUp}
+/>
+
+<Box class="canvas-container" {tui}>
+  <svg class="connections-layer">
+    {#each canvasData.connections as connection}
+      <ConnectionLine {connection} nodes={canvasData.nodes} {tui} />
+    {/each}
+  </svg>
+  
+  <div class="nodes-layer">
+    {#each canvasData.nodes as node (node.id)}
+      <div
+        class="node-wrapper"
+        role="button"
+        tabindex="0"
+        style="left: {node.position.x}px; top: {node.position.y}px;"
+        onmousedown={(e) => handleNodeMouseDown(e, node.id)}
+      >
+        {#if node.type === 'terminal'}
+          <TerminalNodeComponent node={node} {tui} />
+        {:else if node.type === 'input'}
+          <InputNodeComponent node={node} {tui} />
+        {:else if node.type === 'display'}
+          <DisplayNodeComponent node={node} {tui} />
+        {:else if node.type === 'transform'}
+          <TransformNodeComponent node={node} {tui} />
+        {/if}
+      </div>
+    {/each}
+  </div>
+</Box>
+
+<style>
+  :global(.canvas-container) {
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    background-color: var(--surface-1);
+    background-image: 
+      linear-gradient(var(--border-color) 1px, transparent 1px),
+      linear-gradient(90deg, var(--border-color) 1px, transparent 1px);
+    background-size: 20px 20px;
+    overflow: hidden;
+  }
+
+  .connections-layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .nodes-layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+  }
+
+  .node-wrapper {
+    position: absolute;
+    cursor: move;
+  }
+</style>

package/src/lib/components/ConnectionLine.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import type { Connection, CanvasNode } from '../types/canvas';
+
+  interface Props {
+    connection: Connection;
+    nodes: CanvasNode[];
+    tui?: boolean;
+  }
+
+  let { connection, nodes, tui = false }: Props = $props();
+
+  function getNodePosition(nodeId: string) {
+    const node = nodes.find(n => n.id === nodeId);
+    return node ? node.position : { x: 0, y: 0 };
+  }
+
+  const fromPos = $derived(getNodePosition(connection.from));
+  const toPos = $derived(getNodePosition(connection.to));
+
+  // Calculate control points for a smooth curve
+  const path = $derived(() => {
+    const fromX = fromPos.x + 300; // Approximate node width
+    const fromY = fromPos.y + 50;  // Approximate mid-height
+    const toX = toPos.x;
+    const toY = toPos.y + 50;
+
+    const controlOffset = Math.abs(toX - fromX) * 0.5;
+    const cp1x = fromX + controlOffset;
+    const cp1y = fromY;
+    const cp2x = toX - controlOffset;
+    const cp2y = toY;
+
+    return `M ${fromX} ${fromY} C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${toX} ${toY}`;
+  });
+</script>
+
+<path
+  d={path()}
+  fill="none"
+  stroke="var(--brand)"
+  stroke-width="2"
+  stroke-linecap="round"
+  data-tui={tui}
+  data-from={connection.from}
+  data-to={connection.to}
+/>

package/src/lib/components/DisplayNode.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { DisplayNode } from '../types/canvas';
+  import { canvasStore, nodeDataStore, getNodeInputData } from '../stores/canvas';
+  import Box from '../design-dojo/Box.svelte';
+  import Text from '../design-dojo/Text.svelte';
+  import Table from '../design-dojo/Table.svelte';
+  import List from '../design-dojo/List.svelte';
+
+  interface Props {
+    node: DisplayNode;
+    tui?: boolean;
+  }
+
+  let { node, tui = false }: Props = $props();
+
+  // Initialize content from node prop (warning is expected as we need mutable state)
+  let content = $state<any>(node.content || '');
+
+  // Subscribe to node data changes to update content reactively
+  $effect(() => {
+    const canvas = $canvasStore;
+    const nodeData = $nodeDataStore;
+    
+    // Get input data from connected nodes
+    if (node.inputs.length > 0) {
+      const inputData = getNodeInputData(node.id, node.inputs[0].id, canvas.connections, nodeData);
+      if (inputData !== undefined) {
+        content = inputData;
+      }
+    }
+  });
+
+  function formatContent() {
+    if (typeof content === 'object') {
+      return JSON.stringify(content, null, 2);
+    }
+    return String(content);
+  }
+</script>
+
+<Box class="display-node" surface={2} border radius={3} shadow={2} {tui}>
+  <Box class="node-header" surface={3} {tui}>
+    <span class="node-icon">📊</span>
+    <Text class="node-title">{node.label || 'Display'}</Text>
+  </Box>
+  
+  <Box class="node-body" pad={3}>
+    {#if node.displayType === 'text' || node.displayType === 'json'}
+      <Box class="text-display" surface={1} pad={3} radius={2}>
+        <Text mono variant={1} class="display-pre">{formatContent()}</Text>
+      </Box>
+    {:else if node.displayType === 'table'}
+      <div class="table-display">
+        <Table {tui}>
+          {#if Array.isArray(content)}
+            <thead>
+              <tr>
+                {#each Object.keys(content[0] || {}) as key}
+                  <th>{key}</th>
+                {/each}
+              </tr>
+            </thead>
+            <tbody>
+              {#each content as row}
+                <tr>
+                  {#each Object.values(row) as val}
+                    <td>{val}</td>
+                  {/each}
+                </tr>
+              {/each}
+            </tbody>
+          {:else}
+            <tbody>
+              <tr>
+                <td>No table data</td>
+              </tr>
+            </tbody>
+          {/if}
+        </Table>
+      </div>
+    {:else}
+      <Box class="text-display" surface={1} pad={3} radius={2}>
+        <Text mono variant={1} class="display-pre">{formatContent()}</Text>
+      </Box>
+    {/if}
+  </Box>
+  
+  <!-- Input ports -->
+  <div class="ports">
+    {#each node.inputs as port}
+      <div class="port input-port" data-port-id={port.id}>
+        <span class="port-label">{port.name}</span>
+      </div>
+    {/each}
+  </div>
+</Box>
+
+<style>
+  :global(.display-node) {
+    min-width: 300px;
+    max-width: 500px;
+  }
+
+  :global(.display-node .node-header) {
+    padding: var(--space-2) var(--space-3);
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    border-radius: var(--radius-3) var(--radius-3) 0 0;
+  }
+
+  .node-icon {
+    font-size: 18px;
+  }
+
+  :global(.display-node .node-title) {
+    font-weight: 600;
+    font-size: var(--font-size-1);
+  }
+
+  :global(.display-node .node-body) {
+    padding: var(--space-3);
+    max-height: 400px;
+    overflow-y: auto;
+  }
+
+  :global(.display-node .text-display) {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-0);
+  }
+
+  :global(.display-node .display-pre) {
+    display: block;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .table-display {
+    overflow-x: auto;
+  }
+
+  .ports {
+    position: relative;
+  }
+
+  .port {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    background: var(--brand);
+    border: 2px solid var(--surface-2);
+    border-radius: 50%;
+    cursor: crosshair;
+  }
+
+  .input-port {
+    left: -8px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .port-label {
+    display: none;
+  }
+</style>

package/src/lib/components/InputNode.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import type { InputNode } from '../types/canvas';
+  import { updateNodeData } from '../stores/canvas';
+  import Box from '../design-dojo/Box.svelte';
+  import Input from '../design-dojo/Input.svelte';
+  import Toggle from '../design-dojo/Toggle.svelte';
+  import Text from '../design-dojo/Text.svelte';
+
+  interface Props {
+    node: InputNode;
+    tui?: boolean;
+  }
+
+  let { node, tui = false }: Props = $props();
+
+  // Initialize value from node prop (warning is expected as we need mutable state)
+  let value = $state(node.value ?? '');
+
+  function handleValueChange() {
+    // Update the node's output data for reactive flow
+    if (node.outputs.length > 0) {
+      updateNodeData(node.id, node.outputs[0].id, value);
+    }
+  }
+
+  $effect(() => {
+    // Capture value outside untrack to establish it as the only reactive
+    // dependency. node properties are accessed inside untrack to prevent an
+    // infinite update cycle: Praxis deep-clones context on every dispatch,
+    // which creates a new node prop reference each time, which would otherwise
+    // re-trigger this effect indefinitely.
+    const currentValue = value;
+    untrack(() => {
+      if (node.outputs.length > 0) {
+        updateNodeData(node.id, node.outputs[0].id, currentValue);
+      }
+    });
+  });
+</script>
+
+<Box class="input-node" surface={2} border radius={3} shadow={2} {tui}>
+  <Box class="node-header" surface={3} {tui}>
+    <span class="node-icon">📝</span>
+    <Text class="node-title">{node.label || 'Input'}</Text>
+  </Box>
+  
+  <Box class="node-body" pad={3}>
+    {#if node.inputType === 'text'}
+      <Input
+        {tui}
+        type="text"
+        bind:value
+        placeholder="Enter text..."
+      />
+    {:else if node.inputType === 'number'}
+      <Input
+        {tui}
+        type="number"
+        bind:value
+        min={node.min}
+        max={node.max}
+        step={node.step}
+      />
+    {:else if node.inputType === 'checkbox'}
+      <Toggle
+        {tui}
+        bind:checked={value}
+        label={node.label}
+      />
+    {:else if node.inputType === 'slider'}
+      <div class="slider-container">
+        <Input
+          {tui}
+          type="range"
+          bind:value
+          min={node.min ?? 0}
+          max={node.max ?? 100}
+          step={node.step ?? 1}
+        />
+        <Text variant={1} class="slider-value">{value}</Text>
+      </div>
+    {/if}
+  </Box>
+  
+  <!-- Output ports -->
+  <div class="ports">
+    {#each node.outputs as port}
+      <div class="port output-port" data-port-id={port.id}>
+        <span class="port-label">{port.name}</span>
+      </div>
+    {/each}
+  </div>
+</Box>
+
+<style>
+  :global(.input-node) {
+    min-width: 250px;
+  }
+
+  :global(.input-node .node-header) {
+    padding: var(--space-2) var(--space-3);
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    border-radius: var(--radius-3) var(--radius-3) 0 0;
+  }
+
+  .node-icon {
+    font-size: 18px;
+  }
+
+  :global(.input-node .node-title) {
+    font-weight: 600;
+    font-size: var(--font-size-1);
+  }
+
+  :global(.input-node .node-body) {
+    padding: var(--space-3);
+  }
+
+  .slider-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+
+  :global(.input-node .slider-value) {
+    text-align: center;
+    font-weight: 600;
+    color: var(--brand);
+  }
+
+  .ports {
+    position: relative;
+  }
+
+  .port {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    background: var(--brand);
+    border: 2px solid var(--surface-2);
+    border-radius: 50%;
+    cursor: crosshair;
+  }
+
+  .output-port {
+    right: -8px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .port-label {
+    display: none;
+  }
+</style>