pixelweaver 0.1.0

package/src/lib/history/ActionLogPanel.svelte

@@ -0,0 +1,418 @@
+<script lang="ts">
+  /**
+   * ActionLogPanel -- displays the semantic action log history.
+   *
+   * Each entry shows a description, command type, relative timestamp, and
+   * an enable/disable checkbox that skips the action during replay. The
+   * header exposes controls for exporting/importing specs, clearing the
+   * log, and recording macros. Header buttons dispatch registered
+   * commands (export_spec, import_spec, clear_action_log,
+   * record_macro_start, record_macro_stop) via the command runner.
+   */
+
+  import type { CommandType, ParamsOf } from '../core/command-params.js';
+  import { dispatch, onExecute } from '../core/dispatcher.js';
+  import { executeOrDispatch, getCommandForDispatch } from '../core/command-runner.js';
+  import { actionLog } from './action-log.svelte.js';
+  import { macroSystem } from './macros.svelte.js';
+  import { notificationState } from '../ui/notifications/notification-state.svelte.js';
+  import type { SpecDocument } from './spec-format.js';
+  import DownloadIcon from '~icons/lucide/download';
+  import UploadIcon from '~icons/lucide/upload';
+  import TrashIcon from '~icons/lucide/trash-2';
+  import CircleDotIcon from '~icons/lucide/circle-dot';
+  import SquareIcon from '~icons/lucide/square';
+
+  // --- Local reactive tick ---
+  // Incremented by a 1s interval so relative timestamps stay fresh without
+  // requiring reactivity in the underlying action-log state.
+  let nowTick = $state(Date.now());
+
+  // --- Sync action log with dispatcher ---
+  // Initial population plus re-sync on every dispatched command so the
+  // panel reflects the semantic log in real time.
+  $effect(() => {
+    actionLog.syncFromDispatcher();
+    const unsubscribe = onExecute(() => {
+      actionLog.syncFromDispatcher();
+    });
+    const timer = setInterval(() => {
+      nowTick = Date.now();
+    }, 1000);
+    return () => {
+      unsubscribe();
+      clearInterval(timer);
+    };
+  });
+
+  // --- Derived state ---
+
+  const entries = $derived(actionLog.entries);
+
+  // --- Relative time formatter ---
+
+  /**
+   * Format a timestamp relative to the current tick.
+   * Examples: "just now", "5s ago", "2m ago", "1h ago", "3d ago".
+   */
+  function formatRelative(ts: number): string {
+    const diffMs = Math.max(0, nowTick - ts);
+    const s = Math.floor(diffMs / 1000);
+    if (s < 5) return 'just now';
+    if (s < 60) return `${String(s)}s ago`;
+    const m = Math.floor(s / 60);
+    if (m < 60) return `${String(m)}m ago`;
+    const h = Math.floor(m / 60);
+    if (h < 24) return `${String(h)}h ago`;
+    const d = Math.floor(h / 24);
+    return `${String(d)}d ago`;
+  }
+
+  // --- Command dispatch helper ---
+
+  // Typed overload: compile-time param validation for known commands
+  function dispatchCmd<T extends CommandType>(type: T, params: ParamsOf<T>): void;
+  // String fallback: for dynamic dispatch where command type is a variable
+  function dispatchCmd(type: string, params?: Record<string, unknown>): void;
+  function dispatchCmd(type: string, params: Record<string, unknown> = {}) {
+    dispatch({
+      type,
+      plugin: 'ui/history',
+      version: '1.0.0',
+      params,
+      id: crypto.randomUUID(),
+      timestamp: Date.now(),
+    });
+  }
+
+  /**
+   * Invoke a non-undoable command via the command-runner. Looks up the
+   * definition from the registry and routes through executeOrDispatch()
+   * so the command runs directly (non-undoable commands should not enter
+   * the undo stack).
+   */
+  // Typed overload: compile-time param validation for known commands
+  function runCmd<T extends CommandType>(name: T, params?: ParamsOf<T>): void;
+  // String fallback: for dynamic dispatch where command type is a variable
+  function runCmd(name: string, params?: Record<string, unknown>): void;
+  function runCmd(name: string, params: Record<string, unknown> = {}): void {
+    const def = getCommandForDispatch(name);
+    if (!def) {
+      notificationState.push({
+        id: `missing-cmd-${name}`,
+        message: `Command "${name}" is not registered`,
+        type: 'error',
+        autoDismissMs: 4000,
+      });
+      return;
+    }
+    executeOrDispatch(name, def, params);
+  }
+
+  // --- Entry actions ---
+
+  function handleToggle(entryId: string) {
+    // toggle_action is registered by history-commands.ts
+    dispatchCmd('toggle_action', { entryId });
+  }
+
+  // --- Header actions ---
+  // Wired to dispatchable commands registered by history-commands.ts.
+  // Export/import/clear/macro commands are all non-undoable so we invoke
+  // them via executeOrDispatch(); the command bodies handle their own
+  // side-effects (downloads, notifications, dispatched child commands).
+
+  // Hidden file input used for import_spec. Bound via bind:this below.
+  let importFileInput: HTMLInputElement | null = $state(null);
+
+  function handleExportSpec() {
+    runCmd('export_spec');
+  }
+
+  function handleImportSpec() {
+    // Open the hidden <input type="file"> picker. On change, the file
+    // contents are parsed and passed to the import_spec command.
+    importFileInput?.click();
+  }
+
+  async function onImportFileChange(event: Event) {
+    const input = event.currentTarget as HTMLInputElement;
+    const file = input.files?.[0];
+    if (!file) return;
+    try {
+      const text = await file.text();
+      const spec = JSON.parse(text) as SpecDocument;
+      runCmd('import_spec', { spec });
+    } catch (err) {
+      notificationState.push({
+        id: 'import-spec-parse-error',
+        message: `Import spec: failed to parse file (${(err as Error).message})`,
+        type: 'error',
+        autoDismissMs: 5000,
+      });
+    } finally {
+      // Reset so the same file can be re-selected to trigger another import.
+      input.value = '';
+    }
+  }
+
+  function handleClearLog() {
+    runCmd('clear_action_log');
+  }
+
+  function handleRecordMacro() {
+    // Toggle between start and stop based on current recording state.
+    if (macroSystem.recording) {
+      runCmd('record_macro_stop', {});
+    } else {
+      runCmd('record_macro_start');
+    }
+  }
+</script>
+
+<div class="action-log-panel">
+  <!-- Hidden file input for import_spec picker -->
+  <input
+    bind:this={importFileInput}
+    type="file"
+    accept="application/json,.json"
+    style="display: none;"
+    onchange={onImportFileChange}
+  />
+  <!-- Header -->
+  <div class="log-header">
+    <span class="log-title">History</span>
+    <div class="log-actions">
+      <button
+        class="action-btn"
+        title="Export spec"
+        aria-label="Export spec"
+        onclick={handleExportSpec}
+      ><DownloadIcon /></button>
+      <button
+        class="action-btn"
+        title="Import spec"
+        aria-label="Import spec"
+        onclick={handleImportSpec}
+      ><UploadIcon /></button>
+      <button
+        class="action-btn"
+        class:action-btn--recording={macroSystem.recording}
+        title={macroSystem.recording ? 'Stop recording macro' : 'Record macro'}
+        aria-label={macroSystem.recording ? 'Stop recording macro' : 'Record macro'}
+        onclick={handleRecordMacro}
+      >{#if macroSystem.recording}<SquareIcon />{:else}<CircleDotIcon />{/if}</button>
+      <button
+        class="action-btn"
+        title="Clear log"
+        aria-label="Clear log"
+        onclick={handleClearLog}
+        disabled={entries.length === 0}
+      ><TrashIcon /></button>
+    </div>
+  </div>
+
+  <!-- Entry list -->
+  <div class="log-list">
+    {#if entries.length === 0}
+      <div class="empty-state">
+        <span class="empty-title">No actions yet</span>
+        <span class="empty-hint">Draw or edit to build history</span>
+      </div>
+    {:else}
+      {#each entries as entry (entry.commandId)}
+        <div
+          class="log-row"
+          class:log-row--disabled={!entry.enabled}
+        >
+          <input
+            class="enable-checkbox"
+            type="checkbox"
+            checked={entry.enabled}
+            title={entry.enabled ? 'Disable action' : 'Enable action'}
+            aria-label={entry.enabled ? `Disable action ${entry.description}` : `Enable action ${entry.description}`}
+            onchange={() => { handleToggle(entry.commandId); }}
+          />
+          <div class="log-entry-body">
+            <span class="log-description">{entry.description}</span>
+            <div class="log-meta">
+              <span class="log-type">{entry.type}</span>
+              <span class="log-timestamp">{formatRelative(entry.timestamp)}</span>
+            </div>
+          </div>
+        </div>
+      {/each}
+    {/if}
+  </div>
+</div>
+
+<style>
+  .action-log-panel {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background: var(--bg-panel);
+    color: var(--text-primary);
+    font-size: var(--text-base);
+    user-select: none;
+  }
+
+  .log-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px var(--space-3);
+    border-bottom: 1px solid var(--border);
+    background: var(--bg-toolbar);
+    flex-shrink: 0;
+  }
+
+  .log-title {
+    font-weight: 600;
+    font-size: var(--text-sm);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-secondary);
+  }
+
+  .log-actions {
+    display: flex;
+    gap: var(--space-1);
+  }
+
+  .action-btn {
+    background: none;
+    border: 1px solid transparent;
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--text-xl);
+    padding: 0;
+    line-height: 1;
+  }
+
+  .action-btn:hover:not(:disabled) {
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    border-color: var(--border);
+  }
+
+  .action-btn:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+
+  /* Highlight the record button while a macro recording is in progress */
+  .action-btn--recording {
+    color: var(--accent);
+    border-color: var(--accent);
+  }
+
+  .action-btn :global(svg) {
+    width: 14px;
+    height: 14px;
+  }
+
+  /* List container -- scrollable */
+  .log-list {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  /* Empty state */
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-1);
+    padding: var(--space-4);
+    color: var(--text-secondary);
+    text-align: center;
+  }
+
+  .empty-title {
+    font-size: var(--text-sm);
+    font-weight: 600;
+  }
+
+  .empty-hint {
+    font-size: var(--text-xs);
+    opacity: 0.7;
+  }
+
+  /* Individual entry row */
+  .log-row {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-2);
+    padding: 6px var(--space-3);
+    border-bottom: 1px solid transparent;
+    transition: background var(--transition-fast);
+  }
+
+  .log-row:hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+
+  :global([data-theme="light"]) .log-row:hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+
+  .log-row--disabled {
+    opacity: 0.5;
+  }
+
+  .enable-checkbox {
+    margin-top: 2px;
+    accent-color: var(--accent);
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+
+  .log-entry-body {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .log-description {
+    font-size: var(--text-base);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .log-row--disabled .log-description {
+    text-decoration: line-through;
+  }
+
+  .log-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-size: var(--text-xs);
+    color: var(--text-secondary);
+  }
+
+  .log-type {
+    font-family: var(--font-mono, monospace);
+    padding: 1px var(--space-1);
+    background: var(--bg-primary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+  }
+
+  .log-timestamp {
+    opacity: 0.8;
+  }
+</style>

package/src/lib/history/action-log-panel-plugin.ts

@@ -0,0 +1,24 @@
+/**
+ * Action Log Panel Plugin -- registers the ActionLogPanel as a dockable
+ * panel so the semantic history can be viewed and manipulated from the UI.
+ */
+
+import type { PluginModule } from '../core/plugin-loader.js';
+import ActionLogPanel from './ActionLogPanel.svelte';
+
+export const actionLogPanelPlugin: PluginModule = {
+  name: 'ui/history',
+  version: '1.0.0',
+  description: 'Semantic action log panel',
+  dependencies: [],
+
+  register(api) {
+    api.addPanel('history', {
+      title: 'History',
+      component: ActionLogPanel,
+      position: 'right',
+      minWidth: 200,
+      maxWidth: 360,
+    });
+  },
+};

package/src/lib/history/action-log.svelte.ts

@@ -0,0 +1,172 @@
+/**
+ * Action Log State -- reactive state for the history/action log panel.
+ *
+ * Maintains a list of ActionLogEntries synced from the dispatcher's semantic
+ * log. Entries can be toggled (disabled/enabled), deleted, filtered, and
+ * selected. The action log is the user-facing representation of the command
+ * history that powers the semantic replay system.
+ *
+ * Module-level singleton using Svelte 5 $state runes.
+ */
+
+import { getSemanticLog, getUndoStack } from '../core/dispatcher.js';
+
+// --- Types ---
+
+export interface ActionLogEntry {
+  commandId: string;
+  type: string;         // command type, e.g. "draw_pixel"
+  plugin: string;       // plugin that registered the command
+  description: string;  // human-readable description from describe()
+  timestamp: number;
+  enabled: boolean;     // can be disabled (skipped during replay) without removing
+  params: Record<string, unknown>;
+}
+
+// --- Reactive state ---
+
+let entries = $state<ActionLogEntry[]>([]);
+let selectedEntryId = $state<string | null>(null);
+let filterQuery = $state<string>('');
+
+// --- Derived ---
+
+/**
+ * Entries filtered by the current query string.
+ * Matches against description and command type (case-insensitive).
+ */
+const filteredEntries = $derived.by(() => {
+  if (!filterQuery.trim()) return entries;
+  const q = filterQuery.toLowerCase();
+  return entries.filter(
+    (e) =>
+      e.description.toLowerCase().includes(q) ||
+      e.type.toLowerCase().includes(q) ||
+      e.plugin.toLowerCase().includes(q),
+  );
+});
+
+// --- Operations ---
+
+/** Select an entry by its commandId. */
+function selectEntry(id: string): void {
+  selectedEntryId = id;
+}
+
+/** Toggle an entry's enabled state (for replay skipping). */
+function toggleEntry(id: string): void {
+  const entry = entries.find((e) => e.commandId === id);
+  if (entry) {
+    entry.enabled = !entry.enabled;
+  }
+}
+
+/** Remove an entry from the action log entirely. */
+function deleteEntry(id: string): void {
+  const idx = entries.findIndex((e) => e.commandId === id);
+  if (idx !== -1) {
+    entries.splice(idx, 1);
+  }
+  if (selectedEntryId === id) {
+    selectedEntryId = null;
+  }
+}
+
+/** Look up a single entry by commandId. */
+function getEntry(id: string): ActionLogEntry | undefined {
+  return entries.find((e) => e.commandId === id);
+}
+
+/**
+ * Rebuild the action log from the dispatcher's semantic log and undo stack.
+ * The semantic log provides descriptions/timestamps/ids; the undo stack
+ * provides the full Command objects with type, plugin, and params.
+ */
+function syncFromDispatcher(): void {
+  const log = getSemanticLog();
+  const stack = getUndoStack();
+
+  // Build a lookup from commandId -> UndoEntry for quick access
+  const undoMap = new Map(stack.map((e) => [e.command.id, e]));
+
+  // Preserve existing enabled states across sync
+  const enabledMap = new Map(entries.map((e) => [e.commandId, e.enabled]));
+
+  const synced: ActionLogEntry[] = [];
+  for (const logEntry of log) {
+    const undoEntry = undoMap.get(logEntry.commandId);
+    if (!undoEntry) continue; // entry was dropped from undo stack (size limit)
+
+    synced.push({
+      commandId: logEntry.commandId,
+      type: undoEntry.command.type,
+      plugin: undoEntry.command.plugin,
+      description: logEntry.description,
+      timestamp: logEntry.timestamp,
+      enabled: enabledMap.get(logEntry.commandId) ?? true,
+      // Clone params to avoid shared mutation with the command system
+      params: { ...undoEntry.command.params },
+    });
+  }
+
+  entries = synced;
+}
+
+/** Set the filter query string. */
+function setFilterQuery(query: string): void {
+  filterQuery = query;
+}
+
+/** Get a snapshot of all entries (for replay engine, macros, etc.). */
+function getEntries(): ActionLogEntry[] {
+  return entries;
+}
+
+/** Replace the entire entries array (used by replay/reorder operations). */
+function setEntries(newEntries: ActionLogEntry[]): void {
+  entries = newEntries;
+}
+
+/**
+ * Clear all entries and reset selection state.
+ * Note: this only clears the local action-log view. The dispatcher's
+ * semantic log and undo stack are left intact, so the next call to
+ * syncFromDispatcher() (triggered by any new command dispatch) will
+ * rebuild the entries from the underlying log. This matches the
+ * behavior of deleteEntry().
+ */
+function clearAll(): void {
+  entries = [];
+  selectedEntryId = null;
+}
+
+/** Get the currently selected entry ID. */
+function getSelectedEntryId(): string | null {
+  return selectedEntryId;
+}
+
+/** Get the filtered entries. */
+function getFilteredEntries(): ActionLogEntry[] {
+  return filteredEntries;
+}
+
+// --- Public API ---
+
+export const actionLog = {
+  get entries() { return entries; },
+  get selectedEntryId() { return selectedEntryId; },
+  get filterQuery() { return filterQuery; },
+  get filteredEntries() { return filteredEntries; },
+
+  selectEntry,
+  toggleEntry,
+  deleteEntry,
+  getEntry,
+  getEntries,
+  setEntries,
+  clearAll,
+  syncFromDispatcher,
+  setFilterQuery,
+  getSelectedEntryId,
+  getFilteredEntries,
+};