npm - @auto-engineer/cli - Versions diffs - 0.9.7 → 0.9.8 - Mend

@auto-engineer/cli 0.9.7 → 0.9.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/CHANGELOG.md +10 -0
package/dist/src/dsl/index.d.ts +5 -1
package/dist/src/dsl/index.d.ts.map +1 -1
package/dist/src/dsl/index.js +6 -0
package/dist/src/dsl/index.js.map +1 -1
package/dist/src/dsl/types.d.ts +6 -0
package/dist/src/dsl/types.d.ts.map +1 -1
package/dist/src/dsl-exports.d.ts +2 -2
package/dist/src/dsl-exports.d.ts.map +1 -1
package/dist/src/dsl-exports.js +1 -1
package/dist/src/dsl-exports.js.map +1 -1
package/dist/src/index.d.ts +1 -1
package/dist/src/index.d.ts.map +1 -1
package/dist/src/index.js +8 -8
package/dist/src/index.js.map +1 -1
package/dist/src/plugin-loader.d.ts +1 -0
package/dist/src/plugin-loader.d.ts.map +1 -1
package/dist/src/plugin-loader.js.map +1 -1
package/dist/src/server/config-loader.d.ts +2 -17
package/dist/src/server/config-loader.d.ts.map +1 -1
package/dist/src/server/config-loader.js +16 -72
package/dist/src/server/config-loader.js.map +1 -1
package/dist/src/server/file-syncer/discovery/dts.js +1 -1
package/dist/src/server/file-syncer/index.js +3 -3
package/dist/src/server/file-syncer/sync/resolveSyncFileSet.js +3 -3
package/dist/src/server/http-routes.d.ts.map +1 -1
package/dist/src/server/http-routes.js +2 -6
package/dist/src/server/http-routes.js.map +1 -1
package/dist/src/server/server.js +6 -6
package/dist/src/utils/analytics.js +1 -1
package/dist/src/utils/config.js +1 -1
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +5 -5
package/dist/src/server/canvas-landing.html +0 -291
package/dist/src/server/dashboard.html +0 -1774

package/dist/src/server/dashboard.html DELETED Viewed

