citadel_cli 1.1.4 → 1.1.5

package/dist/citadel.es.js

@@ -1,44 +1,11 @@
-var pe = Object.defineProperty;
-var ge = (r, e, n) => e in r ? pe(r, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : r[e] = n;
-var b = (r, e, n) => ge(r, typeof e != "symbol" ? e + "" : e, n);
-import { jsx as m, jsxs as N, Fragment as he } from "react/jsx-runtime";
-import L, { useEffect as _, useMemo as V, createContext as fe, useContext as Y, useState as R, useCallback as w, useReducer as we, useRef as U } from "react";
-import { createRoot as be } from "react-dom/client";
-const ye = ({ onOpen: r, onClose: e, isVisible: n, showCitadelKey: t }) => {
-  _(() => {
-    const o = (s) => {
-      var i, c;
-      !n && s.key === t && !["input", "textarea"].includes(((c = (i = s.target) == null ? void 0 : i.tagName) == null ? void 0 : c.toLowerCase()) || "") && (s.preventDefault(), r()), n && s.key === "Escape" && (s.preventDefault(), e());
-    };
-    return document.addEventListener("keydown", o), () => document.removeEventListener("keydown", o);
-  }, [r, e, n, t]);
-}, xe = "_container_141sr_3", ve = "_innerContainer_141sr_19", Ce = "_inputSection_141sr_28", Se = "_resizeHandle_141sr_35", ke = "_citadel_slideUp_141sr_64", Ee = "_citadel_slideDown_141sr_68", Q = {
-  container: xe,
-  innerContainer: ve,
-  inputSection: Ce,
-  resizeHandle: Se,
-  citadel_slideUp: ke,
-  citadel_slideDown: Ee
-}, Ne = (r) => {
-  const { isVisible: e, isClosing: n, onAnimationComplete: t } = r, o = V(() => e ? n ? Q.slideDown : Q.slideUp : "", [e, n]);
-  return _(() => {
-    if (t) {
-      const i = setTimeout(() => {
-        t();
-      }, 200);
-      return () => clearTimeout(i);
-    }
-  }, [n, t]), {
-    style: V(() => ({
-      opacity: e ? 1 : 0,
-      transform: e ? "translateY(0)" : n ? "translateY(100%)" : "translateY(-100%)",
-      transition: "opacity 200ms ease-in-out, transform 200ms ease-in-out"
-    }), [e, n]),
-    animationClass: o
-  };
-};
-var M = /* @__PURE__ */ ((r) => (r.Pending = "pending", r.Success = "success", r.Failure = "failure", r.Timeout = "timeout", r))(M || {});
-class F {
+var ge = Object.defineProperty;
+var fe = (r, e, n) => e in r ? ge(r, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : r[e] = n;
+var b = (r, e, n) => fe(r, typeof e != "symbol" ? e + "" : e, n);
+import { jsx as m, jsxs as _, Fragment as we } from "react/jsx-runtime";
+import L, { createContext as be, useEffect as A, useContext as Y, useState as R, useCallback as w, useMemo as V, useReducer as ye, useRef as H } from "react";
+import { createRoot as xe } from "react-dom/client";
+var T = /* @__PURE__ */ ((r) => (r.Pending = "pending", r.Success = "success", r.Failure = "failure", r.Timeout = "timeout", r))(T || {});
+class U {
   constructor(e = Date.now()) {
     b(this, "_status", "pending");
     this.timestamp = e;
@@ -56,7 +23,7 @@ class F {
     this._status = "timeout";
   }
 }
-class nn extends F {
+class an extends U {
   constructor(e, n) {
     super(n), this.data = e;
   }
@@ -64,7 +31,7 @@ class nn extends F {
     return /* @__PURE__ */ m("pre", { className: "text-gray-200", children: JSON.stringify(this.data, null, 2) });
   }
 }
-class oe extends F {
+class ae extends U {
   constructor(e, n) {
     super(n), this.text = e;
   }
@@ -72,7 +39,7 @@ class oe extends F {
     return /* @__PURE__ */ m("div", { className: "text-gray-200 whitespace-pre font-mono", children: this.text });
   }
 }
-class _e extends F {
+class ve extends U {
   constructor(e, n) {
     super(n), this.error = e, this.markFailure();
   }
@@ -80,12 +47,12 @@ class _e extends F {
     return /* @__PURE__ */ m("div", { className: "mt-1 text-red-400", children: this.error });
   }
 }
-class Ae extends F {
+class Ce extends U {
   render() {
     return /* @__PURE__ */ m("div", { className: "text-gray-400", children: "..." });
   }
 }
-class tn extends F {
+class ln extends U {
   constructor(e, n = "", t) {
     super(t), this.imageUrl = e, this.altText = n;
   }
@@ -100,9 +67,9 @@ class tn extends F {
     ) });
   }
 }
-const ze = (r) => async function() {
+const Se = (r) => async function() {
   const e = r.commands.filter((n) => n.fullPath[0] !== "help").map((n) => `${n.segments.map((o) => o.type === "argument" ? `<${o.name}>` : o.name).join(" ")} - ${n.description}`).sort();
-  return e.push("help - Show available commands"), new oe(
+  return e.push("help - Show available commands"), new ae(
     e.length > 0 ? `Available Commands:
 ` + e.join(`
 `) : "No commands available yet. Add some commands to get started!"
@@ -130,7 +97,7 @@ class C {
   }
 }
 b(C, "level", 0), b(C, "prefix", "");
-const A = {
+const z = {
   commandTimeoutMs: 1e4,
   cursorColor: "var(--cursor-color, #fff)",
   cursorSpeed: 530,
@@ -143,12 +110,13 @@ const A = {
   outputFontSize: "0.875rem",
   resetStateOnHide: !1,
   showCitadelKey: ".",
+  displayMode: "panel",
   storage: {
     type: "localStorage",
     maxCommands: 100
   }
 };
-class se {
+class ie {
   constructor(e) {
     b(this, "config");
     this.config = {
@@ -167,7 +135,7 @@ class se {
     await this.saveCommands(n);
   }
 }
-class Ie extends se {
+class ke extends ie {
   constructor(n) {
     super(n);
     b(this, "storageKey", "citadel_command_history");
@@ -202,7 +170,7 @@ class Ie extends se {
     }
   }
 }
-class Re extends se {
+class Ee extends ie {
   constructor(n) {
     super(n);
     b(this, "storedCommands", []);
@@ -233,9 +201,9 @@ const D = class D {
   initializeStorage(e) {
     if (!this.currentStorage)
       try {
-        this.currentStorage = new Ie(e);
+        this.currentStorage = new ke(e);
       } catch (n) {
-        console.warn("Failed to create storage, falling back to memory storage:", n), this.currentStorage = new Re(e);
+        console.warn("Failed to create storage, falling back to memory storage:", n), this.currentStorage = new Ee(e);
       }
   }
   getStorage() {
@@ -246,8 +214,8 @@ const D = class D {
 };
 b(D, "instance");
 let q = D;
-const ae = async () => new oe("");
-class G {
+const le = async () => new ae("");
+class J {
   constructor(e, n, t) {
     this.type = e, this.name = n, this.description = t;
   }
@@ -255,23 +223,23 @@ class G {
     return this.name;
   }
 }
-class ie extends G {
+class ce extends J {
   constructor() {
     super("null", ">null<", "Empty segment");
   }
 }
-class Pe extends G {
+class Ne extends J {
   constructor(e, n) {
     super("word", e, n);
   }
 }
-class He extends G {
+class _e extends J {
   constructor(e, n, t, o) {
     super("argument", e, n), this.value = t, this.valid = o;
   }
 }
-class De {
-  constructor(e, n, t = ae) {
+class Ae {
+  constructor(e, n, t = le) {
     b(this, "_segments");
     b(this, "_description");
     // Used by `Help` command, etc.
@@ -300,7 +268,7 @@ class De {
     return this.fullPath.join(" ") === e.fullPath.join(" ");
   }
 }
-class J {
+class Q {
   constructor() {
     b(this, "_commands", []);
   }
@@ -308,22 +276,26 @@ class J {
     return this._commands;
   }
   /**
-   * Registers a new command
-   * 
-   * @param newCommandNode The new command to add
-   * @throws {Error} If attempting to add a duplicate leaf command or a subcommand to a leaf
-   * 
+   * Registers a new command composed of ordered segments.
+   *
+   * Each segment describes either a literal word or an argument placeholder. The resulting
+   * path must be unique across the registry once argument placeholders are normalized.
+   *
+   * @param segments Ordered command path definition.
+   * @param description Human-readable summary surfaced by help and search results.
+   * @param handler Async handler executed when the command is submitted; defaults to `NoopHandler`.
+   * @throws {Error} If the segment list is empty or the path collides with an existing command.
    */
-  addCommand(e, n, t = ae) {
+  addCommand(e, n, t = le) {
     if (e === void 0 || e.length === 0)
       throw new Error("Command path cannot be empty");
-    const o = new De(e, n, t), s = this._commands.find((i) => {
-      const c = i.segments.map(
-        (l) => l.type === "argument" ? "*" : l.name
+    const o = new Ae(e, n, t), s = this._commands.find((a) => {
+      const l = a.segments.map(
+        (c) => c.type === "argument" ? "*" : c.name
       ).join(" "), d = e.map(
-        (l) => l.type === "argument" ? "*" : l.name
+        (c) => c.type === "argument" ? "*" : c.name
       ).join(" ");
-      return c === d;
+      return l === d;
     });
     if (s)
       throw new Error(`Duplicate commands: '${s.fullPath_s}' and '${o.fullPath_s}'`);
@@ -340,8 +312,8 @@ class J {
       const t = n.fullPath.join(" "), o = e.join(" ");
       if (t === o)
         return !0;
-      const i = n.segments.filter((c) => c.type === "word").map((c) => c.name);
-      return i.length === e.length && i.join(" ") === o;
+      const a = n.segments.filter((l) => l.type === "word").map((l) => l.name);
+      return a.length === e.length && a.join(" ") === o;
     });
   }
   commandExistsForPath(e) {
@@ -350,9 +322,9 @@ class J {
         (s) => s.type === "argument" ? "*" : s.name
       ).join(" ")
     ), t = e.map((o, s) => this._commands.some(
-      (c) => {
+      (l) => {
         var d;
-        return ((d = c.segments[s]) == null ? void 0 : d.type) === "argument";
+        return ((d = l.segments[s]) == null ? void 0 : d.type) === "argument";
       }
     ) ? "*" : o).join(" ");
     return n.includes(t);
@@ -375,27 +347,27 @@ class J {
    */
   getCompletions(e) {
     if (C.debug("[getCompletions] path: ", e), !e.length) {
-      const s = this._commands.map((d) => d.segments[0]), i = (d, l) => d.type === l.type && d.name === l.name;
+      const s = this._commands.map((d) => d.segments[0]), a = (d, c) => d.type === c.type && d.name === c.name;
       return s.filter(
-        (d, l, u) => l === u.findIndex((p) => i(p, d))
+        (d, c, u) => c === u.findIndex((p) => a(p, d))
       );
     }
     const n = e.length;
     return this._commands.filter((s) => {
-      const i = s.segments;
-      if (i.length <= n - 1)
+      const a = s.segments;
+      if (a.length <= n - 1)
         return !1;
-      for (let c = 0; c < n; c++) {
-        const d = e[c], l = i[c];
-        if (!(d === "*" && l.type === "argument") && d !== l.name)
+      for (let l = 0; l < n; l++) {
+        const d = e[l], c = a[l];
+        if (!(d === "*" && c.type === "argument") && d !== c.name)
           return !1;
       }
       return !0;
     }).filter((s) => s.segments.length > n).map((s) => {
-      const i = s.segments[n], c = i.type === "argument" ? He : Pe;
-      return new c(i.name, i.description);
+      const a = s.segments[n], l = a.type === "argument" ? _e : Ne;
+      return new l(a.name, a.description);
     }).filter(
-      (s, i, c) => i === c.findIndex(
+      (s, a, l) => a === l.findIndex(
         (d) => d.type === s.type && d.name === s.name
       )
     );
@@ -404,10 +376,10 @@ class J {
     return this.getCompletions(e).length > 0;
   }
 }
-class le {
+class de {
   constructor() {
     b(this, "segments", []);
-    b(this, "nullSegment", new ie());
+    b(this, "nullSegment", new ce());
     b(this, "observers", []);
   }
   subscribe(e) {
@@ -491,105 +463,105 @@ class le {
     return [...this.segments];
   }
 }
-const Ue = {
-  config: A,
-  commands: new J(),
-  segmentStack: new le()
-}, O = fe(Ue), Fe = ({ config: r = A, commandRegistry: e, children: n }) => {
+const ze = {
+  config: z,
+  commands: new Q(),
+  segmentStack: new de()
+}, j = be(ze), Ie = ({ config: r = z, commandRegistry: e, children: n }) => {
   const [t, o] = L.useState(), s = {
-    ...A,
+    ...z,
     ...r,
     // Ensure nested objects are properly merged
     storage: {
-      ...A.storage,
+      ...z.storage,
       ...r.storage
     },
     // Ensure explicit values from config take precedence
-    cursorType: r.cursorType ?? A.cursorType,
-    cursorColor: r.cursorColor ?? A.cursorColor,
-    cursorSpeed: r.cursorSpeed ?? A.cursorSpeed,
+    cursorType: r.cursorType ?? z.cursorType,
+    cursorColor: r.cursorColor ?? z.cursorColor,
+    cursorSpeed: r.cursorSpeed ?? z.cursorSpeed,
     showCitadelKey: r.showCitadelKey || "."
   };
-  _(() => {
+  A(() => {
     q.getInstance().initializeStorage(
-      s.storage ?? A.storage
+      s.storage ?? z.storage
     ), o(q.getInstance().getStorage());
-  }, []), _(() => {
+  }, []), A(() => {
     if (e && s.includeHelpCommand && !e.commandExistsForPath(["help"])) {
-      const c = ze(e);
+      const l = Se(e);
       e.addCommand(
         [{ type: "word", name: "help" }],
         "Show available commands",
-        c
+        l
       );
     }
   }, [e, s.includeHelpCommand]);
-  const i = {
+  const a = {
     config: s,
-    commands: e || new J(),
+    commands: e || new Q(),
     storage: t,
-    segmentStack: new le()
+    segmentStack: new de()
   };
-  return /* @__PURE__ */ m(O.Provider, { value: i, children: n });
-}, $ = () => {
-  const r = Y(O);
+  return /* @__PURE__ */ m(j.Provider, { value: a, children: n });
+}, F = () => {
+  const r = Y(j);
   if (r === void 0)
     throw new Error("useCitadelConfig must be used within a CitadelConfigProvider");
   return r.config;
 }, B = () => {
-  const r = Y(O);
+  const r = Y(j);
   if (r === void 0)
     throw new Error("useCitadelCommands must be used within a CitadelConfigProvider");
   return r.commands;
-}, ce = () => {
-  const r = Y(O);
+}, me = () => {
+  const r = Y(j);
   if (r === void 0)
     throw new Error("useCitadelStorage must be used within a CitadelConfigProvider");
   return r.storage;
-}, K = () => {
-  const r = Y(O);
+}, O = () => {
+  const r = Y(j);
   if (r === void 0)
     throw new Error("useSegmentStack must be used within a CitadelConfigProvider");
   return r.segmentStack;
 };
-class Te {
+class Re {
   constructor(e, n) {
     b(this, "timestamp");
     b(this, "command");
     b(this, "result");
-    this.command = e.toArray().map((t) => t.type === "argument" ? t.value || "" : t.name), this.timestamp = Date.now(), this.result = n ?? new Ae();
+    this.command = e.toArray().map((t) => t.type === "argument" ? t.value || "" : t.name), this.timestamp = Date.now(), this.result = n ?? new Ce();
   }
 }
-function je(r) {
+function Pe(r) {
   return {
     commandSegments: r,
     timestamp: Date.now()
   };
 }
-function de() {
-  const r = ce(), [e, n] = R({
+function ue() {
+  const r = me(), [e, n] = R({
     storedCommands: [],
     position: null
-  }), t = w(async (c) => {
+  }), t = w(async (l) => {
     if (r)
       try {
-        const d = je(c);
-        await r.addStoredCommand(d), n((l) => ({
-          ...l,
-          storedCommands: [...l.storedCommands, d],
+        const d = Pe(l);
+        await r.addStoredCommand(d), n((c) => ({
+          ...c,
+          storedCommands: [...c.storedCommands, d],
           position: null
         }));
       } catch (d) {
         console.warn("Failed to save command to history:", d);
       }
   }, [r]), o = w(async () => r ? await r.getStoredCommands() : [], [r]);
-  _(() => {
+  A(() => {
     if (!r) return;
     (async () => {
       try {
         const d = await r.getStoredCommands();
-        return n((l) => ({
-          ...l,
+        return n((c) => ({
+          ...c,
           storedCommands: d
         })), d;
       } catch (d) {
@@ -597,29 +569,29 @@ function de() {
       }
     })();
   }, [r]);
-  const s = w(async (c) => {
+  const s = w(async (l) => {
     if ((await o()).length === 0)
       return { segments: null, position: null };
-    let l = null;
-    return c === "up" ? e.position === null ? l = e.storedCommands.length - 1 : e.position > 0 ? l = e.position - 1 : l = 0 : e.position === null || e.position >= e.storedCommands.length - 1 ? l = null : l = e.position + 1, n((p) => ({
+    let c = null;
+    return l === "up" ? e.position === null ? c = e.storedCommands.length - 1 : e.position > 0 ? c = e.position - 1 : c = 0 : e.position === null || e.position >= e.storedCommands.length - 1 ? c = null : c = e.position + 1, n((p) => ({
       ...p,
-      position: l
-    })), l === null ? {
+      position: c
+    })), c === null ? {
       segments: [],
       position: null
     } : {
-      segments: l !== null ? e.storedCommands[l].commandSegments : null,
-      position: l
+      segments: c !== null ? e.storedCommands[c].commandSegments : null,
+      position: c
     };
-  }, [e, o]), i = w(async () => {
+  }, [e, o]), a = w(async () => {
     try {
       if (!r) return;
       await r.clear(), n({
         storedCommands: [],
         position: null
       });
-    } catch (c) {
-      console.warn("Failed to clear command history:", c);
+    } catch (l) {
+      console.warn("Failed to clear command history:", l);
     }
   }, [r]);
   return {
@@ -627,11 +599,11 @@ function de() {
     addStoredCommand: t,
     getStoredCommands: o,
     navigateHistory: s,
-    clear: i
+    clear: a
   };
 }
-const me = () => {
-  const r = $(), e = B(), n = de(), t = K(), o = ce(), [s, i] = R({
+const X = () => {
+  const r = F(), e = B(), n = ue(), t = O(), o = me(), [s, a] = R({
     currentInput: "",
     isEnteringArg: !1,
     output: [],
@@ -641,9 +613,9 @@ const me = () => {
       storage: o
     }
   });
-  _(() => {
-  }, [o]), _(() => {
-    i((u) => ({
+  A(() => {
+  }, [o]), A(() => {
+    a((u) => ({
       ...u,
       history: {
         commands: n.history.storedCommands,
@@ -652,15 +624,15 @@ const me = () => {
       }
     }));
   }, [n.history, o]);
-  const c = {
+  const l = {
     setCurrentInput: w((u) => {
-      C.debug("[CitadelActions] setCurrentInput: ", u), i((p) => ({ ...p, currentInput: u }));
+      C.debug("[CitadelActions] setCurrentInput: ", u), a((p) => ({ ...p, currentInput: u }));
     }, []),
     setIsEnteringArg: w((u) => {
-      C.debug("[CitadelActions] setIsEnteringArg: ", u), i((p) => ({ ...p, isEnteringArg: u }));
+      C.debug("[CitadelActions] setIsEnteringArg: ", u), a((p) => ({ ...p, isEnteringArg: u }));
     }, []),
     addOutput: w((u) => {
-      C.debug("[CitadelActions]addOutput: ", u), i((p) => ({
+      C.debug("[CitadelActions]addOutput: ", u), a((p) => ({
         ...p,
         output: [...p.output, u]
       }));
@@ -671,41 +643,41 @@ const me = () => {
         console.error("[CitadelActions][executeCommand] Cannot execute command because no command was found for the given path: ", u);
         return;
       }
-      const S = new Te(t);
-      i((y) => ({
+      const k = new Re(t);
+      a((y) => ({
         ...y,
-        output: [...y.output, S]
+        output: [...y.output, k]
       }));
       try {
-        const y = new Promise((a, g) => {
+        const y = new Promise((i, h) => {
           setTimeout(() => {
-            g(new Error("Request timed out"));
+            h(new Error("Request timed out"));
           }, r.commandTimeoutMs);
-        }), z = t.arguments.map((a) => a.value || ""), E = await Promise.race([
-          p.handler(z),
+        }), E = t.arguments.map((i) => i.value || ""), N = await Promise.race([
+          p.handler(E),
           y
         ]);
-        if (!(E instanceof F))
+        if (!(N instanceof U))
           throw new Error(
             `The ${u.join(".")} command returned an invalid result type. Commands must return an instance of a CommandResult.
 For example:
    return new JsonCommandResult({ text: "Hello World" });
 Check the definition of the ${u.join(".")} command and update the return type for its handler.`
           );
-        E.markSuccess(), i((a) => ({
-          ...a,
-          output: a.output.map(
-            (g) => g.timestamp === S.timestamp ? { ...g, result: E } : g
+        N.markSuccess(), a((i) => ({
+          ...i,
+          output: i.output.map(
+            (h) => h.timestamp === k.timestamp ? { ...h, result: N } : h
           )
         }));
       } catch (y) {
-        const z = new _e(
+        const E = new ve(
           y instanceof Error ? y.message : "Unknown error"
         );
-        z.markFailure(), i((E) => ({
-          ...E,
-          output: E.output.map(
-            (a) => a.timestamp === S.timestamp ? { ...a, result: z } : a
+        E.markFailure(), a((N) => ({
+          ...N,
+          output: N.output.map(
+            (i) => i.timestamp === k.timestamp ? { ...i, result: E } : i
           )
         }));
       }
@@ -717,14 +689,126 @@ Check the definition of the ${u.join(".")} command and update the return type fo
         console.warn("Failed to clear history:", u);
       }
     }, [n])
-  }, d = w(() => e.getCompletions_s(t.path()), [t, e]), l = w(() => e.getCompletions(t.path()), [t, e]);
+  }, d = w(() => e.getCompletions_s(t.path()), [t, e]), c = w(() => e.getCompletions(t.path()), [t, e]);
   return {
     state: s,
-    actions: c,
+    actions: l,
     getAvailableCommands_s: d,
-    getAvailableCommandSegments: l
+    getAvailableCommandSegments: c
   };
-}, Me = {
+}, He = ({ onOpen: r, onClose: e, isVisible: n, showCitadelKey: t }) => {
+  A(() => {
+    const o = (s) => {
+      var a, l;
+      !n && s.key === t && !["input", "textarea"].includes(((l = (a = s.target) == null ? void 0 : a.tagName) == null ? void 0 : l.toLowerCase()) || "") && (s.preventDefault(), r()), n && s.key === "Escape" && (s.preventDefault(), e());
+    };
+    return document.addEventListener("keydown", o), () => document.removeEventListener("keydown", o);
+  }, [r, e, n, t]);
+}, De = "_panelContainer_1pav9_3", Me = "_innerContainer_1pav9_19", Ue = "_inputSection_1pav9_29", Fe = "_resizeHandle_1pav9_36", Te = "_citadel_slideUp_1pav9_65", je = "_citadel_slideDown_1pav9_69", Oe = "_inlineContainer_1pav9_73", Z = {
+  panelContainer: De,
+  innerContainer: Me,
+  inputSection: Ue,
+  resizeHandle: Fe,
+  citadel_slideUp: Te,
+  citadel_slideDown: je,
+  inlineContainer: Oe
+}, $e = (r) => {
+  const { isVisible: e, isClosing: n, onAnimationComplete: t } = r, o = V(() => e ? n ? Z.slideDown : Z.slideUp : "", [e, n]);
+  return A(() => {
+    if (t) {
+      const a = setTimeout(() => {
+        t();
+      }, 200);
+      return () => clearTimeout(a);
+    }
+  }, [n, t]), {
+    style: V(() => ({
+      opacity: e ? 1 : 0,
+      transform: e ? "translateY(0)" : n ? "translateY(100%)" : "translateY(-100%)",
+      transition: "opacity 200ms ease-in-out, transform 200ms ease-in-out"
+    }), [e, n]),
+    animationClass: o
+  };
+}, Ke = () => /* @__PURE__ */ m(
+  "div",
+  {
+    "data-testid": "spinner",
+    className: "animate-spin rounded-full h-4 w-4 border-2 border-gray-300 border-t-gray-600"
+  }
+), Le = ({
+  command: r,
+  timestamp: e,
+  status: n
+}) => /* @__PURE__ */ _("div", { className: "flex items-center gap-2 font-mono text-sm", children: [
+  /* @__PURE__ */ _("span", { className: "text-gray-200", children: [
+    "> ",
+    r.split(" ").map((t, o) => {
+      const s = t.startsWith("<") && t.endsWith(">");
+      return /* @__PURE__ */ _(
+        "span",
+        {
+          className: s ? "text-green-400" : "text-gray-200",
+          children: [
+            o > 0 ? " " : "",
+            t
+          ]
+        },
+        o
+      );
+    })
+  ] }),
+  /* @__PURE__ */ m("span", { className: "text-gray-400", children: "·" }),
+  /* @__PURE__ */ m("span", { className: "text-gray-500", children: e }),
+  n === T.Pending && /* @__PURE__ */ m(Ke, {}),
+  n === T.Success && /* @__PURE__ */ m(
+    "div",
+    {
+      "data-testid": "success-indicator",
+      className: "w-4 h-4 rounded-full bg-green-500"
+    }
+  ),
+  (n === T.Timeout || n === T.Failure) && /* @__PURE__ */ m(
+    "div",
+    {
+      "data-testid": "success-indicator",
+      className: "w-4 h-4 rounded-full bg-red-500"
+    }
+  )
+] }), Ve = ({ output: r, outputRef: e }) => {
+  const n = F(), t = w(() => {
+    if (e.current) {
+      const o = e.current;
+      requestAnimationFrame(() => {
+        o.scrollTop = o.scrollHeight;
+      });
+    }
+  }, [e]);
+  return A(() => {
+    if (t(), e.current) {
+      const o = e.current.getElementsByTagName("img"), s = o[o.length - 1];
+      if (s && !s.complete)
+        return s.addEventListener("load", t), () => s.removeEventListener("load", t);
+    }
+  }, [r, t, e]), /* @__PURE__ */ m(
+    "div",
+    {
+      ref: e,
+      className: "h-full overflow-y-auto border border-gray-700 rounded-lg p-3 text-left",
+      "data-testid": "citadel-command-output",
+      children: r.map((o, s) => /* @__PURE__ */ _("div", { className: "mb-4 last:mb-0", children: [
+        /* @__PURE__ */ m(
+          Le,
+          {
+            command: o.command.join(" "),
+            timestamp: new Date(o.timestamp).toLocaleTimeString(),
+            status: o.result.status
+          }
+        ),
+        /* @__PURE__ */ m("pre", { className: `text-gray-200 whitespace-pre font-mono ${n.outputFontSize}`, children: o.result.render() })
+      ] }, s))
+    }
+  );
+}, We = {
   blink: {
     character: "▋",
     speed: 530,
@@ -745,19 +829,19 @@ Check the definition of the ${u.join(".")} command and update the return type fo
     speed: 120,
     color: "#fff"
   }
-}, X = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"], Z = ["|", "/", "-", "\\"], Oe = ({
+}, ee = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"], ne = ["|", "/", "-", "\\"], qe = ({
   style: r = { type: "blink" },
   isValid: e = !0,
   errorMessage: n
 }) => {
   const t = V(() => ({
-    ...Me[r.type],
+    ...We[r.type],
     ...r
-  }), [r]), [o, s] = R(!0), [i, c] = R(0);
-  _(() => {
+  }), [r]), [o, s] = R(!0), [a, l] = R(0);
+  A(() => {
     if (t.speed === 0) return;
     const u = setInterval(() => {
-      t.type === "blink" ? s((p) => !p) : ["spin", "bbs"].includes(t.type) && c((p) => (p + 1) % (t.type === "bbs" ? Z.length : X.length));
+      t.type === "blink" ? s((p) => !p) : ["spin", "bbs"].includes(t.type) && l((p) => (p + 1) % (t.type === "bbs" ? ne.length : ee.length));
     }, t.speed);
     return () => clearInterval(u);
   }, [t.type, t.speed]);
@@ -771,11 +855,11 @@ Check the definition of the ${u.join(".")} command and update the return type fo
       className: `command-cursor ${e ? "" : "animate-shake"}`,
       style: d,
       title: n,
-      children: !e && n ? "✗" : ["spin", "bbs"].includes(t.type) ? (t.type === "bbs" ? Z : X)[i] : t.type === "solid" || o ? t.character : " "
+      children: !e && n ? "✗" : ["spin", "bbs"].includes(t.type) ? (t.type === "bbs" ? ne : ee)[a] : t.type === "solid" || o ? t.character : " "
     }
   ) });
 };
-function $e(r, e) {
+function Ye(r, e) {
   switch (e.type) {
     case "set":
       return C.debug(`[inputStateReducer] InputState changing from ${r} to ${e.state}`), e.state;
@@ -783,104 +867,102 @@ function $e(r, e) {
       return r;
   }
 }
-const Ke = () => {
-  const { state: r } = me(), e = B(), n = de(), t = K(), [o, s] = we($e, "idle"), i = (a) => {
-    s({ type: "set", state: a });
-  }, c = w(() => {
-    const g = e.getCompletions(t.path())[0] || t.nullSegment;
-    return C.debug("[getNextExpectedSegment] ", g), g;
-  }, [e, t]), d = w(() => e.getCompletions_s(t.path()).map((g) => e.getCommand([...t.path(), g])).filter((g) => g !== void 0), [e, t]), l = w((a, g) => {
-    if (!a) return g;
-    const h = g.reduce((f, x) => {
-      const v = c();
+const Be = () => {
+  const { state: r } = X(), e = B(), n = ue(), t = O(), [o, s] = ye(Ye, "idle"), a = (i) => {
+    s({ type: "set", state: i });
+  }, l = w(() => {
+    const h = e.getCompletions(t.path())[0] || t.nullSegment;
+    return C.debug("[getNextExpectedSegment] ", h), h;
+  }, [e, t]), d = w(() => e.getCompletions_s(t.path()).map((h) => e.getCommand([...t.path(), h])).filter((h) => h !== void 0), [e, t]), c = w((i, h) => {
+    if (!i) return h;
+    const g = h.reduce((f, x) => {
+      const v = l();
       return (v == null ? void 0 : v.type) === "word" && f.set(v.name, x), f;
     }, /* @__PURE__ */ new Map());
-    return Array.from(h.values()).filter(() => {
-      const f = c();
-      return f.type !== "word" ? !1 : f.name.toLowerCase().startsWith(a.toLowerCase());
+    return Array.from(g.values()).filter(() => {
+      const f = l();
+      return f.type !== "word" ? !1 : f.name.toLowerCase().startsWith(i.toLowerCase());
     });
-  }, [c]), u = w((a) => {
-    const h = e.getCompletions(t.path()).filter((k) => k.type === "word").filter(
-      (k) => k.name.toLowerCase().startsWith(a.toLowerCase())
+  }, [l]), u = w((i) => {
+    const g = e.getCompletions(t.path()).filter((S) => S.type === "word").filter(
+      (S) => S.name.toLowerCase().startsWith(i.toLowerCase())
     );
-    return h.length === 1 ? h[0] : t.nullSegment;
-  }, [e, t]), p = w((a) => {
-    const g = t.path(), h = e.getCompletions(g);
-    return h.length === 0 && a ? !1 : h.some((f) => f.type === "argument") ? !0 : h.some(
-      (f) => f.type === "word" && f.name.toLowerCase().startsWith(a.toLowerCase())
+    return g.length === 1 ? g[0] : t.nullSegment;
+  }, [e, t]), p = w((i) => {
+    const h = t.path(), g = e.getCompletions(h);
+    return g.length === 0 && i ? !1 : g.some((f) => f.type === "argument") ? !0 : g.some(
+      (f) => f.type === "word" && f.name.toLowerCase().startsWith(i.toLowerCase())
     );
-  }, [e, t]), S = w((a) => {
-    C.debug("[tryAutoComplete] input: ", a);
-    const g = u(a);
-    return !g || g.name === a ? new ie() : (C.debug("[tryAutoComplete] result: ", g), g);
-  }, [u]), y = w((a, g) => {
+  }, [e, t]), k = w((i) => {
+    C.debug("[tryAutoComplete] input: ", i);
+    const h = u(i);
+    return !h || h.name === i ? new ce() : (C.debug("[tryAutoComplete] result: ", h), h);
+  }, [u]), y = w((i, h) => {
     if (r.history.position === null) {
-      if (g.setCurrentInput(a), C.debug("[useCommandParser][handleInputChange] newValue: ", a), o === "entering_argument") {
-        const h = ee(a);
-        if (h.isQuoted)
-          if (h.isComplete) {
-            const k = c();
-            if (k.type === "argument") {
-              const f = k;
-              f.value = a.trim() || "", C.debug("[useCommandParser][handleInputChange][entering_command] pushing: ", f), t.push(f), g.setCurrentInput(""), i("idle");
+      if (h.setCurrentInput(i), C.debug("[useCommandParser][handleInputChange] newValue: ", i), o === "entering_argument") {
+        const g = te(i);
+        if (g.isQuoted)
+          if (g.isComplete) {
+            const S = l();
+            if (S.type === "argument") {
+              const f = S;
+              f.value = i.trim() || "", C.debug("[useCommandParser][handleInputChange][entering_command] pushing: ", f), t.push(f), h.setCurrentInput(""), a("idle");
               return;
             }
           } else
             return;
-        else if (h.isComplete) {
-          const k = c();
-          k.value = a.trim() || "", C.debug("[useCommandParser][handleInputChange][entering_command] pushing: ", k), t.push(k), g.setCurrentInput(""), i("idle");
+        else if (g.isComplete) {
+          const S = l();
+          S.value = i.trim() || "", C.debug("[useCommandParser][handleInputChange][entering_command] pushing: ", S), t.push(S), h.setCurrentInput(""), a("idle");
           return;
         } else
           return;
       }
       if (o == "entering_command") {
-        const h = S(a);
-        if (h.type === "word") {
-          C.debug("[useCommandParser][handleInputChange][entering_command] pushing: ", h), t.push(h), g.setCurrentInput(""), i("idle");
+        const g = k(i);
+        if (g.type === "word") {
+          C.debug("[useCommandParser][handleInputChange][entering_command] pushing: ", g), t.push(g), h.setCurrentInput(""), a("idle");
           return;
         }
       }
     }
-  }, [S, r, c, o, t]), z = w((a) => {
-    a.setCurrentInput(""), a.setIsEnteringArg(!1), t.clear(), i("idle");
-  }, [t]), E = w((a, g, h) => {
-    if (!(a.key === "Backspace" || a.key === "Enter" || a.key === "ArrowUp" || a.key === "ArrowDown" || a.key === "ArrowLeft" || a.key === "ArrowRight" || a.key === "Escape" || a.key === "Delete" || a.key === "Home" || a.key === "End" || a.key.length === 1))
+  }, [k, r, l, o, t]), E = w((i) => {
+    i.setCurrentInput(""), i.setIsEnteringArg(!1), t.clear(), a("idle");
+  }, [t]), N = w((i, h, g) => {
+    if (!(i.key === "Backspace" || i.key === "Enter" || i.key === "ArrowUp" || i.key === "ArrowDown" || i.key === "ArrowLeft" || i.key === "ArrowRight" || i.key === "Escape" || i.key === "Delete" || i.key === "Home" || i.key === "End" || i.key.length === 1))
       return !0;
-    const { currentInput: f, isEnteringArg: x } = g, v = ee(f);
-    switch (a.key) {
+    const { currentInput: f, isEnteringArg: x } = h, v = te(f);
+    switch (i.key) {
       case "Backspace":
-        return f === "" && (a.preventDefault(), t.size() > 0 && t.pop(), i("idle")), !0;
+        return f === "" && (i.preventDefault(), t.size() > 0 && t.pop(), a("idle")), !0;
       case "Enter": {
-        if (a.preventDefault(), v.isQuoted && !v.isComplete)
+        if (i.preventDefault(), v.isQuoted && !v.isComplete)
           return !0;
         if (o === "entering_argument" || x && f.trim()) {
-          const H = c();
-          H.value = f, C.debug("[handleKeyDown][Enter]['entering_argument'] pushing: ", H), t.push(H);
+          const G = l();
+          G.value = f, C.debug("[handleKeyDown][Enter]['entering_argument'] pushing: ", G), t.push(G);
         }
         const I = t.path(), P = e.getCommand(I);
-        if (P) {
-          const T = P.segments.filter((j) => j.type === "argument"), H = t.arguments;
-          if (T.length > H.length)
-            return !1;
-        }
-        return C.debug("[handleKeyDown][Enter] calling actions.executeCommand. segmentStack: ", t), h.executeCommand(), n.addStoredCommand(t.toArray()), z(h), !0;
+        if (!P)
+          return !1;
+        const $ = P.segments.filter((M) => M.type === "argument"), K = t.arguments;
+        return $.length > K.length ? !1 : (C.debug("[handleKeyDown][Enter] calling actions.executeCommand. segmentStack: ", t), g.executeCommand(), n.addStoredCommand(t.toArray()), E(g), !0);
       }
       case "ArrowUp":
-        return a.preventDefault(), (async () => {
+        return i.preventDefault(), (async () => {
           const I = await n.navigateHistory("up", t.toArray());
-          return I.segments && (t.clear(), t.pushAll(I.segments), h.setCurrentInput("")), !0;
+          return I.segments && (t.clear(), t.pushAll(I.segments), g.setCurrentInput("")), !0;
         })();
       case "ArrowDown":
-        return a.preventDefault(), (async () => {
+        return i.preventDefault(), (async () => {
           const I = await n.navigateHistory("down", t.toArray());
-          return I.segments && (t.clear(), t.pushAll(I.segments), h.setCurrentInput("")), !0;
+          return I.segments && (t.clear(), t.pushAll(I.segments), g.setCurrentInput("")), !0;
         })();
       default: {
-        if (!x && a.key.length === 1) {
-          const I = f + a.key;
+        if (!x && i.key.length === 1) {
+          const I = f + i.key;
           if (!p(I))
-            return a.preventDefault(), !1;
+            return i.preventDefault(), !1;
         }
         return !0;
       }
@@ -888,30 +970,31 @@ const Ke = () => {
   }, [
     o,
     p,
-    c,
+    l,
     n,
-    z,
+    E,
+    e,
     t
   ]);
   return {
     handleInputChange: y,
-    handleKeyDown: E,
+    handleKeyDown: N,
     inputState: o,
-    setInputStateWithLogging: i,
+    setInputStateWithLogging: a,
     // Expose internal functions for testing
-    findMatchingCommands: l,
+    findMatchingCommands: c,
     getAutocompleteSuggestion: u,
     getAvailableNodes: d,
-    getNextExpectedSegment: c,
+    getNextExpectedSegment: l,
     isValidCommandInput: p
   };
 };
-function ee(r) {
+function te(r) {
   const e = [];
   let n = "", t = !1, o;
   for (let s = 0; s < r.length; s++) {
-    const i = r[s];
-    (i === '"' || i === "'") && (!t || i === o) ? t ? (e.push(n), n = "", t = !1, o = void 0) : (n && (e.push(n), n = ""), t = !0, o = i) : !t && i === " " ? n && (e.push(n), n = "") : n += i;
+    const a = r[s];
+    (a === '"' || a === "'") && (!t || a === o) ? t ? (e.push(n), n = "", t = !1, o = void 0) : (n && (e.push(n), n = ""), t = !0, o = a) : !t && a === " " ? n && (e.push(n), n = "") : n += a;
   }
   return {
     words: e,
@@ -921,9 +1004,9 @@ function ee(r) {
     isComplete: !t && !n
   };
 }
-const Le = () => {
-  const r = K(), [e, n] = R(0);
-  return _(() => {
+const Ge = () => {
+  const r = O(), [e, n] = R(0);
+  return A(() => {
     const t = {
       update: () => {
         n((o) => o + 1);
@@ -933,31 +1016,31 @@ const Le = () => {
       r.unsubscribe(t);
     };
   }, [r]), e;
-}, Ve = ({
+}, Je = ({
   state: r,
   actions: e
 }) => {
-  const n = U(null), t = B(), o = K(), {
+  const n = H(null), t = B(), o = O(), {
     handleKeyDown: s,
-    handleInputChange: i,
-    inputState: c,
+    handleInputChange: a,
+    inputState: l,
     setInputStateWithLogging: d,
-    getNextExpectedSegment: l
-  } = Ke(), [u, p] = R(!1), S = $(), y = Le(), z = async (x) => {
+    getNextExpectedSegment: c
+  } = Be(), [u, p] = R(!1), k = F(), y = Ge(), E = async (x) => {
     const v = s(x, r, e);
     await Promise.resolve(v) === !1 && (p(!0), setTimeout(() => p(!1), 500));
-  }, E = (x) => {
-    i(x.target.value, e);
-  }, a = (x) => {
+  }, N = (x) => {
+    a(x.target.value, e);
+  }, i = (x) => {
     x.preventDefault();
     const v = x.clipboardData.getData("text");
-    i(v, e);
+    a(v, e);
   };
-  _(() => {
-    n.current && n.current.focus(), c !== "entering_command" && d("entering_command");
-  }, [c, d]), _(() => {
-    if (c !== "idle") return;
-    const x = l();
+  A(() => {
+    n.current && n.current.focus(), l !== "entering_command" && d("entering_command");
+  }, [l, d]), A(() => {
+    if (l !== "idle") return;
+    const x = c();
     let v = "idle";
     switch (x.type) {
       case "word":
@@ -968,31 +1051,31 @@ const Le = () => {
         break;
     }
     d(v);
-  }, [y, c, l, d, e]);
-  const [g, h] = R([]);
-  _(() => {
-    const x = [], v = o.toArray().map((P, T) => {
+  }, [y, l, c, d, e]);
+  const [h, g] = R([]);
+  A(() => {
+    const x = [], v = o.toArray().map((P, $) => {
       x.push(P.name);
-      const H = t.hasNextSegment(x);
+      const K = t.hasNextSegment(x);
       if (P.type === "argument") {
-        const j = P;
-        return /* @__PURE__ */ N(L.Fragment, { children: [
-          /* @__PURE__ */ m("span", { className: "text-gray-200 whitespace-pre", children: j.value }),
-          T < o.size() && H && /* @__PURE__ */ m("span", { className: "text-gray-200 whitespace-pre", children: " " })
-        ] }, "arg-" + j.name + j.value);
+        const M = P;
+        return /* @__PURE__ */ _(L.Fragment, { children: [
+          /* @__PURE__ */ m("span", { className: "text-gray-200 whitespace-pre", children: M.value }),
+          $ < o.size() && K && /* @__PURE__ */ m("span", { className: "text-gray-200 whitespace-pre", children: " " })
+        ] }, "arg-" + M.name + M.value);
       }
-      return /* @__PURE__ */ N(L.Fragment, { children: [
+      return /* @__PURE__ */ _(L.Fragment, { children: [
         /* @__PURE__ */ m("span", { className: "text-blue-400 whitespace-pre", children: P.name }),
-        T < o.size() && H && /* @__PURE__ */ m("span", { className: "text-blue-400 whitespace-pre", children: " " })
+        $ < o.size() && K && /* @__PURE__ */ m("span", { className: "text-blue-400 whitespace-pre", children: " " })
       ] }, "word-" + P.name);
     });
-    h([/* @__PURE__ */ m("div", { className: "flex items-center gap-1", "data-testid": "user-input-area", children: v }, "{segmentStackVersion}")]);
+    g([/* @__PURE__ */ m("div", { className: "flex items-center gap-1", "data-testid": "user-input-area", children: v }, "{segmentStackVersion}")]);
   }, [y, t, o]);
-  const [k, f] = R("");
-  return _(() => {
-    const x = l();
+  const [S, f] = R("");
+  return A(() => {
+    const x = c();
     x.type === "argument" ? f(x.name) : f("");
-  }, [y, l]), /* @__PURE__ */ N("div", { className: "flex flex-col w-full bg-gray-900 rounded-lg p-4", children: [
+  }, [y, c]), /* @__PURE__ */ _("div", { className: "flex flex-col w-full bg-gray-900 rounded-lg p-4", children: [
     /* @__PURE__ */ m("style", { children: `
         @keyframes subtleGlow {
           0%, 100% { box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
@@ -1002,11 +1085,11 @@ const Le = () => {
           animation: subtleGlow 0.4s ease-in-out;
         }
       ` }),
-    /* @__PURE__ */ N("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ _("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ m("div", { className: "text-gray-400 font-mono", children: ">" }),
-      /* @__PURE__ */ N("div", { className: "flex-1 font-mono flex items-center", children: [
-        g,
-        /* @__PURE__ */ N("div", { className: "relative flex-1", children: [
+      /* @__PURE__ */ _("div", { className: "flex-1 font-mono flex items-center", children: [
+        h,
+        /* @__PURE__ */ _("div", { className: "relative flex-1", children: [
           /* @__PURE__ */ m(
             "input",
             {
@@ -1014,14 +1097,14 @@ const Le = () => {
               type: "text",
               role: "textbox",
               value: r.currentInput,
-              onChange: E,
-              onKeyDown: z,
-              onPaste: a,
+              onChange: N,
+              onKeyDown: E,
+              onPaste: i,
               "data-testid": "citadel-command-input",
               className: `w-full bg-transparent outline-none text-gray-200 caret-transparent ${u ? "invalid-input-animation" : ""}`,
               spellCheck: !1,
               autoComplete: "off",
-              placeholder: k
+              placeholder: S
             }
           ),
           /* @__PURE__ */ m(
@@ -1033,12 +1116,12 @@ const Le = () => {
                 transition: "left 0.05s ease-out"
               },
               children: /* @__PURE__ */ m(
-                Oe,
+                qe,
                 {
                   style: {
-                    type: S.cursorType ?? A.cursorType,
-                    color: S.cursorColor || A.cursorColor,
-                    speed: S.cursorSpeed || A.cursorSpeed
+                    type: k.cursorType ?? z.cursorType,
+                    color: k.cursorColor || z.cursorColor,
+                    speed: k.cursorSpeed || z.cursorSpeed
                   }
                 }
               )
@@ -1048,105 +1131,27 @@ const Le = () => {
       ] })
     ] })
   ] });
-}, We = () => /* @__PURE__ */ m(
-  "div",
-  {
-    "data-testid": "spinner",
-    className: "animate-spin rounded-full h-4 w-4 border-2 border-gray-300 border-t-gray-600"
-  }
-), qe = ({
-  command: r,
-  timestamp: e,
-  status: n
-}) => /* @__PURE__ */ N("div", { className: "flex items-center gap-2 font-mono text-sm", children: [
-  /* @__PURE__ */ N("span", { className: "text-gray-200", children: [
-    "> ",
-    r.split(" ").map((t, o) => {
-      const s = t.startsWith("<") && t.endsWith(">");
-      return /* @__PURE__ */ N(
-        "span",
-        {
-          className: s ? "text-green-400" : "text-gray-200",
-          children: [
-            o > 0 ? " " : "",
-            t
-          ]
-        },
-        o
-      );
-    })
-  ] }),
-  /* @__PURE__ */ m("span", { className: "text-gray-400", children: "·" }),
-  /* @__PURE__ */ m("span", { className: "text-gray-500", children: e }),
-  n === M.Pending && /* @__PURE__ */ m(We, {}),
-  n === M.Success && /* @__PURE__ */ m(
-    "div",
-    {
-      "data-testid": "success-indicator",
-      className: "w-4 h-4 rounded-full bg-green-500"
-    }
-  ),
-  (n === M.Timeout || n === M.Failure) && /* @__PURE__ */ m(
-    "div",
-    {
-      "data-testid": "success-indicator",
-      className: "w-4 h-4 rounded-full bg-red-500"
-    }
-  )
-] }), Ye = ({ output: r, outputRef: e }) => {
-  const n = $(), t = w(() => {
-    if (e.current) {
-      const o = e.current;
-      requestAnimationFrame(() => {
-        o.scrollTop = o.scrollHeight;
-      });
-    }
-  }, [e]);
-  return _(() => {
-    if (t(), e.current) {
-      const o = e.current.getElementsByTagName("img"), s = o[o.length - 1];
-      if (s && !s.complete)
-        return s.addEventListener("load", t), () => s.removeEventListener("load", t);
-    }
-  }, [r, t, e]), /* @__PURE__ */ m(
-    "div",
-    {
-      ref: e,
-      className: "h-full overflow-y-auto border border-gray-700 rounded-lg p-3 text-left",
-      children: r.map((o, s) => /* @__PURE__ */ N("div", { className: "mb-4 last:mb-0", children: [
-        /* @__PURE__ */ m(
-          qe,
-          {
-            command: o.command.join(" "),
-            timestamp: new Date(o.timestamp).toLocaleTimeString(),
-            status: o.result.status
-          }
-        ),
-        /* @__PURE__ */ m("pre", { className: `text-gray-200 whitespace-pre font-mono ${n.outputFontSize}`, children: o.result.render() })
-      ] }, s))
-    }
-  );
-}, Be = () => {
-  const r = B(), e = $(), n = K(), t = "h-12 mt-2 border-t border-gray-700 px-4", o = "text-gray-300 pt-2", s = r.getCompletions(n.path());
+}, Qe = () => {
+  const r = B(), e = F(), n = O(), t = "h-12 mt-2 border-t border-gray-700 px-4", o = "text-gray-300 pt-2", s = r.getCompletions(n.path());
   C.debug("[AvailableCommands] nextCommandSegments: ", s);
-  const i = L.useMemo(() => {
+  const a = L.useMemo(() => {
     if (e.includeHelpCommand) {
-      const l = s.filter((p) => p.name !== "help"), u = s.find((p) => p.name === "help");
-      return [...l, ...u ? [u] : []];
+      const c = s.filter((p) => p.name !== "help"), u = s.find((p) => p.name === "help");
+      return [...c, ...u ? [u] : []];
     }
     return s;
-  }, [s, e.includeHelpCommand]), c = s.some((l) => l.type === "argument"), d = s[0];
-  return /* @__PURE__ */ m("div", { className: t, "data-testid": "available-commands", children: /* @__PURE__ */ m("div", { className: o, children: c ? s.length > 0 ? /* @__PURE__ */ N(he, { children: [
+  }, [s, e.includeHelpCommand]), l = s.some((c) => c.type === "argument"), d = s[0];
+  return /* @__PURE__ */ m("div", { className: t, "data-testid": "available-commands", children: /* @__PURE__ */ m("div", { className: o, children: l ? s.length > 0 ? /* @__PURE__ */ _(we, { children: [
     /* @__PURE__ */ m("span", { className: "text-blue-400", children: d.name }),
-    d.description && /* @__PURE__ */ N("span", { className: "text-gray-400 ml-2", children: [
+    d.description && /* @__PURE__ */ _("span", { className: "text-gray-400 ml-2", children: [
       "- ",
       d.description
     ] })
-  ] }) : null : /* @__PURE__ */ m("div", { className: "flex flex-wrap gap-2", children: i == null ? void 0 : i.map((l) => {
-    const u = i == null ? void 0 : i.reduce((p, S) => {
-      if (S === l) return p;
+  ] }) : null : /* @__PURE__ */ m("div", { className: "flex flex-wrap gap-2", children: a == null ? void 0 : a.map((c) => {
+    const u = a == null ? void 0 : a.reduce((p, k) => {
+      if (k === c) return p;
       let y = 0;
-      for (; y < l.name.length && y < S.name.length && l.name[y].toLowerCase() === S.name[y].toLowerCase(); )
+      for (; y < c.name.length && y < k.name.length && c.name[y].toLowerCase() === k.name[y].toLowerCase(); )
         y++;
       return Math.max(p, y + 1);
     }, 1);
@@ -1154,15 +1159,95 @@ const Le = () => {
       "div",
       {
         className: "px-2 py-1 rounded bg-gray-800 mr-2 last:mr-0",
-        children: /* @__PURE__ */ N("span", { className: "font-mono text-white", children: [
-          /* @__PURE__ */ m("strong", { className: "underline", children: l.name.slice(0, u) }),
-          l.name.slice(u)
+        children: /* @__PURE__ */ _("span", { className: "font-mono text-white", children: [
+          /* @__PURE__ */ m("strong", { className: "underline", children: c.name.slice(0, u) }),
+          c.name.slice(u)
         ] })
       },
-      l.name
+      c.name
     );
   }) }) }) });
-}, ne = `:host {
+}, pe = ({
+  state: r,
+  actions: e,
+  outputRef: n
+}) => /* @__PURE__ */ _("div", { className: "innerContainer", children: [
+  /* @__PURE__ */ m("div", { className: "flex-1 min-h-0 pt-3 px-4", children: /* @__PURE__ */ m(Ve, { output: r.output, outputRef: n }) }),
+  /* @__PURE__ */ _("div", { children: [
+    /* @__PURE__ */ m(Je, { state: r, actions: e }),
+    /* @__PURE__ */ m(Qe, {})
+  ] })
+] }), Xe = () => {
+  const [r, e] = R(!1), [n, t] = R(!1), o = F(), [s, a] = R(() => o.initialHeight || null), l = H(null), d = H(null), c = H(!1), u = H(0), p = H(0), { state: k, actions: y } = X();
+  He({
+    onOpen: () => e(!0),
+    onClose: () => t(!0),
+    isVisible: r,
+    showCitadelKey: o.showCitadelKey || "."
+  });
+  const E = w((g) => {
+    var v;
+    if (!c.current) return;
+    const S = g.clientY - u.current, f = (v = o.maxHeight) != null && v.endsWith("vh") ? window.innerHeight * parseInt(o.maxHeight, 10) / 100 : parseInt(o.maxHeight || "80vh", 10), x = Math.min(
+      Math.max(p.current - S, parseInt(o.minHeight || "200", 10)),
+      f
+    );
+    d.current && (d.current.style.height = `${x}px`, d.current.style.bottom = "0", a(`${x}px`));
+  }, [o.maxHeight, o.minHeight]), N = w(() => {
+    c.current = !1, document.documentElement.style.userSelect = "", document.documentElement.style.webkitUserSelect = "", document.documentElement.style.mozUserSelect = "", document.documentElement.style.msUserSelect = "", document.removeEventListener("mousemove", E), document.removeEventListener("mouseup", N);
+  }, [E]), i = w((g) => {
+    d.current && (c.current = !0, u.current = g.clientY, p.current = d.current.offsetHeight, document.documentElement.style.userSelect = "none", document.documentElement.style.webkitUserSelect = "none", document.documentElement.style.mozUserSelect = "none", document.documentElement.style.msUserSelect = "none", document.addEventListener("mousemove", E), document.addEventListener("mouseup", N));
+  }, [E, N]);
+  A(() => () => {
+    document.removeEventListener("mousemove", E), document.removeEventListener("mouseup", N);
+  }, [E, N]);
+  const h = w(() => {
+    n && (e(!1), t(!1));
+  }, [n]);
+  return $e({
+    isVisible: r,
+    isClosing: n,
+    onAnimationComplete: h
+  }), r ? /* @__PURE__ */ _(
+    "div",
+    {
+      ref: d,
+      className: `panelContainer ${r ? "citadel_slideUp" : ""} ${n ? "citadel_slideDown" : ""}`,
+      style: {
+        ...s ? { height: s } : void 0,
+        maxHeight: o.maxHeight
+      },
+      children: [
+        /* @__PURE__ */ m("div", { className: "resizeHandle", onMouseDown: i }),
+        /* @__PURE__ */ m(
+          pe,
+          {
+            state: k,
+            actions: y,
+            outputRef: l
+          }
+        )
+      ]
+    }
+  ) : null;
+}, Ze = () => {
+  const { state: r, actions: e } = X(), n = H(null);
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: "inlineContainer",
+      "data-testid": "citadel-inline-container",
+      children: /* @__PURE__ */ m(
+        pe,
+        {
+          state: r,
+          actions: e,
+          outputRef: n
+        }
+      )
+    }
+  );
+}, re = `:host {
   --citadel-bg: rgb(17, 24, 39);
   --citadel-text: rgba(255, 255, 255, 0.87);
   --citadel-border: rgb(55, 65, 81);
@@ -1173,23 +1258,38 @@ const Le = () => {
   --citadel-default-height: 35vh;
   --citadel-error: rgb(239, 68, 68);
 
-  height: var(--citadel-default-height);
-  max-height: var(--citadel-max-height);
-  min-height: var(--citadel-min-height);
-  width: 100%;
+  display: block;
+  pointer-events: auto;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 
+:host([data-display-mode="panel"]) {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
+  width: 100%;
+  height: var(--citadel-default-height);
+  max-height: var(--citadel-max-height);
+  min-height: var(--citadel-min-height);
   z-index: 2147483647; /* Maximum z-index value */
   overflow: hidden;
+}
 
-  pointer-events: auto;
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+:host([data-display-mode="inline"]) {
+  position: relative;
+  bottom: auto;
+  left: auto;
+  right: auto;
+  z-index: auto;
+  width: 100%;
+  height: 100%;
+  max-height: none;
+  min-height: 0;
+  overflow: hidden;
 }
 
 button {
@@ -1251,10 +1351,9 @@ a:hover {
 .text-left {
   text-align: left;
 }
+`, oe = `/* Keep only component-specific styles here */
 
-`, te = `/* Keep only component-specific styles here */
-
-.container {
+.panelContainer {
   position: fixed;
   height: var(--citadel-default-height);
   min-height: var(--citadel-min-height);
@@ -1272,6 +1371,7 @@ a:hover {
 
 .innerContainer {
   height: 100%;
+  flex: 1;
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -1322,10 +1422,21 @@ a:hover {
 .citadel_slideDown {
   animation: citadel_slideDown 0.2s ease-out forwards;
 }
-`, re = `@tailwind base;
+
+.inlineContainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--citadel-bg);
+  overflow: hidden;
+  box-sizing: border-box;
+}
+`, se = `@tailwind base;
 @tailwind components;
 @tailwind utilities;
-`, Ge = `*, ::before, ::after {
+`, en = `*, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
@@ -2142,112 +2253,75 @@ video {
 .last\\:mr-0:last-child {
   margin-right: 0px;
 }
-`, rn = ({
-  config: r = A,
-  commandRegistry: e = new J(),
+`, cn = ({
+  config: r = z,
+  commandRegistry: e = new Q(),
   containerId: n = null
-}) => (_(() => {
-  C.configure({
-    level: r.logLevel || A.logLevel || W.ERROR,
-    prefix: "[Citadel]"
-  });
-  const t = new ue(e, r), o = n ? document.getElementById(n) : document.body;
-  return o ? o.appendChild(t) : (console.warn(`Container with id "${n}" not found, falling back to body`), document.body.appendChild(t)), () => {
-    var s;
-    (s = t.parentElement) == null || s.removeChild(t);
-  };
-}, [e, n, r]), null);
-class ue extends HTMLElement {
+}) => {
+  const t = H(null), o = r.displayMode ?? z.displayMode ?? "panel";
+  return A(() => {
+    C.configure({
+      level: r.logLevel || z.logLevel || W.ERROR,
+      prefix: "[Citadel]"
+    });
+    const s = new he(e, r), a = o === "inline" && !n, l = a ? t.current : n ? document.getElementById(n) : document.body;
+    if (l)
+      l.appendChild(s);
+    else {
+      if (a) {
+        console.warn("[Citadel] No host available for inline mode; skipping mount.");
+        return;
+      }
+      console.warn(`Container with id "${n}" not found, falling back to body`), document.body.appendChild(s);
+    }
+    return () => {
+      var d;
+      (d = s.parentElement) == null || d.removeChild(s);
+    };
+  }, [e, n, r, o]), o === "inline" && !n ? /* @__PURE__ */ m("div", { ref: t, style: { width: "100%", height: "100%" } }) : null;
+};
+class he extends HTMLElement {
   constructor(n, t) {
+    var s;
     super();
     b(this, "shadow");
     b(this, "root", null);
     b(this, "commandRegistry");
     b(this, "config");
     this.shadow = this.attachShadow({ mode: "open" }), this.commandRegistry = n, this.config = t;
+    const o = ((s = this.config) == null ? void 0 : s.displayMode) ?? "panel";
+    this.setAttribute("data-display-mode", o);
   }
   connectedCallback() {
     try {
-      const t = [ne, te, re, Ge].map((o) => {
+      const t = [re, oe, se, en].map((o) => {
         const s = new CSSStyleSheet();
         return s.replaceSync(o), s;
       });
       this.shadow.adoptedStyleSheets = [...t];
     } catch {
-      const t = [ne, te, re].join(`
+      const t = [re, oe, se].join(`
 `), o = document.createElement("style");
       o.textContent = t, this.shadow.appendChild(o);
     }
     const n = document.createElement("div");
-    n.id = "citadel-root", this.shadow.appendChild(n), this.root = be(n), this.root.render(
-      /* @__PURE__ */ m(Fe, { config: this.config || A, commandRegistry: this.commandRegistry, children: /* @__PURE__ */ m(Je, {}) })
+    n.id = "citadel-root", n.style.width = "100%", n.style.height = "100%", this.shadow.appendChild(n), this.root = xe(n), this.root.render(
+      /* @__PURE__ */ m(Ie, { config: this.config || z, commandRegistry: this.commandRegistry, children: /* @__PURE__ */ m(nn, {}) })
     );
   }
 }
-customElements.define("citadel-element", ue);
-const Je = () => {
-  const [r, e] = R(!1), [n, t] = R(!1), o = $(), [s, i] = R(() => o.initialHeight || null), c = U(null), d = U(null), l = U(!1), u = U(0), p = U(0), { state: S, actions: y } = me();
-  ye({
-    onOpen: () => e(!0),
-    onClose: () => t(!0),
-    isVisible: r,
-    showCitadelKey: o.showCitadelKey || "."
-  });
-  const z = w((h) => {
-    d.current && (l.current = !0, u.current = h.clientY, p.current = d.current.offsetHeight, document.documentElement.style.userSelect = "none", document.documentElement.style.webkitUserSelect = "none", document.documentElement.style.mozUserSelect = "none", document.documentElement.style.msUserSelect = "none", document.addEventListener("mousemove", E), document.addEventListener("mouseup", a));
-  }, []), E = w((h) => {
-    var v;
-    if (!l.current) return;
-    const k = h.clientY - u.current, f = (v = o.maxHeight) != null && v.endsWith("vh") ? window.innerHeight * parseInt(o.maxHeight, 10) / 100 : parseInt(o.maxHeight || "80vh", 10), x = Math.min(
-      Math.max(p.current - k, parseInt(o.minHeight || "200", 10)),
-      f
-    );
-    d.current && (d.current.style.height = `${x}px`, d.current.style.bottom = "0", i(`${x}px`));
-  }, [o.maxHeight, o.minHeight]), a = w(() => {
-    l.current = !1, document.documentElement.style.userSelect = "", document.documentElement.style.webkitUserSelect = "", document.documentElement.style.mozUserSelect = "", document.documentElement.style.msUserSelect = "", document.removeEventListener("mousemove", E), document.removeEventListener("mouseup", a);
-  }, [E]);
-  _(() => () => {
-    document.removeEventListener("mousemove", E), document.removeEventListener("mouseup", a);
-  }, [E, a]);
-  const g = w(() => {
-    n && (e(!1), t(!1));
-  }, [n]);
-  return Ne({
-    isVisible: r,
-    isClosing: n,
-    onAnimationComplete: g
-  }), r ? /* @__PURE__ */ N(
-    "div",
-    {
-      ref: d,
-      className: `container ${r ? "citadel_slideUp" : ""} ${n ? "citadel_slideDown" : ""}`,
-      style: {
-        ...s ? { height: s } : void 0,
-        maxHeight: o.maxHeight
-      },
-      children: [
-        /* @__PURE__ */ m("div", { className: "resizeHandle", onMouseDown: z }),
-        /* @__PURE__ */ N("div", { className: "innerContainer", children: [
-          /* @__PURE__ */ m("div", { className: "flex-1 min-h-0 pt-3 px-4", children: /* @__PURE__ */ m(Ye, { output: S.output, outputRef: c }) }),
-          /* @__PURE__ */ N("div", { children: [
-            /* @__PURE__ */ m(Ve, { state: S, actions: y }),
-            /* @__PURE__ */ m(Be, {})
-          ] })
-        ] })
-      ]
-    }
-  ) : null;
-};
+customElements.define("citadel-element", he);
+const nn = () => (F().displayMode ?? "panel") === "inline" ? /* @__PURE__ */ m(Ze, {}) : /* @__PURE__ */ m(Xe, {});
 export {
-  rn as Citadel,
-  J as CommandRegistry,
-  F as CommandResult,
-  M as CommandStatus,
-  Me as DEFAULT_CURSOR_CONFIGS,
-  _e as ErrorCommandResult,
-  tn as ImageCommandResult,
-  nn as JsonCommandResult,
-  Te as OutputItem,
-  Ae as PendingCommandResult,
-  oe as TextCommandResult
+  cn as Citadel,
+  Q as CommandRegistry,
+  U as CommandResult,
+  T as CommandStatus,
+  We as DEFAULT_CURSOR_CONFIGS,
+  ve as ErrorCommandResult,
+  ln as ImageCommandResult,
+  an as JsonCommandResult,
+  Re as OutputItem,
+  Ce as PendingCommandResult,
+  ae as TextCommandResult
 };