@@ -1,1774 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Auto Engineer</title>
-    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg width='637' height='637' viewBox='0 0 637 637' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1042_512)'%3E%3Crect width='637' height='637'/%3E%3Cpath d='M693.161 -427.743L-623.632 1532.31L-591.107 1552.06L725.686 -407.988L693.161 -427.743Z' fill='%23EC3F4A'/%3E%3Cpath d='M725.695 -407.962L-591.097 1552.09L-571.511 1563.98L745.281 -396.066L725.695 -407.962Z' fill='%231A1A1A'/%3E%3Cpath d='M745.281 -396.071L-571.511 1563.98L-538.986 1583.73L777.807 -376.315L745.281 -396.071Z' fill='%23FF8A1D'/%3E%3Cpath d='M777.815 -376.302L-538.978 1583.75L-519.391 1595.64L797.402 -364.406L777.815 -376.302Z' fill='%231A1A1A'/%3E%3Cpath d='M797.394 -364.425L-519.399 1595.62L-486.874 1615.38L829.919 -344.67L797.394 -364.425Z' fill='%235EC72D'/%3E%3Cpath d='M829.913 -344.684L-486.879 1615.37L-467.293 1627.26L849.499 -332.787L829.913 -344.684Z' fill='%231A1A1A'/%3E%3Cpath d='M849.467 -332.791L-467.326 1627.26L-434.801 1647.01L881.992 -313.035L849.467 -332.791Z' fill='%2342C3F7'/%3E%3Cpath d='M882 -313.038L-434.792 1647.01L-415.206 1658.91L901.587 -301.142L882 -313.038Z' fill='%231A1A1A'/%3E%3Cpath d='M673.55 -439.635L-643.242 1520.42L-623.656 1532.31L693.136 -427.738L673.55 -439.635Z' fill='%231A1A1A'/%3E%3Cpath d='M512.644 100H121.718C109.652 100 100 109.667 100 121.751V513.277C100 525.361 109.652 535.028 121.718 535.028H512.644C524.71 535.028 534.362 525.361 534.362 513.277V121.751C534.362 109.667 524.71 100 512.644 100Z' fill='white'/%3E%3Cpath d='M413.706 481.86C451.11 481.86 481.274 451.649 481.274 414.189C481.274 376.728 451.11 346.518 413.706 346.518C376.303 346.518 346.139 376.728 346.139 414.189C346.139 451.649 376.303 481.86 413.706 481.86Z' fill='%231A1A1A'/%3E%3Cpath d='M153.089 347.968C153.089 347.243 153.813 346.518 154.537 346.518H287.017C287.741 346.518 288.465 347.243 288.465 347.968V412.98C288.465 413.705 287.741 414.43 287.017 414.43H257.095C256.371 414.43 255.647 415.155 255.647 415.88V480.893C255.647 481.618 254.923 482.343 254.199 482.343H188.321C187.597 482.343 186.873 481.618 186.873 480.893V415.88C186.873 415.155 186.149 414.43 185.425 414.43H154.296C153.572 414.43 152.848 413.705 152.848 412.98V347.968H153.089Z' fill='%231A1A1A'/%3E%3Cpath d='M347.587 153.17C346.863 153.17 346.139 153.895 346.139 154.621V223.017C346.139 259.269 376.303 288.513 413.706 288.513C451.11 288.513 481.274 259.269 481.274 223.017V154.621C481.274 153.895 480.55 153.17 479.826 153.17H347.345H347.587Z' fill='%231A1A1A'/%3E%3Cpath d='M153.33 286.339C152.848 287.306 153.33 288.272 154.537 288.272H286.776C287.742 288.272 288.465 287.306 287.983 286.339L221.863 154.139C221.381 153.172 219.933 153.172 219.45 154.139L153.33 286.339Z' fill='%231A1A1A'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1042_512'%3E%3Crect width='637' height='637' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E" />
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        :root {
-            /* Auto Brand Colors */
-            --brand-red: #ec3f4a;
-            --brand-orange: #ff8a1d;
-            --brand-green: #5ec72d;
-            --brand-blue: #42c3f7;
-            --brand-primary: #0057dd;
-        }
-        /* Dark theme (default) */
-        [data-theme="dark"] {
-            --bg-primary: #1a1a1a;
-            --bg-secondary: #18181b;
-            --bg-tertiary: #27272a;
-            --bg-hover: #333337;
-            --border: #3a3a3d;
-            --border-light: #4a4a4d;
-            --text-primary: #ffffff;
-            --text-secondary: #a1a1aa;
-            --text-tertiary: #71717a;
-            --accent: #0057dd;
-            --accent-hover: #0046b5;
-            --success: #5ec72d;
-            --error: #ec3f4a;
-            --warning: #ff8a1d;
-            --code-bg: #0d0e11;
-        }
-        /* Light theme */
-        [data-theme="light"] {
-            --bg-primary: #fafafa;
-            --bg-secondary: #ffffff;
-            --bg-tertiary: #f4f4f5;
-            --bg-hover: #e4e4e7;
-            --border: #e4e4e7;
-            --border-light: #d4d4d8;
-            --text-primary: #18181b;
-            --text-secondary: #52525b;
-            --text-tertiary: #71717a;
-            --accent: #0057dd;
-            --accent-hover: #0046b5;
-            --success: #5ec72d;
-            --error: #ec3f4a;
-            --warning: #ff8a1d;
-            --code-bg: #f4f4f5;
-        }
-        body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            min-height: 100vh;
-            font-size: 14px;
-            line-height: 1.6;
-            -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale;
-            transition: background-color 0.3s ease, color 0.3s ease;
-        }
-        /* Header */
-        .header {
-            background: var(--bg-secondary);
-            border-bottom: 1px solid var(--border);
-            padding: 0 24px;
-            height: 56px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            position: relative;
-            transition: background-color 0.3s ease;
-        }
-        .header-logo {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-        }
-        .logo-mark {
-            width: 40px;
-            height: 40px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        .logo-mark svg {
-            width: 40px;
-            height: 40px;
-        }
-        .logo-text {
-            font-size: 18px;
-            font-weight: 600;
-            color: var(--text-primary);
-            letter-spacing: -0.02em;
-        }
-        .header-controls {
-            display: flex;
-            align-items: center;
-            gap: 24px;
-        }
-        /* Theme switcher dropdown */
-        .theme-switcher {
-            position: relative;
-        }
-        .theme-toggle {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 36px;
-            height: 36px;
-            background: var(--bg-tertiary);
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            padding: 0;
-            color: var(--text-secondary);
-        }
-        .theme-toggle:hover {
-            background: var(--bg-hover);
-            border-color: var(--border-light);
-        }
-        .theme-toggle:focus {
-            outline: none;
-            border-color: var(--accent);
-            box-shadow: 0 0 0 3px rgba(0, 87, 221, 0.1);
-        }
-        .theme-dropdown {
-            position: absolute;
-            top: calc(100% + 4px);
-            right: 0;
-            background: var(--bg-secondary);
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            padding: 4px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-            opacity: 0;
-            visibility: hidden;
-            transform: translateY(-4px);
-            transition: all 0.15s ease;
-            z-index: 1000;
-            min-width: 140px;
-        }
-        .theme-dropdown.open {
-            opacity: 1;
-            visibility: visible;
-            transform: translateY(0);
-        }
-        .theme-option {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            padding: 8px 12px;
-            border: none;
-            background: transparent;
-            color: var(--text-primary) !important;
-            font-size: 12px;
-            font-weight: 500;
-            cursor: pointer;
-            border-radius: 6px;
-            transition: all 0.15s ease;
-            width: 100%;
-            text-align: left;
-        }
-        .theme-option:hover {
-            background: var(--bg-tertiary);
-            color: var(--text-primary) !important;
-        }
-        .theme-option.active {
-            background: var(--bg-tertiary);
-            color: var(--text-primary) !important;
-        }
-        .theme-icon {
-            width: 16px;
-            height: 16px;
-            flex-shrink: 0;
-            color: var(--text-secondary);
-        }
-        /* Main layout - split into top and bottom sections */
-        .app-layout {
-            display: flex;
-            flex-direction: column;
-            height: calc(100vh - 56px);
-        }
-        /* Top section - Command interface (low profile) */
-        .command-section {
-            background: var(--bg-secondary);
-            padding: 16px 24px;
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-            min-height: 60px;
-        }
-        /* Command controls row */
-        .command-controls {
-            display: flex;
-            gap: 12px;
-            align-items: center;
-        }
-        .command-dropdown {
-            position: relative;
-            min-width: 320px;
-        }
-        .command-trigger {
-            width: 100%;
-            padding: 8px 36px 8px 12px;
-            background: var(--bg-tertiary);
-            border: 1px solid var(--border);
-            border-radius: 6px;
-            color: var(--text-primary);
-            font-size: 13px;
-            font-weight: 500;
-            cursor: pointer;
-            transition: all 0.15s ease;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            min-height: 36px;
-        }
-        .command-trigger:hover {
-            background: var(--bg-hover);
-            border-color: var(--border-light);
-        }
-        .command-trigger.open {
-            border-color: var(--accent);
-            box-shadow: 0 0 0 2px rgba(0, 87, 221, 0.1);
-        }
-        .command-trigger-text {
-            color: var(--text-secondary);
-        }
-        .command-trigger.selected .command-trigger-text {
-            color: var(--text-primary);
-            font-weight: 600;
-        }
-        .command-dropdown-icon {
-            color: var(--text-tertiary);
-            font-size: 10px;
-            transition: transform 0.15s ease;
-        }
-        .command-trigger.open .command-dropdown-icon {
-            transform: rotate(180deg);
-        }
-        .command-options {
-            position: absolute;
-            top: calc(100% + 4px);
-            left: 0;
-            right: 0;
-            background: var(--bg-secondary);
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-            opacity: 0;
-            visibility: hidden;
-            transform: translateY(-4px);
-            transition: all 0.15s ease;
-            z-index: 1000;
-            max-height: 300px;
-            overflow-y: auto;
-            padding: 4px;
-        }
-        .command-options.open {
-            opacity: 1;
-            visibility: visible;
-            transform: translateY(0);
-        }
-        .command-option {
-            display: flex;
-            flex-direction: column;
-            padding: 12px 12px 12px 20px;
-            margin: 2px 0;
-            background: transparent;
-            border: none;
-            border-radius: 6px;
-            cursor: pointer;
-            transition: all 0.15s ease;
-            width: 100%;
-            text-align: left;
-            gap: 2px;
-            position: relative;
-        }
-        .command-option::before {
-            content: '';
-            position: absolute;
-            left: 4px;
-            top: 50%;
-            transform: translateY(-50%);
-            width: 6px;
-            height: 6px;
-            background: #42c3f7;
-            border-radius: 2px;
-        }
-        .command-option:hover {
-            background: var(--bg-hover);
-        }
-        .command-option.selected {
-            background: var(--bg-tertiary);
-        }
-        .command-option-name {
-            font-size: 13px;
-            font-weight: 600;
-            color: var(--text-primary);
-            font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
-        }
-        .command-option-org {
-            font-size: 11px;
-            color: var(--text-secondary);
-            font-weight: 500;
-        }
-        .command-option-package {
-            font-size: 11px;
-            color: var(--text-tertiary);
-            font-weight: 400;
-        }
-        .request-id-input {
-            padding: 8px 12px;
-            background: var(--bg-tertiary);
-            border: 1px solid var(--border);
-            border-radius: 6px;
-            color: var(--text-primary);
-            font-size: 12px;
-            width: 200px;
-            height: 36px;
-            box-sizing: border-box;
-            transition: all 0.15s ease;
-        }
-        .request-id-input:focus {
-            outline: none;
-            border-color: var(--accent);
-            background: var(--bg-secondary);
-            box-shadow: 0 0 0 2px rgba(0, 87, 221, 0.1);
-        }
-        .send-button {
-            padding: 8px 20px;
-            background: var(--accent);
-            color: white;
-            border: none;
-            border-radius: 6px;
-            font-size: 12px;
-            font-weight: 600;
-            cursor: pointer;
-            height: 36px;
-            box-sizing: border-box;
-            transition: all 0.15s ease;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-        }
-        .send-button:hover:not(:disabled) {
-            background: var(--accent-hover);
-            transform: translateY(-1px);
-            box-shadow: 0 2px 8px rgba(0, 87, 221, 0.3);
-        }
-        .send-button:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-        .response-status {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            font-size: 11px;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-        }
-        .status-dot {
-            width: 6px;
-            height: 6px;
-            border-radius: 50%;
-            background: var(--text-tertiary);
-        }
-        .status-dot.success {
-            background: var(--success);
-            box-shadow: 0 0 6px rgba(94, 199, 45, 0.5);
-        }
-        .status-dot.error {
-            background: var(--error);
-            box-shadow: 0 0 6px rgba(236, 63, 74, 0.5);
-        }
-        .request-body {
-            flex: 1;
-            height: 36px;
-            min-height: 36px;
-            max-height: 120px;
-            padding: 8px 12px;
-            background: var(--bg-tertiary);
-            border: 1px solid var(--border);
-            border-radius: 6px;
-            color: var(--text-primary);
-            font-size: 12px;
-            font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
-            resize: vertical;
-            box-sizing: border-box;
-            transition: all 0.15s ease;
-        }
-        .request-body:focus {
-            outline: none;
-            border-color: var(--accent);
-            background: var(--bg-secondary);
-            box-shadow: 0 0 0 2px rgba(0, 87, 221, 0.1);
-        }
-        /* Bottom section - Messages list */
-        .messages-section {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-            margin-top: 24px;
-            border-top: 2px solid var(--border);
-        }
-        .messages-header {
-            padding: 18px 24px;
-            background: var(--bg-primary);
-            border-bottom: 1px solid var(--border);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .messages-title {
-            font-size: 14px;
-            font-weight: 700;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            color: var(--text-primary);
-            display: flex;
-            align-items: center;
-            gap: 12px;
-        }
-        .messages-title span:last-child {
-            background: var(--accent);
-            color: var(--bg-primary);
-            padding: 4px 10px;
-            border-radius: 16px;
-            font-size: 11px;
-            font-weight: 600;
-            text-transform: none;
-            letter-spacing: normal;
-        }
-        .messages-controls {
-            display: flex;
-            gap: 8px;
-        }
-        .button-small {
-            padding: 6px 12px;
-            background: var(--bg-secondary);
-            border: 1px solid var(--border);
-            border-radius: 4px;
-            font-size: 11px;
-            font-weight: 500;
-            color: var(--text-primary);
-            cursor: pointer;
-            transition: all 0.15s ease;
-        }
-        .button-small:hover {
-            background: var(--bg-hover);
-            border-color: var(--border-light);
-        }
-        /* Message filters */
-        .message-filters {
-            padding: 16px 24px;
-            background: var(--bg-tertiary);
-            border-bottom: 2px solid var(--border);
-            display: flex;
-            gap: 16px;
-            flex-wrap: wrap;
-            align-items: center;
-        }
-        .filter-control {
-            padding: 6px 8px;
-            border: 1px solid var(--border);
-            border-radius: 4px;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            font-size: 11px;
-            min-width: 120px;
-        }
-        .filter-stats {
-            font-size: 10px;
-            color: var(--text-tertiary);
-            margin-left: auto;
-        }
-        /* Messages list */
-        .messages-list {
-            flex: 1;
-            overflow-y: auto;
-            display: flex;
-            flex-direction: column;
-        }
-        .messages-table {
-            width: 100%;
-            border-collapse: separate;
-            border-spacing: 0;
-            font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
-            font-size: 11px;
-            table-layout: fixed;
-            min-width: 800px;
-        }
-        .messages-header-row {
-            background: var(--bg-tertiary);
-            border-bottom: 2px solid var(--border);
-            position: sticky;
-            top: 0;
-            z-index: 10;
-        }
-        .messages-header-cell {
-            padding: 8px 6px;
-            text-align: left;
-            font-weight: 600;
-            font-size: 10px;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            color: var(--text-secondary);
-            border-right: 1px solid var(--border);
-            position: relative;
-            user-select: none;
-            box-sizing: border-box;
-            overflow: hidden;
-        }
-        .messages-header-cell:last-child {
-            border-right: none;
-        }
-        .message-details-row {
-            background: var(--code-bg);
-        }
-        .message-details {
-            padding: 16px;
-            background: var(--code-bg);
-            border-top: 1px solid var(--border);
-            font-family: 'SF Mono', 'Monaco', monospace;
-        }
-        .message-data {
-            background: var(--bg-primary);
-            border: 1px solid var(--border);
-            border-radius: 4px;
-            padding: 12px;
-            font-size: 11px;
-            line-height: 1.4;
-            color: var(--text-primary);
-            max-height: 300px;
-            overflow-y: auto;
-            white-space: pre-wrap;
-            word-break: break-word;
-            position: relative;
-        }
-        .copy-message-btn {
-            position: absolute;
-            top: 8px;
-            right: 8px;
-            padding: 4px 8px;
-            background: var(--bg-secondary);
-            border: 1px solid var(--border);
-            border-radius: 4px;
-            font-size: 10px;
-            color: var(--text-secondary);
-            cursor: pointer;
-            transition: all 0.15s ease;
-        }
-        .copy-message-btn:hover {
-            background: var(--bg-hover);
-            color: var(--text-primary);
-        }
-        .message-row {
-            background: var(--bg-secondary);
-            border-bottom: 1px solid var(--border);
-            transition: background-color 0.15s ease;
-        }
-        .message-row:hover {
-            background: var(--bg-hover);
-        }
-        .message-row.expanded {
-            background: var(--bg-tertiary);
-        }
-        .message-cell {
-            padding: 4px 6px;
-            border-right: 1px solid var(--border);
-            vertical-align: top;
-            font-size: 11px;
-            box-sizing: border-box;
-            overflow: hidden;
-            word-wrap: break-word;
-            line-height: 1.3;
-        }
-        .message-cell:last-child {
-            border-right: none;
-        }
-        .expand-cell {
-            width: 30px;
-            text-align: center;
-            cursor: pointer;
-            user-select: none;
-        }
-        .expand-btn {
-            width: 16px;
-            height: 16px;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            background: var(--bg-primary);
-            border: 1px solid var(--border);
-            border-radius: 3px;
-            font-size: 9px;
-            font-weight: 600;
-            color: var(--text-secondary);
-            transition: all 0.15s ease;
-        }
-        .expand-btn:hover {
-            background: var(--bg-hover);
-            color: var(--text-primary);
-        }
-        .type-cell {
-            width: 80px;
-            text-align: center;
-        }
-        .message-type {
-            font-size: 9px;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            padding: 2px 6px;
-            border-radius: 3px;
-            display: inline-block;
-            min-width: 60px;
-            text-align: center;
-        }
-        .message-type.command {
-            color: #42c3f7;
-            background: rgba(66, 195, 247, 0.1);
-        }
-        .message-type.event {
-            color: #ff8a1d;
-            background: rgba(255, 138, 29, 0.1);
-        }
-        .name-cell {
-            min-width: 120px;
-            max-width: 150px;
-        }
-        .message-name {
-            font-weight: 600;
-            color: var(--text-primary);
-        }
-        .id-cell {
-            width: 100px;
-            font-size: 10px;
-            color: var(--text-tertiary);
-        }
-        .position-cell {
-            width: 60px;
-            text-align: center;
-            font-size: 10px;
-            color: var(--text-secondary);
-        }
-        .time-cell {
-            width: 80px;
-            text-align: right;
-            font-size: 10px;
-            color: var(--text-tertiary);
-        }
-        .message-type-icon {
-            width: 12px;
-            height: 12px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 8px;
-            flex-shrink: 0;
-        }
-        .message-type {
-            min-width: 50px;
-            font-size: 10px;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            flex-shrink: 0;
-        }
-        .message-type.command {
-            color: #42c3f7;
-        }
-        .message-type.event {
-            color: #ff8a1d;
-        }
-        .message-name {
-            min-width: 120px;
-            font-weight: 500;
-            color: var(--text-primary);
-            flex-shrink: 0;
-        }
-        .message-meta {
-            display: flex;
-            gap: 12px;
-            align-items: center;
-            font-size: 10px;
-            color: var(--text-tertiary);
-            flex: 1;
-        }
-        .message-timestamp {
-            font-size: 10px;
-            color: var(--text-tertiary);
-            min-width: 80px;
-            text-align: right;
-            flex-shrink: 0;
-        }
-        .message-details {
-            display: none;
-            padding: 16px;
-            background: var(--code-bg);
-            border-top: 1px solid var(--border);
-        }
-        .message-item.expanded .message-details {
-            display: block;
-        }
-        .message-ids {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 12px;
-            margin-bottom: 12px;
-            font-size: 10px;
-            color: var(--text-tertiary);
-            font-family: 'SF Mono', 'Monaco', monospace;
-        }
-        .message-id {
-            display: flex;
-            flex-direction: column;
-            gap: 2px;
-        }
-        .message-id-label {
-            color: var(--text-secondary);
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-        }
-        .message-data {
-            background: var(--bg-primary);
-            border: 1px solid var(--border);
-            border-radius: 4px;
-            padding: 12px;
-            font-family: 'SF Mono', 'Monaco', monospace;
-            font-size: 11px;
-            line-height: 1.4;
-            color: var(--text-primary);
-            max-height: 300px;
-            overflow-y: auto;
-            white-space: pre-wrap;
-            word-break: break-word;
-        }
-        .empty {
-            padding: 32px;
-            text-align: center;
-            color: var(--text-tertiary);
-            font-size: 12px;
-        }
-        /* Scrollbar styling */
-        ::-webkit-scrollbar {
-            width: 8px;
-            height: 8px;
-        }
-        ::-webkit-scrollbar-track {
-            background: var(--bg-secondary);
-        }
-        ::-webkit-scrollbar-thumb {
-            background: var(--border-light);
-            border-radius: 4px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-            background: var(--text-tertiary);
-        }
-    </style>
-</head>
-<body data-theme="dark">
-    <div class="header">
-        <div class="header-logo">
-            <div class="logo-mark" id="logoMark">
-            </div>
-            <div>
-                <span class="logo-text">auto engineer</span>
-            </div>
-        </div>
-        <div class="header-controls">
-            <div class="theme-switcher">
-                <button class="theme-toggle" id="themeToggle" onclick="toggleThemeDropdown()">
-                    <svg class="theme-icon" id="currentThemeIcon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <!-- Icon will be set based on current theme -->
-                    </svg>
-                </button>
-                <div class="theme-dropdown" id="themeDropdown">
-                    <button class="theme-option" onclick="setTheme('light')">
-                        <svg class="theme-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-                        </svg>
-                        <span>Light</span>
-                    </button>
-                    <button class="theme-option" onclick="setTheme('dark')">
-                        <svg class="theme-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-                        </svg>
-                        <span>Dark</span>
-                    </button>
-                    <button class="theme-option" onclick="setTheme('system')">
-                        <svg class="theme-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                        </svg>
-                        <span>System</span>
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="app-layout">
-        <!-- Top section: Command interface -->
-        <div class="command-section">
-            <!-- Command controls row -->
-            <div class="command-controls">
-                <div class="command-dropdown">
-                    <div class="command-trigger" id="commandTrigger" onclick="toggleCommandDropdown()">
-                        <span class="command-trigger-text">Select a command...</span>
-                        <span class="command-dropdown-icon">▼</span>
-                    </div>
-                    <div class="command-options" id="commandOptions">
-                        <!-- Command options will be populated by JavaScript -->
-                    </div>
-                </div>
-                <textarea class="request-body" id="requestBody" placeholder='Request body (JSON)&#10;Example: {"key": "value"}'>{}</textarea>
-                <input type="text" class="request-id-input" id="requestIdInput" placeholder="Request ID (optional)" />
-                <button class="send-button" onclick="sendRequest()" id="sendButton" disabled>
-                    Send
-                </button>
-                <div class="response-status">
-                    <div class="status-dot" id="statusDot"></div>
-                    <span id="statusText">Ready</span>
-                    <span id="responseTime"></span>
-                </div>
-            </div>
-        </div>
-        <!-- Bottom section: Messages list -->
-        <div class="messages-section">
-            <div class="messages-header">
-                <div class="messages-title">
-                    <span>Messages</span>
-                    <span id="messageCount">0</span>
-                </div>
-                <div class="messages-controls">
-                    <button class="button-small" onclick="clearFilters()">Clear Filters</button>
-                </div>
-            </div>
-            <div class="message-filters">
-                <select class="filter-control" id="messageTypeFilter" onchange="applyFilters()">
-                    <option value="">All Types</option>
-                    <option value="command">Commands</option>
-                    <option value="event">Events</option>
-                </select>
-                <select class="filter-control" id="sessionFilter" onchange="applyFilters()">
-                    <option value="">All Sessions</option>
-                </select>
-                <input type="text" class="filter-control" id="messageNameFilter" placeholder="Message name..." onchange="applyFilters()" />
-                <input type="text" class="filter-control" id="correlationIdFilter" placeholder="Correlation ID..." onchange="applyFilters()" />
-                <div class="filter-stats" id="filterStats">
-                    Showing all messages
-                </div>
-            </div>
-            <div class="messages-list" id="messagesList">
-                <table class="messages-table">
-                    <colgroup>
-                        <col style="width: 40px;">
-                        <col style="width: 80px;">
-                        <col style="width: 180px;">
-                        <col style="width: 120px;">
-                        <col style="width: 120px;">
-                        <col style="width: 120px;">
-                        <col style="width: 60px;">
-                        <col style="width: 90px;">
-                    </colgroup>
-                    <thead>
-                        <tr class="messages-header-row">
-                            <th class="messages-header-cell expand-cell" data-column="expand">
-                            </th>
-                            <th class="messages-header-cell type-cell" data-column="type">
-                                Type
-                            </th>
-                            <th class="messages-header-cell name-cell" data-column="name">
-                                Message
-                            </th>
-                            <th class="messages-header-cell id-cell" data-column="requestId">
-                                Request ID
-                            </th>
-                            <th class="messages-header-cell id-cell" data-column="correlationId">
-                                Correlation ID
-                            </th>
-                            <th class="messages-header-cell id-cell" data-column="sessionId">
-                                Session ID
-                            </th>
-                            <th class="messages-header-cell position-cell" data-column="position">
-                                Pos
-                            </th>
-                            <th class="messages-header-cell time-cell" data-column="time">
-                                Time
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody id="messagesTableBody">
-                        <tr><td colspan="8" style="text-align: center; padding: 32px; color: var(--text-tertiary);">No messages yet</td></tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </div>
-    <script>
-        const API_BASE = window.location.origin;
-        let availableCommands = [];
-        let currentMessages = [];
-        let filteredMessages = [];
-        let availableSessions = [];
-        let currentCommand = null;
-        let responseStartTime;
-        let expandedMessages = new Set();
-        let isResizing = false;
-        let currentColumn = null;
-        let startX = 0;
-        let startWidth = 0;
-        // Default column widths (percentages for better responsive behavior)
-        const defaultColumnWidths = {
-            expand: 40,
-            type: 80,
-            name: 180,
-            requestId: 120,
-            correlationId: 120,
-            sessionId: 120,
-            position: 60,
-            time: 90
-        };
-        let columnWidths = { ...defaultColumnWidths };
-        // Logo SVGs
-        const logoLight = `<svg width="637" height="637" viewBox="0 0 637 637" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <g clip-path="url(#clip0_1042_573)">
-            <rect width="637" height="637"/>
-            <path d="M693.161 -427.743L-623.632 1532.31L-591.107 1552.06L725.686 -407.988L693.161 -427.743Z" fill="#EC3F4A"/>
-            <path d="M725.695 -407.962L-591.097 1552.09L-571.511 1563.98L745.281 -396.066L725.695 -407.962Z" fill="white"/>
-            <path d="M745.281 -396.071L-571.511 1563.98L-538.986 1583.73L777.807 -376.315L745.281 -396.071Z" fill="#FF8A1D"/>
-            <path d="M777.815 -376.302L-538.978 1583.75L-519.391 1595.64L797.402 -364.406L777.815 -376.302Z" fill="white"/>
-            <path d="M797.394 -364.425L-519.399 1595.62L-486.874 1615.38L829.919 -344.67L797.394 -364.425Z" fill="#5EC72D"/>
-            <path d="M829.913 -344.684L-486.879 1615.37L-467.293 1627.26L849.499 -332.787L829.913 -344.684Z" fill="white"/>
-            <path d="M849.467 -332.791L-467.326 1627.26L-434.801 1647.01L881.992 -313.035L849.467 -332.791Z" fill="#42C3F7"/>
-            <path d="M882 -313.038L-434.792 1647.01L-415.206 1658.91L901.587 -301.142L882 -313.038Z" fill="white"/>
-            <path d="M673.55 -439.635L-643.242 1520.42L-623.656 1532.31L693.136 -427.738L673.55 -439.635Z" fill="white"/>
-            <path d="M512.644 100H121.718C109.652 100 100 109.667 100 121.751V513.277C100 525.361 109.652 535.028 121.718 535.028H512.644C524.71 535.028 534.362 525.361 534.362 513.277V121.751C534.362 109.667 524.71 100 512.644 100Z" fill="#1A1A1A"/>
-            <path d="M413.706 481.86C451.11 481.86 481.274 451.649 481.274 414.189C481.274 376.728 451.11 346.518 413.706 346.518C376.303 346.518 346.139 376.728 346.139 414.189C346.139 451.649 376.303 481.86 413.706 481.86Z" fill="white"/>
-            <path d="M153.089 347.968C153.089 347.243 153.813 346.518 154.537 346.518H287.017C287.741 346.518 288.465 347.243 288.465 347.968V412.98C288.465 413.705 287.741 414.43 287.017 414.43H257.095C256.371 414.43 255.647 415.155 255.647 415.88V480.893C255.647 481.618 254.923 482.343 254.199 482.343H188.321C187.597 482.343 186.873 481.618 186.873 480.893V415.88C186.873 415.155 186.149 414.43 185.425 414.43H154.296C153.572 414.43 152.848 413.705 152.848 412.98V347.968H153.089Z" fill="white"/>
-            <path d="M347.587 153.17C346.863 153.17 346.139 153.895 346.139 154.621V223.017C346.139 259.269 376.303 288.513 413.706 288.513C451.11 288.513 481.274 259.269 481.274 223.017V154.621C481.274 153.895 480.55 153.17 479.826 153.17H347.345H347.587Z" fill="white"/>
-            <path d="M153.33 286.339C152.848 287.306 153.33 288.272 154.537 288.272H286.776C287.742 288.272 288.465 287.306 287.983 286.339L221.863 154.139C221.381 153.172 219.933 153.172 219.45 154.139L153.33 286.339Z" fill="white"/>
-            </g>
-            <defs>
-            <clipPath id="clip0_1042_573">
-            <rect width="637" height="637" fill="white"/>
-            </clipPath>
-            </defs>
-            </svg>`;
-        const logoDark = `<svg width="637" height="637" viewBox="0 0 637 637" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <g clip-path="url(#clip0_1042_512)">
-                <rect width="637" height="637"/>
-                <path d="M693.161 -427.743L-623.632 1532.31L-591.107 1552.06L725.686 -407.988L693.161 -427.743Z" fill="#EC3F4A"/>
-                <path d="M725.695 -407.962L-591.097 1552.09L-571.511 1563.98L745.281 -396.066L725.695 -407.962Z" fill="#1A1A1A"/>
-                <path d="M745.281 -396.071L-571.511 1563.98L-538.986 1583.73L777.807 -376.315L745.281 -396.071Z" fill="#FF8A1D"/>
-                <path d="M777.815 -376.302L-538.978 1583.75L-519.391 1595.64L797.402 -364.406L777.815 -376.302Z" fill="#1A1A1A"/>
-                <path d="M797.394 -364.425L-519.399 1595.62L-486.874 1615.38L829.919 -344.67L797.394 -364.425Z" fill="#5EC72D"/>
-                <path d="M829.913 -344.684L-486.879 1615.37L-467.293 1627.26L849.499 -332.787L829.913 -344.684Z" fill="#1A1A1A"/>
-                <path d="M849.467 -332.791L-467.326 1627.26L-434.801 1647.01L881.992 -313.035L849.467 -332.791Z" fill="#42C3F7"/>
-                <path d="M882 -313.038L-434.792 1647.01L-415.206 1658.91L901.587 -301.142L882 -313.038Z" fill="#1A1A1A"/>
-                <path d="M673.55 -439.635L-643.242 1520.42L-623.656 1532.31L693.136 -427.738L673.55 -439.635Z" fill="#1A1A1A"/>
-                <path d="M512.644 100H121.718C109.652 100 100 109.667 100 121.751V513.277C100 525.361 109.652 535.028 121.718 535.028H512.644C524.71 535.028 534.362 525.361 534.362 513.277V121.751C534.362 109.667 524.71 100 512.644 100Z" fill="white"/>
-                <path d="M413.706 481.86C451.11 481.86 481.274 451.649 481.274 414.189C481.274 376.728 451.11 346.518 413.706 346.518C376.303 346.518 346.139 376.728 346.139 414.189C346.139 451.649 376.303 481.86 413.706 481.86Z" fill="#1A1A1A"/>
-                <path d="M153.089 347.968C153.089 347.243 153.813 346.518 154.537 346.518H287.017C287.741 346.518 288.465 347.243 288.465 347.968V412.98C288.465 413.705 287.741 414.43 287.017 414.43H257.095C256.371 414.43 255.647 415.155 255.647 415.88V480.893C255.647 481.618 254.923 482.343 254.199 482.343H188.321C187.597 482.343 186.873 481.618 186.873 480.893V415.88C186.873 415.155 186.149 414.43 185.425 414.43H154.296C153.572 414.43 152.848 413.705 152.848 412.98V347.968H153.089Z" fill="#1A1A1A"/>
-                <path d="M347.587 153.17C346.863 153.17 346.139 153.895 346.139 154.621V223.017C346.139 259.269 376.303 288.513 413.706 288.513C451.11 288.513 481.274 259.269 481.274 223.017V154.621C481.274 153.895 480.55 153.17 479.826 153.17H347.345H347.587Z" fill="#1A1A1A"/>
-                <path d="M153.33 286.339C152.848 287.306 153.33 288.272 154.537 288.272H286.776C287.742 288.272 288.465 287.306 287.983 286.339L221.863 154.139C221.381 153.172 219.933 153.172 219.45 154.139L153.33 286.339Z" fill="#1A1A1A"/>
-                </g>
-                <defs>
-                <clipPath id="clip0_1042_512">
-                <rect width="637" height="637" fill="white"/>
-                </clipPath>
-                </defs>
-                </svg>`;
-        // Theme management
-        function getSystemTheme() {
-            return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-        }
-        function applyTheme(theme) {
-            if (theme === 'system') {
-                theme = getSystemTheme();
-            }
-            document.body.setAttribute('data-theme', theme);
-            // Update logo based on theme
-            const logoMark = document.getElementById('logoMark');
-            if (logoMark) {
-                logoMark.innerHTML = theme === 'dark' ? logoDark : logoLight;
-            }
-        }
-        function getThemeIcon(theme) {
-            const icons = {
-                light: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />',
-                dark: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />',
-                system: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />'
-            };
-            return icons[theme] || icons.system;
-        }
-        function updateThemeIcon(theme) {
-            const iconElement = document.getElementById('currentThemeIcon');
-            if (iconElement) {
-                iconElement.innerHTML = getThemeIcon(theme);
-            }
-        }
-        function toggleThemeDropdown() {
-            const dropdown = document.getElementById('themeDropdown');
-            dropdown.classList.toggle('open');
-        }
-        function setTheme(theme) {
-            localStorage.setItem('theme', theme);
-            applyTheme(theme);
-            updateThemeIcon(theme);
-            // Update button states
-            document.querySelectorAll('.theme-option').forEach(btn => {
-                btn.classList.toggle('active', btn.getAttribute('data-theme') === theme);
-            });
-            // Close dropdown
-            document.getElementById('themeDropdown').classList.remove('open');
-        }
-        // Close dropdown when clicking outside
-        document.addEventListener('click', (e) => {
-            const switcher = document.querySelector('.theme-switcher');
-            if (!switcher.contains(e.target)) {
-                document.getElementById('themeDropdown').classList.remove('open');
-            }
-        });
-        // Initialize theme
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        setTheme(savedTheme);
-        updateThemeIcon(savedTheme);
-        // Listen for system theme changes
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-            if (localStorage.getItem('theme') === 'system') {
-                applyTheme('system');
-            }
-        });
-        // Command selection
-        function selectCommand(command) {
-            if (!command) return;
-            currentCommand = command;
-            localStorage.setItem('lastCommand', command);
-            // Enable send button
-            document.getElementById('sendButton').disabled = false;
-            // Clear response status
-            document.getElementById('statusDot').className = 'status-dot';
-            document.getElementById('statusText').textContent = 'Ready';
-            document.getElementById('responseTime').textContent = '';
-        }
-        // Toggle command dropdown
-        function toggleCommandDropdown() {
-            const trigger = document.getElementById('commandTrigger');
-            const options = document.getElementById('commandOptions');
-            const isOpen = trigger.classList.contains('open');
-            if (isOpen) {
-                trigger.classList.remove('open');
-                options.classList.remove('open');
-            } else {
-                trigger.classList.add('open');
-                options.classList.add('open');
-            }
-        }
-        // Select command from custom dropdown
-        function selectCommandFromDropdown(command) {
-            // Update trigger text
-            const trigger = document.getElementById('commandTrigger');
-            const triggerText = trigger.querySelector('.command-trigger-text');
-            // Mark trigger as selected
-            trigger.classList.add('selected');
-            triggerText.textContent = command;
-            // Update option selection states
-            document.querySelectorAll('.command-option').forEach(option => {
-                option.classList.toggle('selected', option.getAttribute('data-command') === command);
-            });
-            // Close dropdown
-            trigger.classList.remove('open');
-            document.getElementById('commandOptions').classList.remove('open');
-            // Call original select command logic
-            selectCommand(command);
-        }
-        // Close dropdown when clicking outside
-        document.addEventListener('click', (e) => {
-            const dropdown = document.querySelector('.command-dropdown');
-            if (!dropdown.contains(e.target)) {
-                const trigger = document.getElementById('commandTrigger');
-                const options = document.getElementById('commandOptions');
-                trigger.classList.remove('open');
-                options.classList.remove('open');
-            }
-        });
-        // Send request
-        async function sendRequest() {
-            if (!currentCommand) {
-                alert('Please select a command first');
-                return;
-            }
-            responseStartTime = Date.now();
-            // Update status to sending
-            document.getElementById('statusDot').className = 'status-dot';
-            document.getElementById('statusText').textContent = 'Sending...';
-            try {
-                const requestId = document.getElementById('requestIdInput').value;
-                const bodyStr = document.getElementById('requestBody').value;
-                const commandData = JSON.parse(bodyStr);
-                const command = {
-                    type: currentCommand,
-                    data: commandData
-                };
-                if (requestId) {
-                    command.requestId = requestId;
-                }
-                const response = await fetch(`${API_BASE}/command`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify(command)
-                });
-                const responseTime = Date.now() - responseStartTime;
-                const result = await response.json();
-                const statusDot = document.getElementById('statusDot');
-                const statusText = document.getElementById('statusText');
-                if (response.ok && result.status === 'ack') {
-                    statusDot.className = 'status-dot success';
-                    statusText.textContent = 'ACK';
-                } else {
-                    statusDot.className = 'status-dot error';
-                    statusText.textContent = 'ERROR';
-                }
-                document.getElementById('responseTime').textContent = `${responseTime}ms`;
-                // Auto refresh messages after sending
-                setTimeout(loadMessages, 500);
-            } catch (error) {
-                const responseTime = Date.now() - responseStartTime;
-                document.getElementById('responseTime').textContent = `${responseTime}ms`;
-                document.getElementById('statusDot').className = 'status-dot error';
-                document.getElementById('statusText').textContent = 'ERROR';
-            }
-        }
-        // Load registry and populate command dropdown
-        async function loadRegistry() {
-            try {
-                const response = await fetch(`${API_BASE}/registry`);
-                const data = await response.json();
-                const commandHandlers = data.commandHandlers || [];
-                const commandsWithMetadata = data.commandsWithMetadata || [];
-                availableCommands = commandHandlers;
-                // Populate command dropdown with detailed 3-line format
-                const commandOptions = document.getElementById('commandOptions');
-                commandOptions.innerHTML = '';
-                commandsWithMetadata.forEach(cmd => {
-                    const option = document.createElement('button');
-                    option.className = 'command-option';
-                    option.setAttribute('data-command', cmd.name);
-                    option.onclick = () => selectCommandFromDropdown(cmd.name);
-                    // Create 3-line format: command name, org, package
-                    const packageParts = (cmd.package || 'core').split('/');
-                    const org = packageParts.length > 1 ? packageParts[0] : '@auto-engineer';
-                    const packageName = packageParts.length > 1 ? packageParts[1] : packageParts[0];
-                    option.innerHTML = `
-                        <div class="command-option-name">${cmd.name}</div>
-                        <div class="command-option-org">${org}</div>
-                        <div class="command-option-package">${packageName}</div>
-                    `;
-                    option.title = `${cmd.name}\n\nOrganization: ${org}\nPackage: ${packageName}\nType: ${cmd.type || 'command'}\n\nDescription: ${cmd.description || 'No description available'}`;
-                    commandOptions.appendChild(option);
-                });
-                // Restore last selected command
-                const lastCommand = localStorage.getItem('lastCommand');
-                if (lastCommand && commandHandlers.includes(lastCommand)) {
-                    selectCommandFromDropdown(lastCommand);
-                }
-            } catch (error) {
-                console.error('Failed to load registry:', error);
-            }
-        }
-        // Load messages
-        async function loadMessages() {
-            try {
-                const messagesResponse = await fetch(`${API_BASE}/messages?count=500`);
-                currentMessages = await messagesResponse.json();
-                // Load available sessions for filter dropdown
-                const sessionsResponse = await fetch(`${API_BASE}/sessions`);
-                availableSessions = await sessionsResponse.json();
-                updateSessionFilter();
-                applyFilters();
-            } catch (error) {
-                console.error('Failed to load messages:', error);
-                document.getElementById('messagesList').innerHTML = '<div class="empty">Failed to load messages</div>';
-            }
-        }
-        // Update session filter dropdown
-        function updateSessionFilter() {
-            const sessionFilter = document.getElementById('sessionFilter');
-            const currentValue = sessionFilter.value;
-            sessionFilter.innerHTML = '<option value="">All Sessions</option>';
-            availableSessions
-                .sort((a, b) => new Date(b.startedAt) - new Date(a.startedAt))
-                .forEach(session => {
-                    const startTime = new Date(session.startedAt).toLocaleString();
-                    const option = document.createElement('option');
-                    option.value = session.sessionId;
-                    option.textContent = `${session.sessionId.substr(0, 12)}... (${startTime})`;
-                    sessionFilter.appendChild(option);
-                });
-            // Restore previous selection
-            sessionFilter.value = currentValue;
-        }
-        // Apply message filters
-        function applyFilters() {
-            const messageTypeFilter = document.getElementById('messageTypeFilter').value;
-            const sessionFilter = document.getElementById('sessionFilter').value;
-            const messageNameFilter = document.getElementById('messageNameFilter').value.toLowerCase();
-            const correlationIdFilter = document.getElementById('correlationIdFilter').value.toLowerCase();
-            filteredMessages = currentMessages.filter(message => {
-                // Message type filter
-                if (messageTypeFilter && message.messageType !== messageTypeFilter) {
-                    return false;
-                }
-                // Session filter
-                if (sessionFilter && message.sessionId !== sessionFilter) {
-                    return false;
-                }
-                // Message name filter
-                if (messageNameFilter && !message.message.type.toLowerCase().includes(messageNameFilter)) {
-                    return false;
-                }
-                // Correlation ID filter
-                if (correlationIdFilter) {
-                    const correlationId = message.message.correlationId || '';
-                    if (!correlationId.toLowerCase().includes(correlationIdFilter)) {
-                        return false;
-                    }
-                }
-                return true;
-            });
-            displayMessages();
-        }
-        // Display messages with preserved expansion state
-        function displayMessages() {
-            const tableBody = document.getElementById('messagesTableBody');
-            const countElement = document.getElementById('messageCount');
-            const statsElement = document.getElementById('filterStats');
-            if (filteredMessages.length === 0) {
-                tableBody.innerHTML = '<tr><td colspan="8" style="text-align: center; padding: 32px; color: var(--text-tertiary);">No messages match the current filters</td></tr>';
-                countElement.textContent = '0';
-                statsElement.textContent = `Showing 0 of ${currentMessages.length} messages`;
-                return;
-            }
-            // Update count and stats
-            countElement.textContent = filteredMessages.length;
-            const commandCount = filteredMessages.filter(m => m.messageType === 'command').length;
-            const eventCount = filteredMessages.filter(m => m.messageType === 'event').length;
-            statsElement.textContent = `Showing ${filteredMessages.length} of ${currentMessages.length} messages (${commandCount} commands, ${eventCount} events)`;
-            // Display messages in chronological order (oldest first)
-            const messagesHtml = filteredMessages
-                .slice()
-                .sort((a, b) => parseInt(a.position) - parseInt(b.position))
-                .map((message) => {
-                    const timeObj = new Date(message.timestamp);
-                    const time = timeObj.toLocaleTimeString('en-US', {
-                        hour12: false,
-                        hour: '2-digit',
-                        minute: '2-digit',
-                        second: '2-digit'
-                    }) + '.' + timeObj.getMilliseconds().toString().padStart(3, '0');
-                    const isExpanded = expandedMessages.has(String(message.position));
-                    const correlationId = message.message.correlationId || 'none';
-                    const requestId = message.message.requestId || 'none';
-                    const sessionId = message.sessionId || 'none';
-                    let rowsHtml = `
-                        <tr class="message-row ${isExpanded ? 'expanded' : ''}" data-position="${message.position}">
-                            <td class="message-cell expand-cell">
-                                <span class="expand-btn">${isExpanded ? '-' : '+'}</span>
-                            </td>
-                            <td class="message-cell type-cell">
-                                <span class="message-type ${message.messageType}">${message.messageType.toUpperCase()}</span>
-                            </td>
-                            <td class="message-cell name-cell" title="${message.message.type}">
-                                <span class="message-name">${message.message.type}</span>
-                            </td>
-                            <td class="message-cell id-cell" title="${requestId}">
-                                ${requestId.length > 35 ? requestId.substring(0, 35) + '...' : requestId}
-                            </td>
-                            <td class="message-cell id-cell" title="${correlationId}">
-                                ${correlationId.length > 35 ? correlationId.substring(0, 35) + '...' : correlationId}
-                            </td>
-                            <td class="message-cell id-cell" title="${sessionId}">
-                                ${sessionId.length > 35 ? sessionId.substring(0, 35) + '...' : sessionId}
-                            </td>
-                            <td class="message-cell position-cell">${message.position}</td>
-                            <td class="message-cell time-cell">${time}</td>
-                        </tr>
-                    `;
-                    if (isExpanded) {
-                        const messageDataJson = JSON.stringify(message.message.data, null, 2);
-                        rowsHtml += `
-                            <tr class="message-details-row" style="background: #1a202c;">
-                                <td colspan="8" style="padding: 16px; border-top: 1px solid #4a5568;">
-                                    <div style="display: flex; flex-direction: column; gap: 8px;">
-                                        <span style="color: #a0aec0; font-size: 12px; font-weight: 600;">MESSAGE DATA</span>
-                                        <pre style="background: #2d3748; color: #e2e8f0; padding: 16px; border-radius: 6px; font-family: 'SF Mono', Monaco, monospace; font-size: 12px; line-height: 1.4; overflow-x: auto; border: 1px solid #4a5568; margin: 0;">${messageDataJson}</pre>
-                                    </div>
-                                </td>
-                            </tr>
-                        `;
-                    }
-                    return rowsHtml;
-                })
-                .join('');
-            // Always update to ensure expanded content shows properly
-            tableBody.innerHTML = messagesHtml;
-            autoScrollToBottom();
-        }
-        // Toggle message details (like CloudWatch)
-        function toggleMessage(position) {
-            console.log('toggleMessage called with position:', position, 'type:', typeof position);
-            console.log('Current expandedMessages:', Array.from(expandedMessages));
-            // Ensure position is a string for consistency
-            const positionStr = String(position);
-            if (expandedMessages.has(positionStr)) {
-                expandedMessages.delete(positionStr);
-                console.log('Collapsed message', positionStr);
-            } else {
-                expandedMessages.add(positionStr);
-                console.log('Expanded message', positionStr);
-            }
-            console.log('New expandedMessages:', Array.from(expandedMessages));
-            displayMessages();
-        }
-        // Handle click events on table for expansion
-        document.addEventListener('click', (e) => {
-            // Check if click is on expand button or expand cell (but not resize handle)
-            const expandBtn = e.target.closest('.expand-btn');
-            const expandCell = e.target.closest('.expand-cell');
-            const resizeHandle = e.target.closest('.resize-handle');
-            if ((expandBtn || expandCell) && !resizeHandle) {
-                const row = e.target.closest('tr[data-position]');
-                if (row) {
-                    const position = row.getAttribute('data-position');
-                    if (position) {
-                        e.stopPropagation();
-                        e.preventDefault();
-                        console.log('Toggling message position:', position);
-                        toggleMessage(position);
-                    }
-                }
-            }
-        });
-        // Column resizing functionality
-        function initColumnResize() {
-            const table = document.querySelector('.messages-table');
-            if (!table) return;
-            // Mouse down on resize handle
-            document.addEventListener('mousedown', (e) => {
-                if (!e.target.classList.contains('resize-handle')) return;
-                e.preventDefault();
-                isResizing = true;
-                const headerCell = e.target.parentElement;
-                const column = headerCell.dataset.column;
-                currentColumn = column;
-                startX = e.clientX;
-                startWidth = parseInt(getComputedStyle(headerCell).width);
-                document.body.classList.add('resizing');
-                table.classList.add('resizing');
-            });
-            // Mouse move during resize
-            document.addEventListener('mousemove', (e) => {
-                if (!isResizing || !currentColumn) return;
-                const deltaX = e.clientX - startX;
-                const newWidth = Math.max(30, startWidth + deltaX);
-                columnWidths[currentColumn] = newWidth;
-                updateColumnWidths();
-            });
-            // Mouse up to end resize
-            document.addEventListener('mouseup', () => {
-                if (isResizing) {
-                    isResizing = false;
-                    currentColumn = null;
-                    document.body.classList.remove('resizing');
-                    const table = document.querySelector('.messages-table');
-                    if (table) table.classList.remove('resizing');
-                    // Save column widths to localStorage
-                    localStorage.setItem('columnWidths', JSON.stringify(columnWidths));
-                }
-            });
-        }
-        // Update column widths in the table
-        function updateColumnWidths() {
-            const headers = document.querySelectorAll('.messages-header-cell');
-            headers.forEach((cell, index) => {
-                const column = cell.dataset.column;
-                if (column && columnWidths[column]) {
-                    cell.style.width = columnWidths[column] + 'px';
-                    cell.style.minWidth = columnWidths[column] + 'px';
-                    cell.style.maxWidth = columnWidths[column] + 'px';
-                }
-            });
-            // Apply to colgroup if it exists
-            const colgroup = document.querySelector('.messages-table colgroup');
-            if (colgroup) {
-                const cols = colgroup.querySelectorAll('col');
-                headers.forEach((cell, index) => {
-                    const column = cell.dataset.column;
-                    if (column && columnWidths[column] && cols[index]) {
-                        cols[index].style.width = columnWidths[column] + 'px';
-                    }
-                });
-            }
-        }
-        // Load saved column widths
-        function loadColumnWidths() {
-            const saved = localStorage.getItem('columnWidths');
-            if (saved) {
-                try {
-                    const parsed = JSON.parse(saved);
-                    columnWidths = { ...defaultColumnWidths, ...parsed };
-                } catch (e) {
-                    columnWidths = { ...defaultColumnWidths };
-                }
-            }
-        }
-        // Copy message data to request body field
-        function copyMessageData(position, messageData) {
-            try {
-                const requestBodyField = document.getElementById('requestBody');
-                if (requestBodyField) {
-                    // Parse and re-stringify to ensure proper formatting
-                    const parsed = JSON.parse(messageData);
-                    requestBodyField.value = JSON.stringify(parsed, null, 2);
-                    // Visual feedback
-                    const copyBtn = window.event ? window.event.target : null;
-                    if (copyBtn) {
-                        const originalText = copyBtn.textContent;
-                        copyBtn.textContent = 'Copied!';
-                        copyBtn.style.background = 'var(--success)';
-                        copyBtn.style.color = 'white';
-                        setTimeout(() => {
-                            copyBtn.textContent = originalText;
-                            copyBtn.style.background = '';
-                            copyBtn.style.color = '';
-                        }, 1500);
-                    }
-                }
-            } catch (error) {
-                console.error('Failed to copy message data:', error);
-                // Error feedback
-                const copyBtn = window.event ? window.event.target : null;
-                if (copyBtn) {
-                    const originalText = copyBtn.textContent;
-                    copyBtn.textContent = 'Error';
-                    copyBtn.style.background = 'var(--error)';
-                    copyBtn.style.color = 'white';
-                    setTimeout(() => {
-                        copyBtn.textContent = originalText;
-                        copyBtn.style.background = '';
-                        copyBtn.style.color = '';
-                    }, 1500);
-                }
-            }
-        }
-        // Auto-scroll to bottom when new messages arrive
-        let lastMessageCount = 0;
-        function autoScrollToBottom() {
-            if (currentMessages.length > lastMessageCount) {
-                const messagesContainer = document.querySelector('.messages-list');
-                if (messagesContainer) {
-                    messagesContainer.scrollTop = messagesContainer.scrollHeight;
-                }
-                lastMessageCount = currentMessages.length;
-            }
-        }
-        // Clear filters
-        function clearFilters() {
-            document.getElementById('messageTypeFilter').value = '';
-            document.getElementById('sessionFilter').value = '';
-            document.getElementById('messageNameFilter').value = '';
-            document.getElementById('correlationIdFilter').value = '';
-            applyFilters();
-        }
-        // Keyboard shortcuts
-        document.addEventListener('keydown', (e) => {
-            if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
-                sendRequest();
-            }
-        });
-        // WebSocket connection for real-time updates
-        const ws = new WebSocket(`ws://${window.location.hostname}:${window.location.port}`);
-        ws.onopen = () => {
-            console.log('WebSocket connected');
-        };
-        ws.onmessage = (event) => {
-            const message = JSON.parse(event.data);
-            if (message.type === 'event' || message.type === 'state') {
-                // Reload messages when events occur
-                loadMessages();
-            } else if (message.type === 'commandError') {
-                // Show command error in response
-                document.getElementById('responsePreview').textContent = JSON.stringify({
-                    status: 'error',
-                    commandId: message.commandId,
-                    error: message.error,
-                    timestamp: message.timestamp
-                }, null, 2);
-                document.getElementById('statusDot').className = 'status-dot error';
-                document.getElementById('statusText').textContent = 'Command Failed';
-                document.getElementById('responseTime').textContent = 'Async Error';
-            }
-        };
-        ws.onerror = (error) => {
-            console.error('WebSocket error:', error);
-        };
-        ws.onclose = () => {
-            console.log('WebSocket disconnected');
-        };
-        // Initial load
-        loadColumnWidths();
-        loadRegistry();
-        loadMessages();
-        // Initialize column resize functionality
-        setTimeout(() => {
-            initColumnResize();
-            updateColumnWidths();
-        }, 100);
-        // Auto-refresh
-        setInterval(loadRegistry, 5000);
-        setInterval(loadMessages, 2000);
-    </script>
-</body>
-</html>