local-operator-ui 0.10.4 → 0.10.5

package/out/renderer/assets/{index-DSUSTpnZ.js → index-C0xVwDO6.js}

@@ -1,4 +1,4 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./index-9ll8evaS.js","./fonts-Bb3Axuvj.js","./fonts-B9KBGB-g.css","./index-BcAunMPD.js","./pug-By0kVCfm.js","./javascript-C3MnDRiU.js","./dagre-OKDRZEBW-BRmuP5ne.js","./graph-DzxdEvr-.js","./_baseUniq-Dz-_QJw-.js","./layout-RVhCHjA1.js","./_basePickBy-HBztaYeO.js","./clone-DTo9NJBP.js","./c4Diagram-VJAJSXHY-CUWQVTBw.js","./chunk-D6G4REZN-y_oEq-tO.js","./flowDiagram-4HSFHLVR-DO9xIDx0.js","./chunk-RZ5BOZE2-Bh5Vf1hk.js","./channel-BnLrRohu.js","./erDiagram-Q7BY3M3F-B_3VyDfP.js","./gitGraphDiagram-7IBYFJ6S-Jz6QBGPa.js","./chunk-4BMEZGHF-C5nHFO1H.js","./chunk-XZIHB7SX-BEC6jdKb.js","./radar-MK3ICKWK-Bvvn6bXt.js","./ganttDiagram-APWFNJXF-BK37zBtS.js","./infoDiagram-PH2N3AL5-BrTEa3Dg.js","./pieDiagram-IB7DONF6-D_aSId8t.js","./arc-BbFClCF-.js","./quadrantDiagram-7GDLP6J5-VtpoaDCW.js","./xychartDiagram-VJFVF3MP-gjn-8kXQ.js","./requirementDiagram-KVF5MWMF-DmQX7SmX.js","./sequenceDiagram-X6HHIX6F-Cy6jqgLY.js","./classDiagram-GIVACNV2-D_MSeJ_6.js","./chunk-A2AXSNBT-YCzWQkj3.js","./classDiagram-v2-COTLJTTW-D_MSeJ_6.js","./stateDiagram-DGXRK772-B5sjzMc3.js","./chunk-AEK57VVT-RSKL44QH.js","./stateDiagram-v2-YXO3MK2T-CCntK586.js","./journeyDiagram-U35MCT3I-cp-7j6JH.js","./timeline-definition-BDJGKUSR-B24Z4NA2.js","./mindmap-definition-ALO5MXBD-B8ntf-YJ.js","./cytoscape.esm-C0AOj4uS.js","./kanban-definition-NDS4AKOZ-DT0Ds4_6.js","./sankeyDiagram-QLVOVGJD-DH2kTl35.js","./diagram-VNBRO52H-Bxh5b-em.js","./diagram-SSKATNLV-lmqZ5zjv.js","./blockDiagram-JOT3LUYC-boa_T8E1.js","./architectureDiagram-IEHRJDOE-DzXvnk9f.js"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./index-DyCWQ6pn.js","./fonts-Bb3Axuvj.js","./fonts-B9KBGB-g.css","./index-BkfYRfhG.js","./pug-By0kVCfm.js","./javascript-C3MnDRiU.js","./dagre-OKDRZEBW-CuBbVbAE.js","./graph-D_O_nUCU.js","./_baseUniq-CjrpCuGP.js","./layout-DgQHyz0Y.js","./_basePickBy-J6QOPIw6.js","./clone-D3nlta8f.js","./c4Diagram-VJAJSXHY-DPAI5Oul.js","./chunk-D6G4REZN-hnXFWy0U.js","./flowDiagram-4HSFHLVR-COKwAFv7.js","./chunk-RZ5BOZE2-DJGZKKsw.js","./channel-kBkjl2tX.js","./erDiagram-Q7BY3M3F-hAtjkKRt.js","./gitGraphDiagram-7IBYFJ6S-CCkiOue7.js","./chunk-4BMEZGHF-BbIA2hPK.js","./chunk-XZIHB7SX-Ui8w9_LJ.js","./radar-MK3ICKWK-DNJgoIIb.js","./ganttDiagram-APWFNJXF-DzqtejzU.js","./infoDiagram-PH2N3AL5-D2pi_Avu.js","./pieDiagram-IB7DONF6-CzpV9GLV.js","./arc-B9dHmVa3.js","./quadrantDiagram-7GDLP6J5-TRIu05Kz.js","./xychartDiagram-VJFVF3MP-BWFbhKHp.js","./requirementDiagram-KVF5MWMF-DtZxlcxe.js","./sequenceDiagram-X6HHIX6F-DXZSfjCv.js","./classDiagram-GIVACNV2-B-m9p15O.js","./chunk-A2AXSNBT-ChTSPi_g.js","./classDiagram-v2-COTLJTTW-B-m9p15O.js","./stateDiagram-DGXRK772-gJvvYfHT.js","./chunk-AEK57VVT-CbZX12yb.js","./stateDiagram-v2-YXO3MK2T-DUjC-b8t.js","./journeyDiagram-U35MCT3I-CYV7gt8_.js","./timeline-definition-BDJGKUSR-DpFxQaCe.js","./mindmap-definition-ALO5MXBD-ByeOpUXU.js","./cytoscape.esm-C0AOj4uS.js","./kanban-definition-NDS4AKOZ-z_jHtS3N.js","./sankeyDiagram-QLVOVGJD-CsDA2pgF.js","./diagram-VNBRO52H-CptIzsnS.js","./diagram-SSKATNLV-Ddt-5-58.js","./blockDiagram-JOT3LUYC-Ct7Hjgdp.js","./architectureDiagram-IEHRJDOE-iZe3FGai.js"])))=>i.map(i=>d[i]);
 import { i as createStyled, l as resolveProps, m as useTheme, n as useTheme$1, r as reactExports, o as React, p as useEnhancedEffect$1, q as clsx, t as useForkRef$1, v as extendSxProp, j as jsxRuntimeExports, w as handleBreakpoints, x as resolveBreakpointValues, y as createUnarySpacing, z as deepmerge, A as mergeBreakpointsInOrder, F as composeClasses$1, G as generateUtilityClass$1, I as createTheme$1, J as getValue$1, h as React$1, K as requireReactDom, g as getDefaultExportFromCjs, L as defaultTheme$2, M as THEME_ID, N as generateUtilityClasses$1, O as useDefaultProps, s as styled$1, P as capitalize$1, Q as memoTheme, _ as _inheritsLoose, S as _objectWithoutPropertiesLoose$k, U as TransitionGroupContext, V as _extends$w, W as duration, u as useTheme$2, X as useTimeout$1, Y as useId$1, Z as ButtonBase, b as alpha$1, $ as createSimplePaletteValueFilter, a0 as CircularProgress, a1 as Paper, a2 as darken$1, a3 as lighten$1, a4 as useEventCallback$1, a5 as useRtl, a6 as globalCss, a7 as formatMuiErrorMessage$1, a8 as rootShouldForwardProp, T as Typography, a9 as css$1, k as keyframes, aa as getPath$2, ab as isFocusVisible, ac as typographyClasses, ad as slotShouldForwardProp, ae as clamp, af as emphasize, ag as Timeout$1, c as createLucideIcon, a as Button, B as Box, ah as FontAwesomeIcon, ai as faExclamationTriangle, D as DEFAULT_THEME, aj as faChevronLeft, ak as faChevronRight, al as faRobot, am as faCheck, an as faTimes, ao as faEraser, ap as faPen, aq as faFileImport, ar as faUpload, as as GlobalStyles, at as requireReact, au as faComment, av as faSave, aw as faEdit, ax as faTrashAlt, ay as faInfoCircle, az as faGear, aA as faPlus, aB as faServer, aC as faStar, aD as faTag, aE as faIdCard, aF as faCalendarAlt, aG as faCodeBranch, aH as faShieldAlt, aI as faArrowLeft, aJ as faClock, C as Code, aK as faSliders, aL as faTrash, aM as faHome, aN as faDownload, aO as faFileAlt, aP as faDesktop, aQ as faImage, aR as faMusic, aS as faVideo, aT as faLaptop, aU as faUsers, aV as faDatabase, aW as faBoxOpen, aX as faBook, aY as faHdd, aZ as faBox, a_ as faArchive, a$ as faNetworkWired, b0 as faFolder, b1 as faFolderOpen, b2 as faFolderTree, b3 as faArrowDown, b4 as faPaperclip, b5 as faStop, b6 as faPaperPlane, b7 as faFile, b8 as faExclamationCircle, b9 as faChevronDown, ba as isDevelopmentMode, bb as faCommentSlash, bc as faArrowRight, bd as faBrain, be as faWandMagicSparkles, bf as faExternalLinkAlt, bg as faKey, bh as radientTheme, bi as faGlobe, bj as faSearch, bk as PropTypes, bl as shouldForwardProp, bm as TransitionGroup, bn as commonjsGlobal, bo as faLock, bp as faPuzzlePiece, H as HardDrive, bq as faSignOut, br as themes$1, bs as faMoon, bt as faSun, bu as faHexagonNodes, bv as faSkull, bw as faLeaf, bx as faCode, by as faMountain, bz as faFire, bA as faIcicles, bB as faBolt, bC as faAdjust, bD as faWaveSquare, bE as faUser, bF as faEnvelope, bG as faHistory, bH as faListAlt, bI as faCreditCard, bJ as faPlusCircle, bK as faChartLine, bL as faShield, bM as library$1, bN as icons$1, f as CssBaseline, e as ThemeProvider$1, d as getTheme, R as ReactDOM$1, E as ErrorBoundary } from "./fonts-Bb3Axuvj.js";
 const styled = createStyled();
 function getThemeProps(params) {
@@ -28688,6 +28688,140 @@ const AgentsApi = {
       throw new Error(errorDetail);
     }
     return response.json();
+  },
+  /**
+   * List agent execution variables
+   * Retrieve all execution variables for a specific agent.
+   *
+   * @param baseUrl - The base URL of the Local Operator API
+   * @param agentId - ID of the agent
+   * @returns Promise resolving to the execution variables list response
+   */
+  async listAgentExecutionVariables(baseUrl, agentId) {
+    const response = await fetch(
+      `${baseUrl}/v1/agents/${agentId}/execution-variables`,
+      {
+        method: "GET",
+        headers: {
+          Accept: "application/json"
+        }
+      }
+    );
+    if (!response.ok) {
+      throw new Error(
+        `List agent execution variables request failed: ${response.status} ${response.statusText}`
+      );
+    }
+    return response.json();
+  },
+  /**
+   * Create an agent execution variable
+   * Create a new execution variable for a specific agent.
+   *
+   * @param baseUrl - The base URL of the Local Operator API
+   * @param agentId - ID of the agent
+   * @param variableData - The execution variable data to create
+   * @returns Promise resolving to the created execution variable response
+   */
+  async createAgentExecutionVariable(baseUrl, agentId, variableData) {
+    const response = await fetch(
+      `${baseUrl}/v1/agents/${agentId}/execution-variables`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json"
+        },
+        body: JSON.stringify(variableData)
+      }
+    );
+    if (!response.ok) {
+      throw new Error(
+        `Create agent execution variable request failed: ${response.status} ${response.statusText}`
+      );
+    }
+    return response.json();
+  },
+  /**
+   * Get an agent execution variable
+   * Retrieve a specific execution variable for an agent by its key.
+   *
+   * @param baseUrl - The base URL of the Local Operator API
+   * @param agentId - ID of the agent
+   * @param variableKey - Key of the execution variable
+   * @returns Promise resolving to the execution variable response
+   */
+  async getAgentExecutionVariable(baseUrl, agentId, variableKey) {
+    const response = await fetch(
+      `${baseUrl}/v1/agents/${agentId}/execution-variables/${variableKey}`,
+      {
+        method: "GET",
+        headers: {
+          Accept: "application/json"
+        }
+      }
+    );
+    if (!response.ok) {
+      throw new Error(
+        `Get agent execution variable request failed: ${response.status} ${response.statusText}`
+      );
+    }
+    return response.json();
+  },
+  /**
+   * Update an agent execution variable
+   * Update an existing execution variable for a specific agent.
+   *
+   * @param baseUrl - The base URL of the Local Operator API
+   * @param agentId - ID of the agent
+   * @param variableKey - Key of the execution variable to update
+   * @param variableData - The execution variable data to update
+   * @returns Promise resolving to the updated execution variable response
+   */
+  async updateAgentExecutionVariable(baseUrl, agentId, variableKey, variableData) {
+    const response = await fetch(
+      `${baseUrl}/v1/agents/${agentId}/execution-variables/${variableKey}`,
+      {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json"
+        },
+        body: JSON.stringify(variableData)
+      }
+    );
+    if (!response.ok) {
+      throw new Error(
+        `Update agent execution variable request failed: ${response.status} ${response.statusText}`
+      );
+    }
+    return response.json();
+  },
+  /**
+   * Delete an agent execution variable
+   * Delete an execution variable for a specific agent by its key.
+   *
+   * @param baseUrl - The base URL of the Local Operator API
+   * @param agentId - ID of the agent
+   * @param variableKey - Key of the execution variable to delete
+   * @returns Promise resolving to the deletion response
+   */
+  async deleteAgentExecutionVariable(baseUrl, agentId, variableKey) {
+    const response = await fetch(
+      `${baseUrl}/v1/agents/${agentId}/execution-variables/${variableKey}`,
+      {
+        method: "DELETE",
+        headers: {
+          Accept: "application/json"
+        }
+      }
+    );
+    if (!response.ok) {
+      throw new Error(
+        `Delete agent execution variable request failed: ${response.status} ${response.statusText}`
+      );
+    }
+    return response.json();
   }
 };
 const ChatApi = {
@@ -35822,30 +35956,30 @@ const useAgentSelectionStore = create$3()(
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$1g = [
+const __iconNode$1l = [
   ["rect", { width: "20", height: "5", x: "2", y: "3", rx: "1", key: "1wp1u1" }],
   ["path", { d: "M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8", key: "1s80jp" }],
   ["path", { d: "M10 12h4", key: "a56b0p" }]
 ];
-const Archive = createLucideIcon("archive", __iconNode$1g);
+const Archive = createLucideIcon("archive", __iconNode$1l);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$1f = [
+const __iconNode$1k = [
   ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
   ["path", { d: "M19 12H5", key: "x3x0zl" }]
 ];
-const ArrowLeft = createLucideIcon("arrow-left", __iconNode$1f);
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$1k);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$1e = [
+const __iconNode$1j = [
   ["path", { d: "M2 10v3", key: "1fnikh" }],
   ["path", { d: "M6 6v11", key: "11sgs0" }],
   ["path", { d: "M10 3v18", key: "yhl04a" }],
@@ -35853,14 +35987,14 @@ const __iconNode$1e = [
   ["path", { d: "M18 5v13", key: "123xd1" }],
   ["path", { d: "M22 10v3", key: "154ddg" }]
 ];
-const AudioLines = createLucideIcon("audio-lines", __iconNode$1e);
+const AudioLines = createLucideIcon("audio-lines", __iconNode$1j);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$1d = [
+const __iconNode$1i = [
   [
     "path",
     {
@@ -35869,14 +36003,14 @@ const __iconNode$1d = [
     }
   ]
 ];
-const Book = createLucideIcon("book", __iconNode$1d);
+const Book = createLucideIcon("book", __iconNode$1i);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$1c = [
+const __iconNode$1h = [
   ["path", { d: "M12 8V4H8", key: "hb8ula" }],
   ["rect", { width: "16", height: "12", x: "4", y: "8", rx: "2", key: "enze0r" }],
   ["path", { d: "M2 14h2", key: "vft8re" }],
@@ -35884,25 +36018,25 @@ const __iconNode$1c = [
   ["path", { d: "M15 13v2", key: "1xurst" }],
   ["path", { d: "M9 13v2", key: "rq6x2g" }]
 ];
-const Bot = createLucideIcon("bot", __iconNode$1c);
+const Bot = createLucideIcon("bot", __iconNode$1h);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$1b = [
+const __iconNode$1g = [
   ["path", { d: "M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16", key: "jecpp" }],
   ["rect", { width: "20", height: "14", x: "2", y: "6", rx: "2", key: "i6l2r4" }]
 ];
-const Briefcase = createLucideIcon("briefcase", __iconNode$1b);
+const Briefcase = createLucideIcon("briefcase", __iconNode$1g);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$1a = [
+const __iconNode$1f = [
   ["path", { d: "M8 2v4", key: "1cmpym" }],
   ["path", { d: "M16 2v4", key: "4m81vk" }],
   ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
@@ -35914,136 +36048,136 @@ const __iconNode$1a = [
   ["path", { d: "M12 18h.01", key: "mhygvu" }],
   ["path", { d: "M16 18h.01", key: "kzsmim" }]
 ];
-const CalendarDays = createLucideIcon("calendar-days", __iconNode$1a);
+const CalendarDays = createLucideIcon("calendar-days", __iconNode$1f);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$19 = [
+const __iconNode$1e = [
   ["line", { x1: "18", x2: "18", y1: "20", y2: "10", key: "1xfpm4" }],
   ["line", { x1: "12", x2: "12", y1: "20", y2: "4", key: "be30l9" }],
   ["line", { x1: "6", x2: "6", y1: "20", y2: "14", key: "1r4le6" }]
 ];
-const ChartNoAxesColumn = createLucideIcon("chart-no-axes-column", __iconNode$19);
+const ChartNoAxesColumn = createLucideIcon("chart-no-axes-column", __iconNode$1e);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$18 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$18);
+const __iconNode$1d = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$1d);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$17 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$17);
+const __iconNode$1c = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$1c);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$16 = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-const ChevronLeft = createLucideIcon("chevron-left", __iconNode$16);
+const __iconNode$1b = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("chevron-left", __iconNode$1b);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$15 = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$15);
+const __iconNode$1a = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$1a);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$14 = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
-const ChevronUp = createLucideIcon("chevron-up", __iconNode$14);
+const __iconNode$19 = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
+const ChevronUp = createLucideIcon("chevron-up", __iconNode$19);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$13 = [
+const __iconNode$18 = [
   ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
   ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
 ];
-const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$13);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$18);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$12 = [
+const __iconNode$17 = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
 ];
-const CircleCheck = createLucideIcon("circle-check", __iconNode$12);
+const CircleCheck = createLucideIcon("circle-check", __iconNode$17);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$11 = [
+const __iconNode$16 = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M17 12h.01", key: "1m0b6t" }],
   ["path", { d: "M12 12h.01", key: "1mp3jc" }],
   ["path", { d: "M7 12h.01", key: "eqddd0" }]
 ];
-const CircleEllipsis = createLucideIcon("circle-ellipsis", __iconNode$11);
+const CircleEllipsis = createLucideIcon("circle-ellipsis", __iconNode$16);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$10 = [
+const __iconNode$15 = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", key: "1u773s" }],
   ["path", { d: "M12 17h.01", key: "p32p05" }]
 ];
-const CircleHelp = createLucideIcon("circle-help", __iconNode$10);
+const CircleHelp = createLucideIcon("circle-help", __iconNode$15);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$$ = [
+const __iconNode$14 = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["polygon", { points: "10 8 16 12 10 16 10 8", key: "1cimsy" }]
 ];
-const CirclePlay = createLucideIcon("circle-play", __iconNode$$);
+const CirclePlay = createLucideIcon("circle-play", __iconNode$14);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$_ = [
+const __iconNode$13 = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M8 12h8", key: "1wcyev" }],
   ["path", { d: "M12 8v8", key: "napkw2" }]
 ];
-const CirclePlus = createLucideIcon("circle-plus", __iconNode$_);
+const CirclePlus = createLucideIcon("circle-plus", __iconNode$13);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$Z = [
+const __iconNode$12 = [
   ["rect", { width: "8", height: "4", x: "8", y: "2", rx: "1", ry: "1", key: "tgr4d6" }],
   [
     "path",
@@ -36057,72 +36191,72 @@ const __iconNode$Z = [
   ["path", { d: "M8 11h.01", key: "1dfujw" }],
   ["path", { d: "M8 16h.01", key: "18s6g9" }]
 ];
-const ClipboardList = createLucideIcon("clipboard-list", __iconNode$Z);
+const ClipboardList = createLucideIcon("clipboard-list", __iconNode$12);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$Y = [
+const __iconNode$11 = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["polyline", { points: "12 6 12 12 16 14", key: "68esgv" }]
 ];
-const Clock$1 = createLucideIcon("clock", __iconNode$Y);
+const Clock$1 = createLucideIcon("clock", __iconNode$11);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$X = [
+const __iconNode$10 = [
   ["path", { d: "M12 13v8", key: "1l5pq0" }],
   ["path", { d: "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242", key: "1pljnt" }],
   ["path", { d: "m8 17 4-4 4 4", key: "1quai1" }]
 ];
-const CloudUpload = createLucideIcon("cloud-upload", __iconNode$X);
+const CloudUpload = createLucideIcon("cloud-upload", __iconNode$10);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$W = [
+const __iconNode$$ = [
   ["path", { d: "m18 16 4-4-4-4", key: "1inbqp" }],
   ["path", { d: "m6 8-4 4 4 4", key: "15zrgr" }],
   ["path", { d: "m14.5 4-5 16", key: "e7oirm" }]
 ];
-const CodeXml = createLucideIcon("code-xml", __iconNode$W);
+const CodeXml = createLucideIcon("code-xml", __iconNode$$);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$V = [
+const __iconNode$_ = [
   ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
   ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
 ];
-const Copy = createLucideIcon("copy", __iconNode$V);
+const Copy = createLucideIcon("copy", __iconNode$_);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$U = [
+const __iconNode$Z = [
   ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }],
   ["polyline", { points: "7 10 12 15 17 10", key: "2ggqvy" }],
   ["line", { x1: "12", x2: "12", y1: "15", y2: "3", key: "1vk2je" }]
 ];
-const Download = createLucideIcon("download", __iconNode$U);
+const Download = createLucideIcon("download", __iconNode$Z);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$T = [
+const __iconNode$Y = [
   ["path", { d: "M21.54 15H17a2 2 0 0 0-2 2v4.54", key: "1djwo0" }],
   [
     "path",
@@ -36134,26 +36268,38 @@ const __iconNode$T = [
   ["path", { d: "M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05", key: "14pb5j" }],
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]
 ];
-const Earth = createLucideIcon("earth", __iconNode$T);
+const Earth = createLucideIcon("earth", __iconNode$Y);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$S = [
+const __iconNode$X = [
   ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
   ["circle", { cx: "12", cy: "5", r: "1", key: "gxeob9" }],
   ["circle", { cx: "12", cy: "19", r: "1", key: "lyex9k" }]
 ];
-const EllipsisVertical = createLucideIcon("ellipsis-vertical", __iconNode$S);
+const EllipsisVertical = createLucideIcon("ellipsis-vertical", __iconNode$X);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$R = [
+const __iconNode$W = [
+  ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
+  ["circle", { cx: "19", cy: "12", r: "1", key: "1wjl8i" }],
+  ["circle", { cx: "5", cy: "12", r: "1", key: "1pcz8c" }]
+];
+const Ellipsis = createLucideIcon("ellipsis", __iconNode$W);
+/**
+ * @license lucide-react v0.507.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$V = [
   [
     "path",
     {
@@ -36164,65 +36310,65 @@ const __iconNode$R = [
   ["path", { d: "M22 21H7", key: "t4ddhn" }],
   ["path", { d: "m5 11 9 9", key: "1mo9qw" }]
 ];
-const Eraser = createLucideIcon("eraser", __iconNode$R);
+const Eraser = createLucideIcon("eraser", __iconNode$V);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$Q = [
+const __iconNode$U = [
   ["path", { d: "M15 3h6v6", key: "1q9fwt" }],
   ["path", { d: "M10 14 21 3", key: "gplh6r" }],
   ["path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6", key: "a6xqqp" }]
 ];
-const ExternalLink = createLucideIcon("external-link", __iconNode$Q);
+const ExternalLink = createLucideIcon("external-link", __iconNode$U);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$P = [
+const __iconNode$T = [
   ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", key: "1rqfz7" }],
   ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }],
   ["circle", { cx: "10", cy: "12", r: "2", key: "737tya" }],
   ["path", { d: "m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22", key: "wt3hpn" }]
 ];
-const FileImage = createLucideIcon("file-image", __iconNode$P);
+const FileImage = createLucideIcon("file-image", __iconNode$T);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$O = [
+const __iconNode$S = [
   ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }],
   ["path", { d: "M4 7V4a2 2 0 0 1 2-2 2 2 0 0 0-2 2", key: "1vk7w2" }],
   ["path", { d: "M4.063 20.999a2 2 0 0 0 2 1L18 22a2 2 0 0 0 2-2V7l-5-5H6", key: "1jink5" }],
   ["path", { d: "m5 11-3 3", key: "1dgrs4" }],
   ["path", { d: "m5 17-3-3h10", key: "1mvvaf" }]
 ];
-const FileOutput = createLucideIcon("file-output", __iconNode$O);
+const FileOutput = createLucideIcon("file-output", __iconNode$S);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$N = [
+const __iconNode$R = [
   ["path", { d: "M12 17h.01", key: "p32p05" }],
   ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z", key: "1mlx9k" }],
   ["path", { d: "M9.1 9a3 3 0 0 1 5.82 1c0 2-3 3-3 3", key: "mhlwft" }]
 ];
-const FileQuestion = createLucideIcon("file-question", __iconNode$N);
+const FileQuestion = createLucideIcon("file-question", __iconNode$R);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$M = [
+const __iconNode$Q = [
   ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", key: "1rqfz7" }],
   ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }],
   ["path", { d: "M8 13h2", key: "yr2amv" }],
@@ -36230,64 +36376,64 @@ const __iconNode$M = [
   ["path", { d: "M8 17h2", key: "2yhykz" }],
   ["path", { d: "M14 17h2", key: "10kma7" }]
 ];
-const FileSpreadsheet = createLucideIcon("file-spreadsheet", __iconNode$M);
+const FileSpreadsheet = createLucideIcon("file-spreadsheet", __iconNode$Q);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$L = [
+const __iconNode$P = [
   ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", key: "1rqfz7" }],
   ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }],
   ["path", { d: "M10 9H8", key: "b1mrlr" }],
   ["path", { d: "M16 13H8", key: "t4e002" }],
   ["path", { d: "M16 17H8", key: "z1uh3a" }]
 ];
-const FileText = createLucideIcon("file-text", __iconNode$L);
+const FileText = createLucideIcon("file-text", __iconNode$P);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$K = [
+const __iconNode$O = [
   ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", key: "1rqfz7" }],
   ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }],
   ["path", { d: "M12 12v6", key: "3ahymv" }],
   ["path", { d: "m15 15-3-3-3 3", key: "15xj92" }]
 ];
-const FileUp = createLucideIcon("file-up", __iconNode$K);
+const FileUp = createLucideIcon("file-up", __iconNode$O);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$J = [
+const __iconNode$N = [
   ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", key: "1rqfz7" }],
   ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }],
   ["path", { d: "m10 11 5 3-5 3v-6Z", key: "7ntvm4" }]
 ];
-const FileVideo = createLucideIcon("file-video", __iconNode$J);
+const FileVideo = createLucideIcon("file-video", __iconNode$N);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$I = [
+const __iconNode$M = [
   ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", key: "1rqfz7" }],
   ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }]
 ];
-const File$1 = createLucideIcon("file", __iconNode$I);
+const File$1 = createLucideIcon("file", __iconNode$M);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$H = [
+const __iconNode$L = [
   [
     "path",
     {
@@ -36298,14 +36444,14 @@ const __iconNode$H = [
   ["path", { d: "M6.453 15h11.094", key: "3shlmq" }],
   ["path", { d: "M8.5 2h7", key: "csnxdl" }]
 ];
-const FlaskConical = createLucideIcon("flask-conical", __iconNode$H);
+const FlaskConical = createLucideIcon("flask-conical", __iconNode$L);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$G = [
+const __iconNode$K = [
   [
     "path",
     {
@@ -36314,14 +36460,14 @@ const __iconNode$G = [
     }
   ]
 ];
-const FolderOpen = createLucideIcon("folder-open", __iconNode$G);
+const FolderOpen = createLucideIcon("folder-open", __iconNode$K);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$F = [
+const __iconNode$J = [
   [
     "path",
     {
@@ -36332,14 +36478,14 @@ const __iconNode$F = [
   ["path", { d: "M22 10v6", key: "1lu8f3" }],
   ["path", { d: "M6 12.5V16a6 3 0 0 0 12 0v-3.5", key: "1r8lef" }]
 ];
-const GraduationCap = createLucideIcon("graduation-cap", __iconNode$F);
+const GraduationCap = createLucideIcon("graduation-cap", __iconNode$J);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$E = [
+const __iconNode$I = [
   [
     "path",
     {
@@ -36349,14 +36495,14 @@ const __iconNode$E = [
   ],
   ["path", { d: "M3.22 12H9.5l.5-1 2 4.5 2-7 1.5 3.5h5.27", key: "1uw2ng" }]
 ];
-const HeartPulse = createLucideIcon("heart-pulse", __iconNode$E);
+const HeartPulse = createLucideIcon("heart-pulse", __iconNode$I);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$D = [
+const __iconNode$H = [
   [
     "path",
     {
@@ -36365,26 +36511,26 @@ const __iconNode$D = [
     }
   ]
 ];
-const Heart = createLucideIcon("heart", __iconNode$D);
+const Heart = createLucideIcon("heart", __iconNode$H);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$C = [
+const __iconNode$G = [
   ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
   ["path", { d: "M3 3v5h5", key: "1xhq8a" }],
   ["path", { d: "M12 7v5l4 2", key: "1fdv2h" }]
 ];
-const History = createLucideIcon("history", __iconNode$C);
+const History = createLucideIcon("history", __iconNode$G);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$B = [
+const __iconNode$F = [
   ["path", { d: "M12 3v12", key: "1x0j5s" }],
   ["path", { d: "m8 11 4 4 4-4", key: "1dohi6" }],
   [
@@ -36395,38 +36541,38 @@ const __iconNode$B = [
     }
   ]
 ];
-const Import = createLucideIcon("import", __iconNode$B);
+const Import = createLucideIcon("import", __iconNode$F);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$A = [
+const __iconNode$E = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M12 16v-4", key: "1dtifu" }],
   ["path", { d: "M12 8h.01", key: "e9boi3" }]
 ];
-const Info$1 = createLucideIcon("info", __iconNode$A);
+const Info$1 = createLucideIcon("info", __iconNode$E);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$z = [
+const __iconNode$D = [
   ["path", { d: "m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4", key: "g0fldk" }],
   ["path", { d: "m21 2-9.6 9.6", key: "1j0ho8" }],
   ["circle", { cx: "7.5", cy: "15.5", r: "5.5", key: "yqb3hr" }]
 ];
-const Key = createLucideIcon("key", __iconNode$z);
+const Key = createLucideIcon("key", __iconNode$D);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$y = [
+const __iconNode$C = [
   [
     "path",
     {
@@ -36449,14 +36595,27 @@ const __iconNode$y = [
     }
   ]
 ];
-const Layers = createLucideIcon("layers", __iconNode$y);
+const Layers = createLucideIcon("layers", __iconNode$C);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$x = [
+const __iconNode$B = [
+  ["rect", { width: "7", height: "7", x: "3", y: "3", rx: "1", key: "1g98yp" }],
+  ["rect", { width: "7", height: "7", x: "14", y: "3", rx: "1", key: "6d4xhi" }],
+  ["rect", { width: "7", height: "7", x: "14", y: "14", rx: "1", key: "nxv5o0" }],
+  ["rect", { width: "7", height: "7", x: "3", y: "14", rx: "1", key: "1bb6yr" }]
+];
+const LayoutGrid = createLucideIcon("layout-grid", __iconNode$B);
+/**
+ * @license lucide-react v0.507.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$A = [
   [
     "path",
     {
@@ -36467,80 +36626,102 @@ const __iconNode$x = [
   ["path", { d: "M9 18h6", key: "x1upvd" }],
   ["path", { d: "M10 22h4", key: "ceow96" }]
 ];
-const Lightbulb = createLucideIcon("lightbulb", __iconNode$x);
+const Lightbulb = createLucideIcon("lightbulb", __iconNode$A);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$w = [
+const __iconNode$z = [
   ["path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71", key: "1cjeqo" }],
   ["path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71", key: "19qd67" }]
 ];
-const Link = createLucideIcon("link", __iconNode$w);
+const Link = createLucideIcon("link", __iconNode$z);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$v = [
+const __iconNode$y = [
+  ["path", { d: "M21 12h-8", key: "1bmf0i" }],
+  ["path", { d: "M21 6H8", key: "1pqkrb" }],
+  ["path", { d: "M21 18h-8", key: "1tm79t" }],
+  ["path", { d: "M3 6v4c0 1.1.9 2 2 2h3", key: "1ywdgy" }],
+  ["path", { d: "M3 10v6c0 1.1.9 2 2 2h3", key: "2wc746" }]
+];
+const ListTree = createLucideIcon("list-tree", __iconNode$y);
+/**
+ * @license lucide-react v0.507.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$x = [
   ["path", { d: "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7", key: "132q7q" }],
   ["rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", key: "izxlao" }]
 ];
-const Mail = createLucideIcon("mail", __iconNode$v);
+const Mail = createLucideIcon("mail", __iconNode$x);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$u = [
+const __iconNode$w = [
   ["polyline", { points: "15 3 21 3 21 9", key: "mznyad" }],
   ["polyline", { points: "9 21 3 21 3 15", key: "1avn1i" }],
   ["line", { x1: "21", x2: "14", y1: "3", y2: "10", key: "ota7mn" }],
   ["line", { x1: "3", x2: "10", y1: "21", y2: "14", key: "1atl0r" }]
 ];
-const Maximize2 = createLucideIcon("maximize-2", __iconNode$u);
+const Maximize2 = createLucideIcon("maximize-2", __iconNode$w);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$t = [
+const __iconNode$v = [
   ["path", { d: "m3 11 18-5v12L3 14v-3z", key: "n962bs" }],
   ["path", { d: "M11.6 16.8a3 3 0 1 1-5.8-1.6", key: "1yl0tm" }]
 ];
-const Megaphone = createLucideIcon("megaphone", __iconNode$t);
+const Megaphone = createLucideIcon("megaphone", __iconNode$v);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$s = [
+const __iconNode$u = [
   ["path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z", key: "vv11sd" }]
 ];
-const MessageCircle = createLucideIcon("message-circle", __iconNode$s);
+const MessageCircle = createLucideIcon("message-circle", __iconNode$u);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$r = [
+const __iconNode$t = [
   ["path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z", key: "1lielz" }]
 ];
-const MessageSquare = createLucideIcon("message-square", __iconNode$r);
+const MessageSquare = createLucideIcon("message-square", __iconNode$t);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$q = [
+const __iconNode$s = [["path", { d: "M5 12h14", key: "1ays0h" }]];
+const Minus$1 = createLucideIcon("minus", __iconNode$s);
+/**
+ * @license lucide-react v0.507.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$r = [
   ["path", { d: "M12 2v20", key: "t6zp3m" }],
   ["path", { d: "m15 19-3 3-3-3", key: "11eu04" }],
   ["path", { d: "m19 9 3 3-3 3", key: "1mg7y2" }],
@@ -36548,14 +36729,14 @@ const __iconNode$q = [
   ["path", { d: "m5 9-3 3 3 3", key: "j64kie" }],
   ["path", { d: "m9 5 3-3 3 3", key: "l8vdw6" }]
 ];
-const Move = createLucideIcon("move", __iconNode$q);
+const Move = createLucideIcon("move", __iconNode$r);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$p = [
+const __iconNode$q = [
   ["path", { d: "m14.622 17.897-10.68-2.913", key: "vj2p1u" }],
   [
     "path",
@@ -36572,14 +36753,14 @@ const __iconNode$p = [
     }
   ]
 ];
-const Paintbrush = createLucideIcon("paintbrush", __iconNode$p);
+const Paintbrush = createLucideIcon("paintbrush", __iconNode$q);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$o = [
+const __iconNode$p = [
   ["path", { d: "M12 20h9", key: "t2du7b" }],
   [
     "path",
@@ -36590,7 +36771,23 @@ const __iconNode$o = [
   ],
   ["path", { d: "m15 5 3 3", key: "1w25hb" }]
 ];
-const PencilLine = createLucideIcon("pencil-line", __iconNode$o);
+const PencilLine = createLucideIcon("pencil-line", __iconNode$p);
+/**
+ * @license lucide-react v0.507.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$o = [
+  [
+    "path",
+    {
+      d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
+      key: "1a8usu"
+    }
+  ]
+];
+const Pen = createLucideIcon("pen", __iconNode$o);
 /**
  * @license lucide-react v0.507.0 - ISC
  *
@@ -37128,7 +37325,7 @@ const OptionsMenu = styled$1(Menu)(({ theme: theme2 }) => ({
     background: theme2.palette.background.paper
   }
 }));
-const StyledMenuItem$1 = styled$1(MenuItem)(({ theme: theme2 }) => ({
+const StyledMenuItem$3 = styled$1(MenuItem)(({ theme: theme2 }) => ({
   borderRadius: "0.375rem",
   // rounded-md
   padding: "0.5rem 0.75rem",
@@ -37168,7 +37365,7 @@ const DeleteMenuItem = styled$1(MenuItem)(({ theme: theme2 }) => ({
     backgroundColor: alpha$1(theme2.palette.error.main, 0.08)
   }
 }));
-const MenuItemIcon$1 = styled$1(ListItemIcon)(
+const MenuItemIcon$2 = styled$1(ListItemIcon)(
   ({ theme: theme2, color: color2 }) => ({
     color: color2 === "error" ? theme2.palette.error.main : color2 === "warning" ? theme2.palette.warning.main : theme2.palette.text.primary,
     minWidth: 0,
@@ -37271,20 +37468,20 @@ const AgentOptionsMenu = ({
         },
         children: [
           isAgentsPage && onChatWithAgent && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            StyledMenuItem$1,
+            StyledMenuItem$3,
             {
               onClick: () => {
                 onChatWithAgent();
                 handleCloseMenu();
               },
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItemIcon$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(MessageCircle, { "aria-label": "Chat with Agent" }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItemIcon$2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(MessageCircle, { "aria-label": "Chat with Agent" }) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Chat with Agent" })
               ]
             }
           ),
           !isAgentsPage && onViewAgentSettings && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            StyledMenuItem$1,
+            StyledMenuItem$3,
             {
               "data-tour-tag": "view-agent-settings-menu-item",
               onClick: () => {
@@ -37292,26 +37489,26 @@ const AgentOptionsMenu = ({
                 handleCloseMenu();
               },
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItemIcon$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Settings$1, { "aria-label": "View Agent Settings" }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItemIcon$2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Settings$1, { "aria-label": "View Agent Settings" }) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "View Agent Settings" })
               ]
             }
           ),
           onExportAgent && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            StyledMenuItem$1,
+            StyledMenuItem$3,
             {
               onClick: () => {
                 onExportAgent();
                 handleCloseMenu();
               },
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItemIcon$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FileOutput, { "aria-label": "Export Agent" }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItemIcon$2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FileOutput, { "aria-label": "Export Agent" }) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Export Agent" })
               ]
             }
           ),
           onUploadAgentToHub && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            StyledMenuItem$1,
+            StyledMenuItem$3,
             {
               "data-tour-tag": "upload-to-hub-menu-item",
               onClick: () => {
@@ -37319,17 +37516,17 @@ const AgentOptionsMenu = ({
                 handleCloseMenu();
               },
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItemIcon$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloudUpload, { "aria-label": "Upload to Hub" }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItemIcon$2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloudUpload, { "aria-label": "Upload to Hub" }) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Upload to Hub" })
               ]
             }
           ),
           onClearConversation && /* @__PURE__ */ jsxRuntimeExports.jsxs(WarningMenuItem, { onClick: handleOpenClearConfirmation, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItemIcon$1, { color: "warning", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Eraser, { "aria-label": "Clear Conversation" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItemIcon$2, { color: "warning", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Eraser, { "aria-label": "Clear Conversation" }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Clear Conversation" })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs(DeleteMenuItem, { onClick: handleOpenDeleteConfirmation, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItemIcon$1, { color: "error", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { "aria-label": "Delete Agent" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItemIcon$2, { color: "error", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { "aria-label": "Delete Agent" }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Delete Agent" })
           ] })
         ]
@@ -42223,7 +42420,7 @@ const FieldContainer$5 = styled$1(Box)({
   marginBottom: 16
   // Reduced margin
 });
-const FieldLabel$8 = styled$1("label")(({ theme: theme2 }) => ({
+const FieldLabel$9 = styled$1("label")(({ theme: theme2 }) => ({
   display: "flex",
   alignItems: "center",
   marginBottom: 6,
@@ -42541,7 +42738,7 @@ const EditableField = ({
   const hasChanged = editValue !== originalValue;
   const showClearButton = !readOnly2 && !isSaving && originalValue !== "";
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldContainer$5, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldLabel$8, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldLabel$9, { children: [
       icon2 && /* @__PURE__ */ jsxRuntimeExports.jsx(LabelIcon$7, { children: icon2 }),
       label
     ] }),
@@ -46109,7 +46306,7 @@ const UpdateNotification = ({
           "Release Notes:",
           " ",
           typeof updateInfo.releaseNotes === "string" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-            parse$7(truncateText(updateInfo.releaseNotes, 400)),
+            parse$7(truncateText$1(updateInfo.releaseNotes, 400)),
             updateInfo.releaseNotes.length > 400 && /* @__PURE__ */ jsxRuntimeExports.jsx(
               Link$1,
               {
@@ -46391,7 +46588,7 @@ const UpdateNotification = ({
   }
   return null;
 };
-const truncateText = (text4, maxLength) => {
+const truncateText$1 = (text4, maxLength) => {
   if (text4.length <= maxLength) return text4;
   return `${text4.substring(0, maxLength)}...`;
 };
@@ -55826,7 +56023,7 @@ const CATEGORY_LABELS = Object.fromEntries(
 const FieldContainer$4 = styled$1(Box)({
   marginBottom: 16
 });
-const FieldLabel$7 = styled$1("label")(({ theme: theme2 }) => ({
+const FieldLabel$8 = styled$1("label")(({ theme: theme2 }) => ({
   display: "flex",
   alignItems: "center",
   marginBottom: 6,
@@ -55882,7 +56079,7 @@ const CategoriesInputChips = ({
     onChange(value.filter((c2) => c2 !== cat));
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldContainer$4, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldLabel$7, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldLabel$8, { children: [
       icon2 && /* @__PURE__ */ jsxRuntimeExports.jsx(LabelIcon$5, { children: icon2 }),
       label
     ] }),
@@ -56039,7 +56236,7 @@ const CategoriesInputChips = ({
 const FieldContainer$3 = styled$1(Box)({
   marginBottom: 16
 });
-const FieldLabel$6 = styled$1("label")(({ theme: theme2 }) => ({
+const FieldLabel$7 = styled$1("label")(({ theme: theme2 }) => ({
   display: "flex",
   alignItems: "center",
   marginBottom: 6,
@@ -56119,7 +56316,7 @@ const TagsInputChips = ({
     onChange(value.filter((t2) => t2 !== tag2));
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldContainer$3, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldLabel$6, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldLabel$7, { children: [
       icon2 && /* @__PURE__ */ jsxRuntimeExports.jsx(LabelIcon$4, { children: icon2 }),
       label
     ] }),
@@ -56269,7 +56466,7 @@ const FieldContainer$2 = styled$1(Box)({
   // Reduced margin
   position: "relative"
 });
-const FieldLabel$5 = styled$1(Typography)(({ theme: theme2 }) => ({
+const FieldLabel$6 = styled$1(Typography)(({ theme: theme2 }) => ({
   marginBottom: 6,
   // Reduced margin
   display: "flex",
@@ -56561,7 +56758,7 @@ const HostingSelect = ({
     }
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldContainer$2, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { title: "Select the AI provider that you want to use.  Each provider has different models available.  Recommended: Radient", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldLabel$5, { variant: "subtitle2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { title: "Select the AI provider that you want to use.  Each provider has different models available.  Recommended: Radient", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldLabel$6, { variant: "subtitle2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(LabelIcon$3, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faServer }) }),
       "Hosting Provider"
     ] }) }),
@@ -66049,7 +66246,7 @@ const FieldContainer$1 = styled$1(Box)({
   marginBottom: 16,
   position: "relative"
 });
-const FieldLabel$4 = styled$1(Typography)(({ theme: theme2 }) => ({
+const FieldLabel$5 = styled$1(Typography)(({ theme: theme2 }) => ({
   marginBottom: 6,
   display: "flex",
   alignItems: "center",
@@ -66354,7 +66551,7 @@ const ModelSelect = ({
     return "";
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldContainer$1, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { title: "Select the AI model that you want to use.  Each model has different capabilities and costs.  Recommended: Automatic", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldLabel$4, { variant: "subtitle2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { title: "Select the AI model that you want to use.  Each model has different capabilities and costs.  Recommended: Automatic", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldLabel$5, { variant: "subtitle2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(LabelIcon$2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faRobot }) }),
       "Model"
     ] }) }),
@@ -66478,7 +66675,7 @@ const FieldContainer = styled$1(Box)({
   position: "relative",
   marginBottom: 16
 });
-const FieldLabel$3 = styled$1("div")(({ theme: theme2 }) => ({
+const FieldLabel$4 = styled$1("div")(({ theme: theme2 }) => ({
   fontFamily: theme2.typography.fontFamily,
   fontSize: "0.875rem",
   // Small text size
@@ -66691,7 +66888,7 @@ const GeneralSettings = ({
           },
           `model-select-${selectedAgent.id}-${currentHosting}-${selectedAgent.model || (!selectedAgent.hosting && config2?.values.model_name ? config2.values.model_name : "default")}`
         ) : /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldContainer, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { title: "Select a hosting provider first, and then select the AI model that you want to use.  Each model has different capabilities and costs.  Recommended: Automatic", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldLabel$3, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { title: "Select a hosting provider first, and then select the AI model that you want to use.  Each model has different capabilities and costs.  Recommended: Automatic", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldLabel$4, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(LabelIcon$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faRobot }) }),
             "Model"
           ] }) }),
@@ -66793,14 +66990,14 @@ const GeneralSettings = ({
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { container: true, spacing: 3, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { item: true, xs: 12, sm: 6, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldLabel$3, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldLabel$4, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(LabelIcon$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faIdCard, size: "xs" }) }),
             "ID"
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(InfoCard, { title: selectedAgent.id, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MonospaceValueText, { children: selectedAgent.id }) })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { item: true, xs: 12, sm: 6, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldLabel$3, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldLabel$4, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(LabelIcon$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faCalendarAlt, size: "xs" }) }),
             "Created"
           ] }),
@@ -66813,7 +67010,7 @@ const GeneralSettings = ({
           )
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { item: true, xs: 12, sm: 6, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldLabel$3, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldLabel$4, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(LabelIcon$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faCodeBranch, size: "xs" }) }),
             "Version"
           ] }),
@@ -68107,6 +68304,7 @@ const defaultConversationCanvasState = {
   files: [],
   mentionedFiles: [],
   viewMode: "documents"
+  // Default to documents view
 };
 const getConversationState = (conversations, conversationId) => {
   const existing = conversations[conversationId];
@@ -86734,7 +86932,7 @@ const languages = [
     name: "Go",
     extensions: ["go"],
     load() {
-      return __vitePreload(() => import("./index-9ll8evaS.js"), true ? __vite__mapDeps([0,1,2]) : void 0, import.meta.url).then((m2) => m2.go());
+      return __vitePreload(() => import("./index-DyCWQ6pn.js"), true ? __vite__mapDeps([0,1,2]) : void 0, import.meta.url).then((m2) => m2.go());
     }
   }),
   /* @__PURE__ */ LanguageDescription.of({
@@ -86911,7 +87109,7 @@ const languages = [
     alias: ["yml"],
     extensions: ["yaml", "yml"],
     load() {
-      return __vitePreload(() => import("./index-BcAunMPD.js"), true ? __vite__mapDeps([3,1,2]) : void 0, import.meta.url).then((m2) => m2.yaml());
+      return __vitePreload(() => import("./index-BkfYRfhG.js"), true ? __vite__mapDeps([3,1,2]) : void 0, import.meta.url).then((m2) => m2.yaml());
     }
   }),
   // Legacy modes ported from CodeMirror 5
@@ -93596,7 +93794,7 @@ function configureNesting$1(tags2 = [], attributes2 = []) {
     return null;
   });
 }
-const descendantOp$2 = 101, Unit$3 = 1, callee$1 = 102, identifier$7 = 103, VariableName$1 = 2;
+const descendantOp$2 = 101, Unit$3 = 1, callee$1 = 102, identifier$7 = 103, VariableName$2 = 2;
 const space$6 = [
   9,
   10,
@@ -93644,7 +93842,7 @@ const identifiers$a = new ExternalTokenizer((input, stack) => {
       inside2 = true;
     } else {
       if (inside2)
-        input.acceptToken(next2 == parenL$2 ? callee$1 : dashes == 2 && stack.canShift(VariableName$1) ? VariableName$1 : identifier$7);
+        input.acceptToken(next2 == parenL$2 ? callee$1 : dashes == 2 && stack.canShift(VariableName$2) ? VariableName$2 : identifier$7);
       break;
     }
   }
@@ -96490,7 +96688,7 @@ const index$d = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePrope
   lessCompletionSource,
   lessLanguage
 }, Symbol.toStringTag, { value: "Module" }));
-const indent$5 = 154, dedent$4 = 155, descendantOp = 156, InterpolationEnd = 1, InterpolationContinue = 2, Unit$1 = 3, callee = 157, identifier$4 = 158, VariableName = 4, InterpolationStart = 5, newline$4 = 159, blankLineStart$1 = 160, eof$2 = 161, whitespace$4 = 162, LineComment$1 = 6, Comment = 7, IndentedMixin = 8, IndentedInclude = 9, Dialect_indented = 0;
+const indent$5 = 154, dedent$4 = 155, descendantOp = 156, InterpolationEnd = 1, InterpolationContinue = 2, Unit$1 = 3, callee = 157, identifier$4 = 158, VariableName$1 = 4, InterpolationStart = 5, newline$4 = 159, blankLineStart$1 = 160, eof$2 = 161, whitespace$4 = 162, LineComment$1 = 6, Comment = 7, IndentedMixin = 8, IndentedInclude = 9, Dialect_indented = 0;
 const space$3 = [
   9,
   10,
@@ -96652,7 +96850,7 @@ const identifiers$9 = new ExternalTokenizer((input, stack) => {
       break;
     } else {
       if (inside2)
-        input.acceptToken(next2 == parenL$1 ? callee : dashes == 2 && stack.canShift(VariableName) ? VariableName : identifier$4);
+        input.acceptToken(next2 == parenL$1 ? callee : dashes == 2 && stack.canShift(VariableName$1) ? VariableName$1 : identifier$4);
       break;
     }
   }
@@ -169350,7 +169548,7 @@ var registerDefaultLayoutLoaders = /* @__PURE__ */ __name(() => {
   registerLayoutLoaders([
     {
       name: "dagre",
-      loader: /* @__PURE__ */ __name(async () => await __vitePreload(() => import("./dagre-OKDRZEBW-BRmuP5ne.js"), true ? __vite__mapDeps([6,7,8,9,10,11,1,2]) : void 0, import.meta.url), "loader")
+      loader: /* @__PURE__ */ __name(async () => await __vitePreload(() => import("./dagre-OKDRZEBW-CuBbVbAE.js"), true ? __vite__mapDeps([6,7,8,9,10,11,1,2]) : void 0, import.meta.url), "loader")
     }
   ]);
 }, "registerDefaultLayoutLoaders");
@@ -169940,7 +170138,7 @@ var detector = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./c4Diagram-VJAJSXHY-CUWQVTBw.js");
+    const { diagram: diagram22 } = await import("./c4Diagram-VJAJSXHY-DPAI5Oul.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([12,13,1,2]) : void 0, import.meta.url);
   return { id, diagram: diagram2 };
@@ -169960,7 +170158,7 @@ var detector2 = /* @__PURE__ */ __name((txt, config2) => {
 }, "detector");
 var loader2 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./flowDiagram-4HSFHLVR-DO9xIDx0.js");
+    const { diagram: diagram22 } = await import("./flowDiagram-4HSFHLVR-COKwAFv7.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([14,15,16,1,2]) : void 0, import.meta.url);
   return { id: id2, diagram: diagram2 };
@@ -169986,7 +170184,7 @@ var detector3 = /* @__PURE__ */ __name((txt, config2) => {
 }, "detector");
 var loader3 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./flowDiagram-4HSFHLVR-DO9xIDx0.js");
+    const { diagram: diagram22 } = await import("./flowDiagram-4HSFHLVR-COKwAFv7.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([14,15,16,1,2]) : void 0, import.meta.url);
   return { id: id3, diagram: diagram2 };
@@ -170003,7 +170201,7 @@ var detector4 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader4 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./erDiagram-Q7BY3M3F-B_3VyDfP.js");
+    const { diagram: diagram22 } = await import("./erDiagram-Q7BY3M3F-hAtjkKRt.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([17,15,16,1,2]) : void 0, import.meta.url);
   return { id: id4, diagram: diagram2 };
@@ -170020,7 +170218,7 @@ var detector5 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader5 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./gitGraphDiagram-7IBYFJ6S-Jz6QBGPa.js");
+    const { diagram: diagram22 } = await import("./gitGraphDiagram-7IBYFJ6S-CCkiOue7.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([18,19,20,21,8,10,11,1,2]) : void 0, import.meta.url);
   return { id: id5, diagram: diagram2 };
@@ -170037,7 +170235,7 @@ var detector6 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader6 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./ganttDiagram-APWFNJXF-BK37zBtS.js");
+    const { diagram: diagram22 } = await import("./ganttDiagram-APWFNJXF-DzqtejzU.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([22,1,2]) : void 0, import.meta.url);
   return { id: id6, diagram: diagram2 };
@@ -170054,7 +170252,7 @@ var detector7 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader7 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./infoDiagram-PH2N3AL5-BrTEa3Dg.js");
+    const { diagram: diagram22 } = await import("./infoDiagram-PH2N3AL5-D2pi_Avu.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([23,21,8,10,11,1,2]) : void 0, import.meta.url);
   return { id: id7, diagram: diagram2 };
@@ -170070,7 +170268,7 @@ var detector8 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader8 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./pieDiagram-IB7DONF6-D_aSId8t.js");
+    const { diagram: diagram22 } = await import("./pieDiagram-IB7DONF6-CzpV9GLV.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([24,19,21,8,10,11,25,1,2]) : void 0, import.meta.url);
   return { id: id8, diagram: diagram2 };
@@ -170086,7 +170284,7 @@ var detector9 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader9 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./quadrantDiagram-7GDLP6J5-VtpoaDCW.js");
+    const { diagram: diagram22 } = await import("./quadrantDiagram-7GDLP6J5-TRIu05Kz.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([26,1,2]) : void 0, import.meta.url);
   return { id: id9, diagram: diagram2 };
@@ -170103,7 +170301,7 @@ var detector10 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader10 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./xychartDiagram-VJFVF3MP-gjn-8kXQ.js");
+    const { diagram: diagram22 } = await import("./xychartDiagram-VJFVF3MP-BWFbhKHp.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([27,1,2]) : void 0, import.meta.url);
   return { id: id10, diagram: diagram2 };
@@ -170120,7 +170318,7 @@ var detector11 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader11 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./requirementDiagram-KVF5MWMF-DmQX7SmX.js");
+    const { diagram: diagram22 } = await import("./requirementDiagram-KVF5MWMF-DtZxlcxe.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([28,15,1,2]) : void 0, import.meta.url);
   return { id: id11, diagram: diagram2 };
@@ -170137,7 +170335,7 @@ var detector12 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader12 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./sequenceDiagram-X6HHIX6F-Cy6jqgLY.js");
+    const { diagram: diagram22 } = await import("./sequenceDiagram-X6HHIX6F-DXZSfjCv.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([29,13,20,1,2]) : void 0, import.meta.url);
   return { id: id12, diagram: diagram2 };
@@ -170157,7 +170355,7 @@ var detector13 = /* @__PURE__ */ __name((txt, config2) => {
 }, "detector");
 var loader13 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./classDiagram-GIVACNV2-D_MSeJ_6.js");
+    const { diagram: diagram22 } = await import("./classDiagram-GIVACNV2-B-m9p15O.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([30,31,15,1,2]) : void 0, import.meta.url);
   return { id: id13, diagram: diagram2 };
@@ -170177,7 +170375,7 @@ var detector14 = /* @__PURE__ */ __name((txt, config2) => {
 }, "detector");
 var loader14 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./classDiagram-v2-COTLJTTW-D_MSeJ_6.js");
+    const { diagram: diagram22 } = await import("./classDiagram-v2-COTLJTTW-B-m9p15O.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([32,31,15,1,2]) : void 0, import.meta.url);
   return { id: id14, diagram: diagram2 };
@@ -170197,7 +170395,7 @@ var detector15 = /* @__PURE__ */ __name((txt, config2) => {
 }, "detector");
 var loader15 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./stateDiagram-DGXRK772-B5sjzMc3.js");
+    const { diagram: diagram22 } = await import("./stateDiagram-DGXRK772-gJvvYfHT.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([33,34,15,7,8,9,10,1,2]) : void 0, import.meta.url);
   return { id: id15, diagram: diagram2 };
@@ -170220,7 +170418,7 @@ var detector16 = /* @__PURE__ */ __name((txt, config2) => {
 }, "detector");
 var loader16 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./stateDiagram-v2-YXO3MK2T-CCntK586.js");
+    const { diagram: diagram22 } = await import("./stateDiagram-v2-YXO3MK2T-DUjC-b8t.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([35,34,15,1,2]) : void 0, import.meta.url);
   return { id: id16, diagram: diagram2 };
@@ -170237,7 +170435,7 @@ var detector17 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader17 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./journeyDiagram-U35MCT3I-cp-7j6JH.js");
+    const { diagram: diagram22 } = await import("./journeyDiagram-U35MCT3I-CYV7gt8_.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([36,13,25,1,2]) : void 0, import.meta.url);
   return { id: id17, diagram: diagram2 };
@@ -170307,7 +170505,7 @@ var detector18 = /* @__PURE__ */ __name((txt, config2 = {}) => {
 }, "detector");
 var loader18 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./flowDiagram-4HSFHLVR-DO9xIDx0.js");
+    const { diagram: diagram22 } = await import("./flowDiagram-4HSFHLVR-COKwAFv7.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([14,15,16,1,2]) : void 0, import.meta.url);
   return { id: id18, diagram: diagram2 };
@@ -170324,7 +170522,7 @@ var detector19 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader19 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./timeline-definition-BDJGKUSR-B24Z4NA2.js");
+    const { diagram: diagram22 } = await import("./timeline-definition-BDJGKUSR-DpFxQaCe.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([37,25,1,2]) : void 0, import.meta.url);
   return { id: id19, diagram: diagram2 };
@@ -170341,7 +170539,7 @@ var detector20 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader20 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./mindmap-definition-ALO5MXBD-B8ntf-YJ.js");
+    const { diagram: diagram22 } = await import("./mindmap-definition-ALO5MXBD-ByeOpUXU.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([38,39,1,2]) : void 0, import.meta.url);
   return { id: id20, diagram: diagram2 };
@@ -170358,7 +170556,7 @@ var detector21 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader21 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./kanban-definition-NDS4AKOZ-DT0Ds4_6.js");
+    const { diagram: diagram22 } = await import("./kanban-definition-NDS4AKOZ-z_jHtS3N.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([40,1,2]) : void 0, import.meta.url);
   return { id: id21, diagram: diagram2 };
@@ -170375,7 +170573,7 @@ var detector22 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader22 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./sankeyDiagram-QLVOVGJD-DH2kTl35.js");
+    const { diagram: diagram22 } = await import("./sankeyDiagram-QLVOVGJD-CsDA2pgF.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([41,1,2]) : void 0, import.meta.url);
   return { id: id22, diagram: diagram2 };
@@ -170392,7 +170590,7 @@ var detector23 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader23 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./diagram-VNBRO52H-Bxh5b-em.js");
+    const { diagram: diagram22 } = await import("./diagram-VNBRO52H-CptIzsnS.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([42,19,21,8,10,11,1,2]) : void 0, import.meta.url);
   return { id: id23, diagram: diagram2 };
@@ -170408,7 +170606,7 @@ var detector24 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader24 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./diagram-SSKATNLV-lmqZ5zjv.js");
+    const { diagram: diagram22 } = await import("./diagram-SSKATNLV-Ddt-5-58.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([43,19,21,8,10,11,1,2]) : void 0, import.meta.url);
   return { id: id24, diagram: diagram2 };
@@ -170424,7 +170622,7 @@ var detector25 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader25 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./blockDiagram-JOT3LUYC-boa_T8E1.js");
+    const { diagram: diagram22 } = await import("./blockDiagram-JOT3LUYC-Ct7Hjgdp.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([44,11,8,7,16,1,2]) : void 0, import.meta.url);
   return { id: id25, diagram: diagram2 };
@@ -170441,7 +170639,7 @@ var detector26 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader26 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./architectureDiagram-IEHRJDOE-DzXvnk9f.js");
+    const { diagram: diagram22 } = await import("./architectureDiagram-IEHRJDOE-iZe3FGai.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([45,19,20,21,8,10,11,39,1,2]) : void 0, import.meta.url);
   return { id: id26, diagram: diagram2 };
@@ -171956,6 +172154,133 @@ const isCanvasSupported = (fileName) => {
   const ext = fileName.toLowerCase().split("/").pop()?.split(".").pop() ?? "";
   return canvasSupportedExtensions.has(ext);
 };
+const FileActionsIconButton = styled$1(IconButton)(({ theme: theme2 }) => ({
+  borderRadius: "0.375rem",
+  // rounded-md
+  padding: theme2.spacing(0.5),
+  left: theme2.spacing(1),
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transition: "background-color 0.2s",
+  background: "transparent",
+  "&:hover": {
+    backgroundColor: theme2.palette.mode === "dark" ? alpha$1(theme2.palette.common.white, 0.08) : alpha$1(theme2.palette.common.black, 0.08)
+  }
+}));
+const StyledFileActionsMenu = styled$1(Menu)(({ theme: theme2 }) => ({
+  "& .MuiPaper-root": {
+    minWidth: 180,
+    // shadcn menus are wider
+    boxShadow: theme2.palette.mode === "dark" ? "0px 8px 32px 0px rgba(0,0,0,0.45)" : "0px 8px 32px 0px rgba(0,0,0,0.15)",
+    borderRadius: "0.75rem",
+    // rounded-xl
+    padding: "0.25rem",
+    // p-1
+    background: theme2.palette.background.paper
+  }
+}));
+const StyledMenuItem$2 = styled$1(MenuItem)(({ theme: theme2 }) => ({
+  borderRadius: "0.375rem",
+  // rounded-md
+  padding: "0.5rem 0.75rem",
+  // py-2 px-3
+  fontSize: "0.875rem",
+  // text-sm
+  fontWeight: 500,
+  gap: "0.75rem",
+  // gap-3
+  minHeight: "2.25rem",
+  // h-9
+  "&:hover": {
+    backgroundColor: theme2.palette.mode === "dark" ? alpha$1(theme2.palette.primary.main, 0.1) : alpha$1(theme2.palette.primary.main, 0.08)
+  }
+}));
+const MenuItemIcon$1 = styled$1(ListItemIcon)(({ theme: theme2 }) => ({
+  color: theme2.palette.text.primary,
+  minWidth: 0,
+  marginRight: "0.75rem",
+  // gap-3
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  "& svg": {
+    width: "1.125rem",
+    // w-4.5
+    height: "1.125rem",
+    strokeWidth: 1.8
+  }
+}));
+const FileActionsMenu = ({
+  filePath,
+  tooltip = "File actions",
+  icon: icon2,
+  "aria-label": ariaLabel = "File actions",
+  onShowInCanvas
+}) => {
+  const [anchorEl, setAnchorEl] = reactExports.useState(null);
+  const handleOpenMenu = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleCloseMenu = () => {
+    setAnchorEl(null);
+  };
+  const handleOpenFile = () => {
+    handleCloseMenu();
+    if (filePath) {
+      window.api.openFile(filePath);
+    }
+  };
+  const handleShowInCanvas = () => {
+    handleCloseMenu();
+    if (onShowInCanvas) {
+      onShowInCanvas();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { title: tooltip, arrow: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FileActionsIconButton, { "aria-label": ariaLabel, onClick: handleOpenMenu, children: icon2 ?? /* @__PURE__ */ jsxRuntimeExports.jsx(Ellipsis, { style: { width: "1.125rem", height: "1.125rem" } }) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      StyledFileActionsMenu,
+      {
+        anchorEl,
+        open: Boolean(anchorEl),
+        onClose: handleCloseMenu,
+        onClick: (e3) => e3.stopPropagation(),
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "right"
+        },
+        children: [
+          onShowInCanvas && /* @__PURE__ */ jsxRuntimeExports.jsxs(StyledMenuItem$2, { onClick: handleShowInCanvas, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItemIcon$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(LayoutGrid, { "aria-label": "Show in Canvas" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Show in Canvas" })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(StyledMenuItem$2, { onClick: handleOpenFile, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItemIcon$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(File$1, { "aria-label": "Open File" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Open File" })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            StyledMenuItem$2,
+            {
+              onClick: () => {
+                handleCloseMenu();
+                window.api.showItemInFolder(filePath);
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItemIcon$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FolderOpen, { "aria-label": "Open Folder" }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Open Folder" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
 const defaultFiles = [];
 const StyledCard$1 = styled$1(Card)(({ theme: theme2 }) => ({
   display: "flex",
@@ -172221,40 +172546,64 @@ const CanvasFileViewer = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { p: 2, height: "100%", overflowY: "auto" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { container: true, spacing: 2, children: memoizedFiles.map((fileDoc) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { p: 3, height: "100%", overflowY: "auto" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { container: true, spacing: 2, children: memoizedFiles.map((fileDoc) => {
     const IconComponent = getIconForFileType(fileDoc.type);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { item: true, xs: 6, sm: 4, md: 4, children: /* @__PURE__ */ jsxRuntimeExports.jsx(StyledCard$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      CardActionArea,
-      {
-        onClick: () => handleFileClick(fileDoc),
-        sx: { display: "flex", flexDirection: "column", flexGrow: 1 },
-        children: [
-          fileDoc.type === "image" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-            StyledImage,
-            {
-              src: getUrl2(fileDoc.path),
-              alt: fileDoc.title,
-              title: fileDoc.title
-            }
-          ) : fileDoc.type === "video" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-            StyledVideo,
-            {
-              src: getUrl2(fileDoc.path),
-              title: fileDoc.title,
-              controls: true,
-              preload: "metadata"
-            }
-          ) : /* @__PURE__ */ jsxRuntimeExports.jsx(IconBox, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconComponent, { size: 48, strokeWidth: 1 }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            CardContent,
+    const isLocalFile = !fileDoc.path.startsWith("data:") && !fileDoc.path.startsWith("http");
+    const normalizedPath = fileDoc.path.startsWith("file://") ? fileDoc.path.substring(7) : fileDoc.path;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { item: true, xs: 6, sm: 4, md: 4, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(StyledCard$1, { sx: { position: "relative" }, children: [
+      isLocalFile && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Box,
+        {
+          sx: {
+            position: "absolute",
+            top: 4,
+            right: 4,
+            zIndex: 2
+          },
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            FileActionsMenu,
             {
-              sx: { width: "100%", pt: 1, pb: "8px !important" },
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { title: fileDoc.title, placement: "bottom", arrow: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FileNameTypography, { variant: "caption", children: getFileName$4(fileDoc.title) }) })
+              filePath: normalizedPath,
+              tooltip: "File actions",
+              "aria-label": "File actions",
+              onShowInCanvas: () => handleFileClick(fileDoc)
             }
           )
-        ]
-      }
-    ) }) }, fileDoc.id);
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        CardActionArea,
+        {
+          onClick: () => handleFileClick(fileDoc),
+          sx: { display: "flex", flexDirection: "column", flexGrow: 1 },
+          children: [
+            fileDoc.type === "image" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+              StyledImage,
+              {
+                src: getUrl2(fileDoc.path),
+                alt: fileDoc.title,
+                title: fileDoc.title
+              }
+            ) : fileDoc.type === "video" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+              StyledVideo,
+              {
+                src: getUrl2(fileDoc.path),
+                title: fileDoc.title,
+                controls: true,
+                preload: "metadata"
+              }
+            ) : /* @__PURE__ */ jsxRuntimeExports.jsx(IconBox, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconComponent, { size: 48, strokeWidth: 1 }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              CardContent,
+              {
+                sx: { width: "100%", pt: 1, pb: "8px !important" },
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { title: fileDoc.title, placement: "bottom", arrow: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FileNameTypography, { variant: "caption", children: getFileName$4(fileDoc.title) }) })
+              }
+            )
+          ]
+        }
+      )
+    ] }) }, fileDoc.id);
   }) }) });
 };
 const StyledTabs = styled$1(Tabs)(({ theme: theme2 }) => ({
@@ -172373,6 +172722,897 @@ const CanvasTabsComponent = ({
   ) });
 };
 const CanvasTabs = reactExports.memo(CanvasTabsComponent);
+const useAgentExecutionVariables = (agentId) => {
+  const client = reactExports.useMemo(
+    () => createLocalOperatorClient(apiConfig.baseUrl),
+    []
+  );
+  return useQuery({
+    queryKey: ["agentExecutionVariables", agentId],
+    queryFn: async () => {
+      if (!agentId) {
+        throw new Error("Agent ID is required to fetch execution variables.");
+      }
+      return client.agents.listAgentExecutionVariables(agentId);
+    },
+    enabled: !!agentId
+    // Only run the query if agentId is provided
+  });
+};
+const useCreateAgentExecutionVariable = () => {
+  const queryClient2 = useQueryClient();
+  const client = reactExports.useMemo(
+    () => createLocalOperatorClient(apiConfig.baseUrl),
+    []
+  );
+  return useMutation({
+    mutationFn: async ({ agentId, variableData }) => client.agents.createAgentExecutionVariable(agentId, variableData),
+    onSuccess: (_data, variables) => {
+      queryClient2.invalidateQueries({
+        queryKey: ["agentExecutionVariables", variables.agentId]
+      });
+      showSuccessToast("Variable created successfully.");
+    },
+    onError: (error) => {
+      showErrorToast(`Failed to create variable: ${error.message}`);
+    }
+  });
+};
+const useUpdateAgentExecutionVariable = () => {
+  const queryClient2 = useQueryClient();
+  const client = reactExports.useMemo(
+    () => createLocalOperatorClient(apiConfig.baseUrl),
+    []
+  );
+  return useMutation({
+    mutationFn: async ({ agentId, variableKey, variableData }) => client.agents.updateAgentExecutionVariable(
+      agentId,
+      variableKey,
+      variableData
+    ),
+    onSuccess: (_data, variables) => {
+      queryClient2.invalidateQueries({
+        queryKey: ["agentExecutionVariables", variables.agentId]
+      });
+      showSuccessToast("Variable updated successfully.");
+    },
+    onError: (error) => {
+      showErrorToast(`Failed to update variable: ${error.message}`);
+    }
+  });
+};
+const useDeleteAgentExecutionVariable = () => {
+  const queryClient2 = useQueryClient();
+  const client = reactExports.useMemo(
+    () => createLocalOperatorClient(apiConfig.baseUrl),
+    []
+  );
+  return useMutation({
+    mutationFn: async ({ agentId, variableKey }) => client.agents.deleteAgentExecutionVariable(agentId, variableKey),
+    onSuccess: (_data, variables) => {
+      queryClient2.invalidateQueries({
+        queryKey: ["agentExecutionVariables", variables.agentId]
+      });
+      showSuccessToast("Variable deleted successfully.");
+    },
+    onError: (error) => {
+      showErrorToast(`Failed to delete variable: ${error.message}`);
+    }
+  });
+};
+const StyledFormGrid$1 = styled$1(Grid)(({ theme: theme2 }) => ({
+  paddingTop: theme2.spacing(1)
+}));
+const FieldLabel$3 = styled$1("label")(({ theme: theme2 }) => ({
+  display: "block",
+  marginBottom: theme2.spacing(0.75),
+  color: theme2.palette.text.secondary,
+  fontWeight: 500,
+  fontSize: "0.875rem",
+  lineHeight: 1.5
+}));
+const FullWidthTextField$1 = styled$1(TextField)(({ theme: theme2 }) => ({
+  width: "100%",
+  "& .MuiOutlinedInput-root": {
+    borderRadius: 6,
+    border: `1px solid ${theme2.palette.divider}`,
+    backgroundColor: theme2.palette.background.paper,
+    minHeight: "36px",
+    // height: "36px", // Allow dynamic height for multiline
+    padding: 0,
+    transition: "border-color 0.2s ease, box-shadow 0.2s ease",
+    "&:hover": {
+      borderColor: theme2.palette.text.secondary
+    },
+    "&.Mui-focused": {
+      borderColor: theme2.palette.primary.main,
+      boxShadow: `0 0 0 2px ${alpha$1(theme2.palette.primary.main, 0.2)}`
+    },
+    "& .MuiOutlinedInput-notchedOutline": {
+      border: "none"
+    },
+    "&:not(.MuiInputBase-multiline) .MuiInputBase-input": {
+      height: "calc(36px - 16px)",
+      padding: "8px 12px"
+    },
+    "&.MuiInputBase-multiline": {
+      minHeight: "36px",
+      height: "auto",
+      padding: "8px 12px"
+      // Ensure padding for multiline input area
+    }
+  },
+  "& .MuiInputBase-input": {
+    fontSize: "0.875rem",
+    lineHeight: 1.5,
+    boxSizing: "border-box",
+    "&.MuiInputBase-inputMultiline": {
+      padding: "0px",
+      // Padding is handled by the root's multiline style
+      height: "auto"
+    }
+  }
+}));
+const FullWidthFormControl$1 = styled$1(FormControl)(({ theme: theme2 }) => ({
+  width: "100%",
+  "& .MuiOutlinedInput-root": {
+    borderRadius: 6,
+    border: `1px solid ${theme2.palette.divider}`,
+    backgroundColor: theme2.palette.background.paper,
+    minHeight: "36px",
+    height: "36px",
+    padding: "0 !important",
+    transition: "border-color 0.2s ease, box-shadow 0.2s ease",
+    "&:hover": {
+      borderColor: theme2.palette.text.secondary
+    },
+    "&.Mui-focused": {
+      borderColor: theme2.palette.primary.main,
+      boxShadow: `0 0 0 2px ${alpha$1(theme2.palette.primary.main, 0.2)}`
+    },
+    "& .MuiOutlinedInput-notchedOutline": {
+      border: "none"
+    }
+  },
+  "& .MuiSelect-select": {
+    padding: "8px 12px !important",
+    fontSize: "0.875rem",
+    lineHeight: 1.5,
+    height: "calc(36px - 16px) !important",
+    boxSizing: "border-box",
+    display: "flex",
+    alignItems: "center"
+  }
+}));
+const StyledMenuItem$1 = styled$1(MenuItem)(({ theme: theme2 }) => ({
+  fontSize: "0.875rem",
+  paddingTop: theme2.spacing(1),
+  paddingBottom: theme2.spacing(1),
+  "&:hover": {
+    backgroundColor: alpha$1(theme2.palette.action.hover, 0.08)
+  },
+  "&.Mui-selected": {
+    backgroundColor: alpha$1(theme2.palette.primary.main, 0.12),
+    "&:hover": {
+      backgroundColor: alpha$1(theme2.palette.primary.main, 0.16)
+    }
+  }
+}));
+const VARIABLE_TYPES = [
+  "string",
+  "int",
+  "float",
+  "bool",
+  "dict",
+  "list"
+];
+const getDefaultFormState = (initialData) => {
+  if (initialData) {
+    let valueString;
+    if (initialData.type === "object" || initialData.type === "array") {
+      try {
+        valueString = JSON.stringify(initialData.value, null, 2);
+      } catch (_2) {
+        valueString = String(initialData.value);
+      }
+    } else if (initialData.type === "boolean") {
+      valueString = String(initialData.value);
+    } else {
+      valueString = String(initialData.value);
+    }
+    return {
+      key: initialData.key,
+      type: initialData.type,
+      value: valueString
+    };
+  }
+  return {
+    key: "",
+    type: "string",
+    value: ""
+  };
+};
+const VariableFormDialog = ({
+  open: open2,
+  onClose,
+  onSubmit,
+  initialData
+}) => {
+  const [formData, setFormData] = reactExports.useState(
+    getDefaultFormState(initialData)
+  );
+  const [isSubmitting, setIsSubmitting] = reactExports.useState(false);
+  const isEditMode = !!initialData;
+  reactExports.useEffect(() => {
+    if (open2) {
+      setFormData(getDefaultFormState(initialData));
+    }
+  }, [open2, initialData]);
+  const handleChange = (event) => {
+    const { name: name2, value } = event.target;
+    setFormData((prev2) => ({
+      ...prev2,
+      [name2]: value
+    }));
+  };
+  const handleSubmit = async () => {
+    setIsSubmitting(true);
+    try {
+      const variableToSubmit = {
+        key: formData.key,
+        type: formData.type,
+        value: formData.value
+      };
+      await onSubmit(variableToSubmit);
+      onClose();
+    } catch (error) {
+      console.error("Failed to submit variable:", error);
+      showErrorToast(
+        `Failed to save variable: ${error instanceof Error ? error.message : "Unknown error"}`
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const dialogTitle = isEditMode ? "Edit Execution Variable" : "Create Execution Variable";
+  const dialogActions = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SecondaryButton$1,
+      {
+        onClick: onClose,
+        disabled: isSubmitting,
+        startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(SquareX, { size: 18 }),
+        children: "Cancel"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      PrimaryButton$1,
+      {
+        onClick: handleSubmit,
+        disabled: isSubmitting || !formData.key.trim(),
+        startIcon: isSubmitting ? /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Save, { size: 18 }),
+        children: isSubmitting ? "Saving..." : isEditMode ? "Save Changes" : "Create Variable"
+      }
+    )
+  ] });
+  const valueFieldLabel = reactExports.useMemo(() => {
+    switch (formData.type) {
+      case "object":
+        return "Value (JSON Object)";
+      case "array":
+        return "Value (JSON Array)";
+      case "boolean":
+        return "Value (true/false)";
+      default:
+        return "Value";
+    }
+  }, [formData.type]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    BaseDialog,
+    {
+      open: open2,
+      onClose,
+      title: dialogTitle,
+      actions: dialogActions,
+      maxWidth: "sm",
+      fullWidth: true,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(StyledFormGrid$1, { container: true, spacing: 2.5, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { item: true, xs: 12, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldLabel$3, { htmlFor: "variable-key", children: [
+            "Name (Key)",
+            " ",
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { component: "span", color: "error.main", sx: { ml: 0.5 }, children: "*" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Tooltip$1,
+              {
+                title: "The unique identifier for the variable (e.g., 'api_key', 'user_preference'). Cannot be changed after creation.",
+                placement: "top-start",
+                arrow: true,
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton, { size: "small", sx: { color: "info.main", ml: 0.5 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Info$1, { size: 14 }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            FullWidthTextField$1,
+            {
+              id: "variable-key",
+              name: "key",
+              value: formData.key,
+              onChange: handleChange,
+              required: true,
+              disabled: isSubmitting || isEditMode,
+              placeholder: "e.g., my_variable_name"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { item: true, xs: 12, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldLabel$3, { htmlFor: "variable-type-select", children: [
+            "Type",
+            " ",
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { component: "span", color: "error.main", sx: { ml: 0.5 }, children: "*" })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            FullWidthFormControl$1,
+            {
+              required: true,
+              disabled: isSubmitting,
+              id: "variable-type-select-formcontrol",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Select,
+                {
+                  id: "variable-type-select",
+                  name: "type",
+                  value: formData.type,
+                  onChange: handleChange,
+                  children: VARIABLE_TYPES.map((type2) => /* @__PURE__ */ jsxRuntimeExports.jsx(StyledMenuItem$1, { value: type2, children: type2.charAt(0).toUpperCase() + type2.slice(1) }, type2))
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { item: true, xs: 12, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldLabel$3, { htmlFor: "variable-value", children: [
+            valueFieldLabel,
+            " ",
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { component: "span", color: "error.main", sx: { ml: 0.5 }, children: "*" })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            FullWidthTextField$1,
+            {
+              id: "variable-value",
+              name: "value",
+              value: formData.value,
+              onChange: handleChange,
+              required: true,
+              disabled: isSubmitting,
+              multiline: true,
+              rows: formData.type === "object" || formData.type === "array" ? 5 : 2,
+              placeholder: formData.type === "object" ? `{ "example_key": "example_value" }` : formData.type === "array" ? `[ "item1", "item2" ]` : formData.type === "boolean" ? "true or false" : "Enter variable value"
+            }
+          ),
+          (formData.type === "object" || formData.type === "array") && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Typography,
+            {
+              variant: "caption",
+              color: "text.secondary",
+              sx: { mt: 0.5, display: "block" },
+              children: "Enter a valid JSON structure."
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+const VariableListContainer = styled$1(Box)(({ theme: theme2 }) => ({
+  border: `1px solid ${theme2.palette.divider}`,
+  borderRadius: theme2.shape.borderRadius,
+  backgroundColor: theme2.palette.mode === "dark" ? alpha$1(theme2.palette.background.paper, 0.3) : alpha$1(theme2.palette.grey[50], 0.7),
+  overflow: "auto",
+  maxHeight: "100%",
+  "&::-webkit-scrollbar": {
+    width: "8px"
+  },
+  "&::-webkit-scrollbar-thumb": {
+    backgroundColor: theme2.palette.mode === "dark" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.2)",
+    borderRadius: "4px"
+  },
+  scrollbarWidth: "thin",
+  scrollbarColor: theme2.palette.mode === "dark" ? "rgba(255,255,255,0.1) transparent" : "rgba(0,0,0,0.2) transparent",
+  flex: 1
+}));
+const VariableItem = styled$1(Box)(({ theme: theme2 }) => ({
+  display: "flex",
+  alignItems: "center",
+  padding: theme2.spacing(0.75, 1),
+  borderBottom: `1px solid ${theme2.palette.divider}`,
+  "&:last-child": {
+    borderBottom: "none"
+  },
+  fontSize: "0.8rem"
+}));
+const VariableName = styled$1(Typography)(({ theme: theme2 }) => ({
+  marginLeft: theme2.spacing(0.5),
+  fontWeight: 500,
+  color: theme2.palette.text.primary,
+  marginRight: theme2.spacing(1),
+  fontFamily: "monospace",
+  // PyCharm uses monospace for variables
+  fontSize: "0.8rem"
+}));
+const VariableType = styled$1(Typography)(({ theme: theme2 }) => ({
+  color: theme2.palette.text.secondary,
+  fontStyle: "italic",
+  marginRight: theme2.spacing(1),
+  fontFamily: "monospace",
+  fontSize: "0.8rem"
+}));
+const VariableValue = styled$1(Typography)(({ theme: theme2 }) => ({
+  color: theme2.palette.text.secondary,
+  flexGrow: 1,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  fontFamily: "monospace",
+  maxWidth: "100%",
+  fontSize: "0.8rem"
+}));
+const VariableActions = styled$1(Box)(({ theme: theme2 }) => ({
+  display: "flex",
+  alignItems: "center",
+  marginLeft: theme2.spacing(1)
+}));
+const CenteredBox = styled$1(Box)(({ theme: theme2 }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  height: "100%",
+  padding: theme2.spacing(2),
+  textAlign: "center"
+}));
+const ExpandButton = styled$1(IconButton)(({ theme: theme2 }) => ({
+  width: 20,
+  height: 20,
+  marginRight: theme2.spacing(0.5),
+  border: `1px solid ${theme2.palette.divider}`,
+  borderRadius: 2,
+  padding: 0,
+  "&:hover": {
+    backgroundColor: alpha$1(theme2.palette.action.hover, 0.08)
+  }
+}));
+const truncateText = (text4, maxLength) => {
+  if (text4.length <= maxLength) return text4;
+  return `${text4.substring(0, maxLength)}...`;
+};
+const EDITABLE_TYPES = /* @__PURE__ */ new Set(["str", "int", "float", "list", "dict", "bool"]);
+const VariableRow = reactExports.memo(
+  ({ variable: variable2, onEdit, onDelete }) => {
+    const theme2 = useTheme$2();
+    const [expanded, setExpanded] = reactExports.useState(false);
+    const [copied, setCopied] = reactExports.useState(false);
+    const isEditable = reactExports.useMemo(
+      () => EDITABLE_TYPES.has(variable2.type),
+      [variable2.type]
+    );
+    const stringValue = reactExports.useMemo(() => String(variable2.value), [variable2.value]);
+    const truncatedValue = reactExports.useMemo(
+      () => truncateText(stringValue, 200),
+      [stringValue]
+    );
+    const tooltipValue = reactExports.useMemo(
+      () => truncateText(stringValue, 1e3),
+      [stringValue]
+    );
+    const typeDisplay = reactExports.useMemo(() => `{${variable2.type}}`, [variable2.type]);
+    const itemStyles = reactExports.useMemo(
+      () => ({
+        cursor: "pointer",
+        "&:hover": {
+          backgroundColor: alpha$1(theme2.palette.action.hover, 0.08)
+        }
+      }),
+      [theme2.palette.action.hover]
+    );
+    const expandedContentStyles = reactExports.useMemo(
+      () => ({
+        pl: 4,
+        py: 1,
+        backgroundColor: alpha$1(theme2.palette.background.default, 0.05),
+        borderBottom: `1px solid ${theme2.palette.divider}`,
+        fontFamily: "monospace",
+        fontSize: "0.8rem",
+        whiteSpace: "pre-wrap",
+        wordBreak: "break-word",
+        maxHeight: "300px",
+        overflow: "auto",
+        "&::-webkit-scrollbar": {
+          width: "8px"
+        },
+        "&::-webkit-scrollbar-thumb": {
+          backgroundColor: theme2.palette.mode === "dark" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.2)",
+          borderRadius: "4px"
+        },
+        scrollbarWidth: "thin",
+        scrollbarColor: theme2.palette.mode === "dark" ? "rgba(255,255,255,0.1) transparent" : "rgba(0,0,0,0.2) transparent"
+      }),
+      [
+        theme2.palette.background.default,
+        theme2.palette.divider,
+        theme2.palette.mode
+      ]
+    );
+    const handleToggleExpand = reactExports.useCallback(() => {
+      setExpanded((prev2) => !prev2);
+    }, []);
+    const handleEdit = reactExports.useCallback(
+      (e3) => {
+        e3.stopPropagation();
+        onEdit(variable2);
+      },
+      [onEdit, variable2]
+    );
+    const handleDelete2 = reactExports.useCallback(
+      (e3) => {
+        e3.stopPropagation();
+        onDelete(variable2.key);
+      },
+      [onDelete, variable2.key]
+    );
+    const handleCopy = reactExports.useCallback(
+      async (e3) => {
+        e3.stopPropagation();
+        try {
+          await navigator.clipboard.writeText(stringValue);
+          setCopied(true);
+          setTimeout(() => setCopied(false), 2e3);
+        } catch (error) {
+          console.error("Failed to copy to clipboard:", error);
+        }
+      },
+      [stringValue]
+    );
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(VariableItem, { sx: itemStyles, onClick: handleToggleExpand, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandButton, { size: "small", children: expanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(Minus$1, { size: 12 }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Plus$1, { size: 12 }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(VariableName, { variant: "body2", children: variable2.key }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(VariableType, { variant: "caption", children: typeDisplay }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { title: tooltipValue, placement: "top-start", arrow: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(VariableValue, { variant: "body2", children: truncatedValue }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(VariableActions, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { title: copied ? "Copied!" : "Copy Value", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            IconButton,
+            {
+              onClick: handleCopy,
+              size: "small",
+              sx: { mr: 0.25, padding: theme2.spacing(0.5) },
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { size: 14 })
+            }
+          ) }),
+          isEditable ? /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { title: "Edit Variable", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            IconButton,
+            {
+              onClick: handleEdit,
+              size: "small",
+              sx: { mr: 0.25, padding: theme2.spacing(0.5) },
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Pen, { size: 14 })
+            }
+          ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { title: "This variable can't be edited because its type is not yet supported for editing.", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            IconButton,
+            {
+              size: "small",
+              sx: {
+                mr: 0.25,
+                padding: theme2.spacing(0.5),
+                opacity: 0.4,
+                cursor: "not-allowed"
+              },
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Pen, { size: 14 })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { title: "Delete Variable", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            IconButton,
+            {
+              onClick: handleDelete2,
+              size: "small",
+              color: "error",
+              sx: { padding: theme2.spacing(0.5) },
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { size: 14 })
+            }
+          ) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Collapse, { in: expanded, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: expandedContentStyles, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Typography,
+        {
+          variant: "caption",
+          color: "text.secondary",
+          sx: { fontFamily: "monospace", fontSize: "0.8rem" },
+          children: stringValue
+        }
+      ) }) })
+    ] });
+  }
+);
+VariableRow.displayName = "VariableRow";
+const CanvasVariablesViewer = reactExports.memo(
+  ({ conversationId }) => {
+    const agentId = conversationId;
+    const theme2 = useTheme$2();
+    const [isFormOpen, setIsFormOpen] = reactExports.useState(false);
+    const [editingVariable, setEditingVariable] = reactExports.useState(null);
+    const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = reactExports.useState(false);
+    const [variableToDeleteKey, setVariableToDeleteKey] = reactExports.useState(null);
+    const {
+      data: variablesResponse,
+      isLoading,
+      error,
+      isError
+      // refetch: refetchVariables, // Not directly used, relying on query invalidation
+    } = useAgentExecutionVariables(agentId);
+    const createVariableMutation = useCreateAgentExecutionVariable();
+    const updateVariableMutation = useUpdateAgentExecutionVariable();
+    const deleteVariableMutation = useDeleteAgentExecutionVariable();
+    const variables = reactExports.useMemo(
+      () => variablesResponse?.result?.execution_variables ?? [],
+      [variablesResponse?.result?.execution_variables]
+    );
+    const handleOpenCreateForm = reactExports.useCallback(() => {
+      setEditingVariable(null);
+      setIsFormOpen(true);
+    }, []);
+    const handleOpenEditForm = reactExports.useCallback((variable2) => {
+      setEditingVariable(variable2);
+      setIsFormOpen(true);
+    }, []);
+    const handleCloseForm = reactExports.useCallback(() => {
+      setIsFormOpen(false);
+      setEditingVariable(null);
+    }, []);
+    const handleSubmitVariableForm = reactExports.useCallback(
+      async (data2) => {
+        if (!agentId) {
+          showErrorToast("Agent ID is missing.");
+          return;
+        }
+        try {
+          if (editingVariable) {
+            await updateVariableMutation.mutateAsync({
+              agentId,
+              variableKey: editingVariable.key,
+              // Key cannot be changed
+              variableData: { ...data2, key: editingVariable.key }
+            });
+          } else {
+            await createVariableMutation.mutateAsync({
+              agentId,
+              variableData: data2
+            });
+          }
+        } catch (e3) {
+          console.error("Submission failed in component:", e3);
+        }
+      },
+      [
+        agentId,
+        editingVariable,
+        createVariableMutation,
+        updateVariableMutation
+      ]
+    );
+    const handleDeleteVariable = reactExports.useCallback(
+      async (variableKey) => {
+        if (!agentId) {
+          showErrorToast("Agent ID is missing.");
+          return;
+        }
+        setVariableToDeleteKey(variableKey);
+        setIsDeleteConfirmOpen(true);
+      },
+      [agentId]
+      // deleteVariableMutation will be a dependency of confirmDeleteVariable
+    );
+    const confirmDeleteVariable = reactExports.useCallback(async () => {
+      if (!agentId || !variableToDeleteKey) {
+        showErrorToast("Agent ID or variable key is missing for deletion.");
+        setIsDeleteConfirmOpen(false);
+        setVariableToDeleteKey(null);
+        return;
+      }
+      try {
+        await deleteVariableMutation.mutateAsync({
+          agentId,
+          variableKey: variableToDeleteKey
+        });
+      } catch (e3) {
+        console.error("Deletion failed during confirmation:", e3);
+      } finally {
+        setIsDeleteConfirmOpen(false);
+        setVariableToDeleteKey(null);
+      }
+    }, [agentId, variableToDeleteKey, deleteVariableMutation]);
+    const containerStyles = reactExports.useMemo(
+      () => ({
+        p: 3,
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        minHeight: 0
+        // Important for flex children to shrink
+      }),
+      []
+    );
+    const headerStyles = reactExports.useMemo(
+      () => ({
+        display: "flex",
+        flexDirection: "column",
+        mb: 1,
+        px: 0.5,
+        flexShrink: 0
+        // Prevent header from shrinking
+      }),
+      []
+    );
+    const titleRowStyles = reactExports.useMemo(
+      () => ({
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        mb: 0.5
+      }),
+      []
+    );
+    const titleStyles = reactExports.useMemo(
+      () => ({
+        fontSize: "0.875rem"
+      }),
+      []
+    );
+    const subtitleStyles = reactExports.useMemo(
+      () => ({
+        fontSize: "0.75rem",
+        color: "text.secondary",
+        fontStyle: "italic"
+      }),
+      []
+    );
+    const createButtonStyles = reactExports.useMemo(
+      () => ({
+        textTransform: "none",
+        fontSize: "0.8125rem",
+        padding: theme2.spacing(0.5, 1.5)
+      }),
+      [theme2]
+    );
+    const loadingTextStyles = reactExports.useMemo(
+      () => ({
+        mt: 1.5
+      }),
+      []
+    );
+    const emptyStateTextStyles = reactExports.useMemo(
+      () => ({
+        mb: 1.5
+      }),
+      []
+    );
+    reactExports.useEffect(() => {
+      if (isError && error) {
+        showErrorToast(
+          `Error loading variables: ${error.message || "An unknown error occurred."}`
+        );
+      }
+    }, [isError, error]);
+    if (isLoading) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(CenteredBox, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress, { size: 24 }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Typography,
+          {
+            variant: "body2",
+            sx: loadingTextStyles,
+            color: "text.secondary",
+            children: "Loading variables..."
+          }
+        )
+      ] });
+    }
+    if (isError) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(CenteredBox, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "subtitle1", color: "text.secondary", gutterBottom: true, children: "Could not load variables." }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "caption", color: "text.secondary", children: "Please check notifications or try again." })
+      ] });
+    }
+    if (variables.length === 0) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(CenteredBox, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "subtitle1", gutterBottom: true, color: "text.primary", children: "No Execution Variables" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Typography,
+          {
+            variant: "body2",
+            color: "text.secondary",
+            sx: emptyStateTextStyles,
+            children: "This agent currently has no execution variables set. When your agent does work for you, it will store things that it runs with code in its memory, and those elements will show up here."
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button,
+          {
+            variant: "outlined",
+            size: "small",
+            startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(CirclePlus, { size: 16 }),
+            onClick: handleOpenCreateForm,
+            sx: createButtonStyles,
+            children: "Create Variable"
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: containerStyles, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: headerStyles, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", fontWeight: 500, sx: titleStyles, children: "Agent Execution Variables" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: titleRowStyles, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Typography,
+            {
+              variant: "body2",
+              color: "text.secondary",
+              sx: subtitleStyles,
+              children: "This is code memory that the agent uses to store information."
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { title: "Create New Variable", children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton, { onClick: handleOpenCreateForm, size: "small", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CirclePlus, { size: 18 }) }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(VariableListContainer, { children: variables.map((variable2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        VariableRow,
+        {
+          variable: variable2,
+          onEdit: handleOpenEditForm,
+          onDelete: handleDeleteVariable
+        },
+        variable2.key
+      )) }),
+      agentId && // Ensure agentId is present before rendering dialog
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        VariableFormDialog,
+        {
+          open: isFormOpen,
+          onClose: handleCloseForm,
+          onSubmit: handleSubmitVariableForm,
+          initialData: editingVariable
+        }
+      ),
+      variableToDeleteKey && // Render modal only if there's a key to delete
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ConfirmationModal,
+        {
+          open: isDeleteConfirmOpen,
+          title: "Delete Variable",
+          message: /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { children: [
+            "Are you sure you want to delete the variable",
+            " ",
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("strong", { children: [
+              '"',
+              variableToDeleteKey,
+              '"'
+            ] }),
+            "? This action cannot be undone."
+          ] }),
+          confirmText: "Delete",
+          cancelText: "Cancel",
+          isDangerous: true,
+          onConfirm: confirmDeleteVariable,
+          onCancel: () => {
+            setIsDeleteConfirmOpen(false);
+            setVariableToDeleteKey(null);
+          }
+        }
+      )
+    ] });
+  }
+);
+CanvasVariablesViewer.displayName = "CanvasVariablesViewer";
 const CanvasContainer = styled$1(Box)(({ theme: theme2 }) => ({
   height: "100%",
   display: "flex",
@@ -172479,6 +173719,7 @@ const CanvasComponent = ({
           {
             onClick: () => setCurrentView("documents"),
             size: "large",
+            "data-tour-tag": "canvas-documents-view-button",
             sx: (theme2) => ({
               color: currentView === "documents" ? theme2.palette.primary.main : theme2.palette.text.secondary,
               backgroundColor: currentView === "documents" ? alpha$1(theme2.palette.primary.main, 0.08) : "transparent",
@@ -172497,6 +173738,7 @@ const CanvasComponent = ({
           {
             onClick: () => setCurrentView("files"),
             size: "large",
+            "data-tour-tag": "canvas-files-view-button",
             sx: (theme2) => ({
               color: currentView === "files" ? theme2.palette.primary.main : theme2.palette.text.secondary,
               backgroundColor: currentView === "files" ? alpha$1(theme2.palette.primary.main, 0.08) : "transparent",
@@ -172510,6 +173752,25 @@ const CanvasComponent = ({
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(FolderOpen, { size: 16 })
           }
         ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { title: "Variables View", arrow: true, placement: "top", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          IconButton,
+          {
+            onClick: () => setCurrentView("variables"),
+            size: "large",
+            "data-tour-tag": "canvas-variables-view-button",
+            sx: (theme2) => ({
+              color: currentView === "variables" ? theme2.palette.primary.main : theme2.palette.text.secondary,
+              backgroundColor: currentView === "variables" ? alpha$1(theme2.palette.primary.main, 0.08) : "transparent",
+              "&:hover": {
+                backgroundColor: alpha$1(theme2.palette.primary.main, 0.12)
+              },
+              width: 36,
+              height: 36,
+              padding: 0
+            }),
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(ListTree, { size: 16 })
+          }
+        ) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           Tooltip$1,
           {
@@ -172567,7 +173828,8 @@ const CanvasComponent = ({
         onSwitchToDocumentView: handleSwitchToDocumentView
       }
     ),
-    currentView === "files" && !conversationId && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    currentView === "variables" && conversationId && /* @__PURE__ */ jsxRuntimeExports.jsx(CanvasVariablesViewer, { conversationId }),
+    (currentView === "files" || currentView === "variables") && !conversationId && /* @__PURE__ */ jsxRuntimeExports.jsxs(
       Box,
       {
         sx: {
@@ -174097,6 +175359,8 @@ const InputOuterContainer = styled$1(Box)(({ theme: theme2 }) => ({
   alignItems: "center",
   justifyContent: "center",
   padding: theme2.spacing(1),
+  paddingLeft: theme2.spacing(2),
+  paddingRight: theme2.spacing(2),
   paddingBottom: theme2.spacing(2),
   backgroundColor: theme2.palette.messagesView.background
 }));
@@ -212654,13 +213918,18 @@ const FileAttachmentContainer = styled$1(Box)(({ theme: theme2 }) => ({
   maxWidth: "100%",
   cursor: "pointer",
   transition: "all 0.2s ease",
+  position: "relative",
   "&:hover": {
     backgroundColor: alpha$1(
       theme2.palette.mode === "dark" ? theme2.palette.common.black : theme2.palette.grey[300],
       theme2.palette.mode === "dark" ? 0.15 : 0.5
     ),
     transform: "translateY(-1px)",
-    boxShadow: `0 2px 5px ${alpha$1(theme2.palette.common.black, theme2.palette.mode === "dark" ? 0.15 : 0.1)}`
+    boxShadow: `0 2px 5px ${alpha$1(theme2.palette.common.black, theme2.palette.mode === "dark" ? 0.15 : 0.1)}`,
+    "& .file-actions-menu": {
+      opacity: 1,
+      visibility: "visible"
+    }
   },
   "&:active": {
     transform: "translateY(0)",
@@ -212684,6 +213953,12 @@ const FileName = styled$1(Typography)({
     textDecoration: "underline"
   }
 });
+const FileActionsContainer$2 = styled$1(Box)({
+  marginLeft: 8,
+  opacity: 0,
+  visibility: "hidden",
+  transition: "opacity 0.2s ease, visibility 0.2s ease"
+});
 const PATH_SEPARATOR_REGEX$3 = /[/\\]/;
 const getFileName$3 = (path2) => {
   if (path2.startsWith("data:image/")) {
@@ -212714,6 +213989,7 @@ const getFileName$3 = (path2) => {
 const FileAttachment = reactExports.memo(
   ({ file, onClick, conversationId }) => {
     const setCanvasOpen = useUiPreferencesStore((s2) => s2.setCanvasOpen);
+    const { setViewMode } = useCanvasStore();
     const handleClick = reactExports.useCallback(async () => {
       const title = getFileName$3(file);
       const fallbackAction = (err) => {
@@ -212755,19 +214031,20 @@ const FileAttachment = reactExports.memo(
           setOpenTabs(conversationId, updatedTabs);
           setSelectedTab(conversationId, docId);
           setCanvasOpen(true);
+          setViewMode(conversationId, "documents");
         } else {
           onClick(file);
         }
       } else {
-        const normalizedPath = file.startsWith("file://") ? file.substring(7) : file;
+        const normalizedPath2 = file.startsWith("file://") ? file.substring(7) : file;
         try {
-          const result = await window.api.readFile(normalizedPath);
+          const result = await window.api.readFile(normalizedPath2);
           if (result.success && isCanvasSupported(title)) {
-            const docId = normalizedPath;
+            const docId = normalizedPath2;
             const newDoc = {
               id: docId,
               title,
-              path: normalizedPath,
+              path: normalizedPath2,
               content: result.data,
               type: getFileTypeFromPath(file)
               // Ensure type is included
@@ -212793,6 +214070,7 @@ const FileAttachment = reactExports.memo(
             setOpenTabs(conversationId, updatedTabs);
             setSelectedTab(conversationId, docId);
             setCanvasOpen(true);
+            setViewMode(conversationId, "documents");
             return;
           }
           const errorMessage = !result.success && result.error ? result.error instanceof Error ? result.error.message : String(result.error) : "Unknown error reading file";
@@ -212802,21 +214080,19 @@ const FileAttachment = reactExports.memo(
           return fallbackAction(message2);
         }
       }
-    }, [file, onClick, setCanvasOpen, conversationId]);
+    }, [file, onClick, setCanvasOpen, setViewMode, conversationId]);
     const isPastedImage = file.startsWith("data:image/");
+    const isLocalFile = !file.startsWith("data:") && !file.startsWith("http");
+    const normalizedPath = file.startsWith("file://") ? file.substring(7) : file;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       FileAttachmentContainer,
       {
         onClick: handleClick,
         title: `Click to open ${getFileName$3(file)}`,
         sx: {
-          // Adjust padding if it's an image to give it more space, or remove padding
           padding: isPastedImage ? 0 : "8px 12px",
-          // If it's an image, let it define its own aspect ratio, otherwise fix height for icon/text
           height: isPastedImage ? "auto" : "auto",
-          // Keep auto or set specific for icon
           maxWidth: isPastedImage ? "200px" : "100%"
-          // Allow images to be a bit wider if needed
         },
         children: isPastedImage ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           "img",
@@ -212827,15 +214103,31 @@ const FileAttachment = reactExports.memo(
               display: "block",
               maxWidth: "100%",
               maxHeight: "150px",
-              // Max height for the preview in message
               borderRadius: "8px",
-              // Match container's border radius
               objectFit: "contain"
             }
           }
         ) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(FileIcon, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faFile, size: "sm" }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(FileName, { variant: "body2", children: getFileName$3(file) })
+          /* @__PURE__ */ jsxRuntimeExports.jsx(FileName, { variant: "body2", children: getFileName$3(file) }),
+          isLocalFile && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            FileActionsContainer$2,
+            {
+              className: "file-actions-menu",
+              onClick: (e3) => {
+                e3.stopPropagation();
+              },
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                FileActionsMenu,
+                {
+                  filePath: normalizedPath,
+                  tooltip: "File actions",
+                  "aria-label": "File actions",
+                  onShowInCanvas: handleClick
+                }
+              )
+            }
+          )
         ] })
       }
     );
@@ -212902,33 +214194,162 @@ const AttachmentImage = styled$1("img")(({ theme: theme2 }) => ({
     boxShadow: `0 4px 12px ${alpha$1(theme2.palette.common.black, theme2.palette.mode === "dark" ? 0.25 : 0.15)}`
   }
 }));
+const FileActionsContainer$1 = styled$1(Box)({
+  position: "absolute",
+  top: 4,
+  right: 4,
+  zIndex: 2,
+  opacity: 0,
+  visibility: "hidden",
+  transition: "opacity 0.2s ease, visibility 0.2s ease"
+});
+const AttachmentImageContainer = styled$1(Box)({
+  position: "relative",
+  display: "inline-block",
+  "&:hover .file-actions-menu": {
+    opacity: 1,
+    visibility: "visible"
+  }
+});
 const PATH_SEPARATOR_REGEX$1 = /[/\\]/;
 const getFileName$1 = (path2) => {
   const parts = path2.split(PATH_SEPARATOR_REGEX$1);
   return parts[parts.length - 1];
 };
 const ImageAttachment = reactExports.memo(
-  ({ file, src, onClick }) => {
+  ({ file, src, onClick, conversationId }) => {
     const [hasError, setHasError] = reactExports.useState(false);
+    const setCanvasOpen = useUiPreferencesStore((s2) => s2.setCanvasOpen);
+    const { setViewMode } = useCanvasStore();
+    const handleShowInCanvas = reactExports.useCallback(async () => {
+      const title = getFileName$1(file);
+      const fallbackAction = (err) => {
+        if (err) console.error("Error processing file:", err);
+        onClick(file);
+      };
+      const { setFiles, setOpenTabs, setSelectedTab } = useCanvasStore.getState();
+      if (file.startsWith("data:")) {
+        if (isCanvasSupported(title)) {
+          const docId = file;
+          const newDoc = {
+            id: docId,
+            title,
+            path: docId,
+            content: file,
+            type: getFileTypeFromPath(file)
+          };
+          const state2 = useCanvasStore.getState();
+          const conversationCanvasState = state2.conversations?.[conversationId];
+          const filesInState = conversationCanvasState?.files ?? [];
+          const openTabsInState = conversationCanvasState?.openTabs ?? [];
+          const updatedFiles = (() => {
+            const idx = filesInState.findIndex((d2) => d2.id === docId);
+            if (idx !== -1) {
+              return [
+                ...filesInState.slice(0, idx),
+                newDoc,
+                ...filesInState.slice(idx + 1)
+              ];
+            }
+            return [...filesInState, newDoc];
+          })();
+          setFiles(conversationId, updatedFiles);
+          const existsTab = openTabsInState.some((t2) => t2.id === docId);
+          const updatedTabs = existsTab ? openTabsInState : [...openTabsInState, { id: docId, title }];
+          setOpenTabs(conversationId, updatedTabs);
+          setSelectedTab(conversationId, docId);
+          setCanvasOpen(true);
+          setViewMode(conversationId, "documents");
+        } else {
+          setCanvasOpen(true);
+          setViewMode(conversationId, "files");
+        }
+      } else {
+        const normalizedPath2 = file.startsWith("file://") ? file.substring(7) : file;
+        try {
+          const result = await window.api.readFile(normalizedPath2);
+          if (result.success && isCanvasSupported(title)) {
+            const docId = normalizedPath2;
+            const newDoc = {
+              id: docId,
+              title,
+              path: normalizedPath2,
+              content: result.data,
+              type: getFileTypeFromPath(file)
+            };
+            const state2 = useCanvasStore.getState();
+            const conversationCanvasState = state2.conversations?.[conversationId];
+            const filesInState = conversationCanvasState?.files ?? [];
+            const openTabsInState = conversationCanvasState?.openTabs ?? [];
+            const updatedFiles = (() => {
+              const idx = filesInState.findIndex((d2) => d2.id === docId);
+              if (idx !== -1) {
+                return [
+                  ...filesInState.slice(0, idx),
+                  newDoc,
+                  ...filesInState.slice(idx + 1)
+                ];
+              }
+              return [...filesInState, newDoc];
+            })();
+            setFiles(conversationId, updatedFiles);
+            const existsTab = openTabsInState.some((t2) => t2.id === docId);
+            const updatedTabs = existsTab ? openTabsInState : [...openTabsInState, { id: docId, title }];
+            setOpenTabs(conversationId, updatedTabs);
+            setSelectedTab(conversationId, docId);
+            setCanvasOpen(true);
+            setViewMode(conversationId, "documents");
+            return;
+          }
+          setCanvasOpen(true);
+          setViewMode(conversationId, "files");
+        } catch (error) {
+          const message2 = error instanceof Error ? error.message : String(error ?? "Unknown error reading file");
+          return fallbackAction(message2);
+        }
+      }
+    }, [file, onClick, setCanvasOpen, setViewMode, conversationId]);
     const handleClick = () => {
       onClick(file);
     };
     const handleError2 = () => {
       setHasError(true);
     };
+    const isLocalFile = !file.startsWith("data:") && !file.startsWith("http");
+    const normalizedPath = file.startsWith("file://") ? file.substring(7) : file;
     if (hasError) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(InvalidAttachment, { file });
     }
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      AttachmentImage,
-      {
-        src,
-        alt: getFileName$1(file),
-        onClick: handleClick,
-        onError: handleError2,
-        title: `Click to open ${getFileName$1(file)}`
-      }
-    );
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(AttachmentImageContainer, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        AttachmentImage,
+        {
+          src,
+          alt: getFileName$1(file),
+          onClick: handleClick,
+          onError: handleError2,
+          title: `Click to open ${getFileName$1(file)}`
+        }
+      ),
+      isLocalFile && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        FileActionsContainer$1,
+        {
+          className: "file-actions-menu",
+          onClick: (e3) => {
+            e3.stopPropagation();
+          },
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            FileActionsMenu,
+            {
+              filePath: normalizedPath,
+              tooltip: "File actions",
+              "aria-label": "File actions",
+              onShowInCanvas: handleShowInCanvas
+            }
+          )
+        }
+      )
+    ] });
   }
 );
 ImageAttachment.displayName = "ImageAttachment";
@@ -213046,34 +214467,162 @@ const AttachmentVideo = styled$1("video")(({ theme: theme2 }) => ({
     boxShadow: `0 4px 12px ${alpha$1(theme2.palette.common.black, theme2.palette.mode === "dark" ? 0.25 : 0.15)}`
   }
 }));
+const FileActionsContainer = styled$1(Box)({
+  position: "absolute",
+  top: 4,
+  right: 4,
+  zIndex: 2,
+  opacity: 0,
+  visibility: "hidden",
+  transition: "opacity 0.2s ease, visibility 0.2s ease"
+});
+const AttachmentVideoContainer = styled$1(Box)({
+  position: "relative",
+  display: "inline-block",
+  "&:hover .file-actions-menu": {
+    opacity: 1,
+    visibility: "visible"
+  }
+});
 const PATH_SEPARATOR_REGEX = /[/\\]/;
 const getFileName = (path2) => {
   const parts = path2.split(PATH_SEPARATOR_REGEX);
   return parts[parts.length - 1];
 };
 const VideoAttachment = reactExports.memo(
-  ({ file, src, onClick }) => {
+  ({ file, src, onClick, conversationId }) => {
     const [hasError, setHasError] = reactExports.useState(false);
+    const setCanvasOpen = useUiPreferencesStore((s2) => s2.setCanvasOpen);
+    const { setViewMode } = useCanvasStore();
+    const handleShowInCanvas = reactExports.useCallback(async () => {
+      const title = getFileName(file);
+      const fallbackAction = (err) => {
+        if (err) console.error("Error processing file:", err);
+        onClick(file);
+      };
+      const { setFiles, setOpenTabs, setSelectedTab } = useCanvasStore.getState();
+      if (file.startsWith("data:")) {
+        if (isCanvasSupported(title)) {
+          const docId = file;
+          const newDoc = {
+            id: docId,
+            title,
+            path: docId,
+            content: file,
+            type: getFileTypeFromPath(file)
+          };
+          const state2 = useCanvasStore.getState();
+          const conversationCanvasState = state2.conversations?.[conversationId];
+          const filesInState = conversationCanvasState?.files ?? [];
+          const openTabsInState = conversationCanvasState?.openTabs ?? [];
+          const updatedFiles = (() => {
+            const idx = filesInState.findIndex((d2) => d2.id === docId);
+            if (idx !== -1) {
+              return [
+                ...filesInState.slice(0, idx),
+                newDoc,
+                ...filesInState.slice(idx + 1)
+              ];
+            }
+            return [...filesInState, newDoc];
+          })();
+          setFiles(conversationId, updatedFiles);
+          const existsTab = openTabsInState.some((t2) => t2.id === docId);
+          const updatedTabs = existsTab ? openTabsInState : [...openTabsInState, { id: docId, title }];
+          setOpenTabs(conversationId, updatedTabs);
+          setSelectedTab(conversationId, docId);
+          setCanvasOpen(true);
+          setViewMode(conversationId, "documents");
+        } else {
+          onClick(file);
+        }
+      } else {
+        const normalizedPath2 = file.startsWith("file://") ? file.substring(7) : file;
+        try {
+          const result = await window.api.readFile(normalizedPath2);
+          if (result.success && isCanvasSupported(title)) {
+            const docId = normalizedPath2;
+            const newDoc = {
+              id: docId,
+              title,
+              path: normalizedPath2,
+              content: result.data,
+              type: getFileTypeFromPath(file)
+            };
+            const state2 = useCanvasStore.getState();
+            const conversationCanvasState = state2.conversations?.[conversationId];
+            const filesInState = conversationCanvasState?.files ?? [];
+            const openTabsInState = conversationCanvasState?.openTabs ?? [];
+            const updatedFiles = (() => {
+              const idx = filesInState.findIndex((d2) => d2.id === docId);
+              if (idx !== -1) {
+                return [
+                  ...filesInState.slice(0, idx),
+                  newDoc,
+                  ...filesInState.slice(idx + 1)
+                ];
+              }
+              return [...filesInState, newDoc];
+            })();
+            setFiles(conversationId, updatedFiles);
+            const existsTab = openTabsInState.some((t2) => t2.id === docId);
+            const updatedTabs = existsTab ? openTabsInState : [...openTabsInState, { id: docId, title }];
+            setOpenTabs(conversationId, updatedTabs);
+            setSelectedTab(conversationId, docId);
+            setCanvasOpen(true);
+            setViewMode(conversationId, "documents");
+            return;
+          }
+          setCanvasOpen(true);
+          setViewMode(conversationId, "files");
+        } catch (error) {
+          const message2 = error instanceof Error ? error.message : String(error ?? "Unknown error reading file");
+          return fallbackAction(message2);
+        }
+      }
+    }, [file, onClick, setCanvasOpen, setViewMode, conversationId]);
     const handleClick = () => {
       onClick(file);
     };
     const handleError2 = () => {
       setHasError(true);
     };
+    const isLocalFile = !file.startsWith("data:") && !file.startsWith("http");
+    const normalizedPath = file.startsWith("file://") ? file.substring(7) : file;
     if (hasError) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(InvalidAttachment, { file });
     }
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      AttachmentVideo,
-      {
-        src,
-        controls: true,
-        preload: "metadata",
-        onClick: handleClick,
-        onError: handleError2,
-        title: `Click to open ${getFileName(file)}`
-      }
-    );
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(AttachmentVideoContainer, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        AttachmentVideo,
+        {
+          src,
+          controls: true,
+          preload: "metadata",
+          onClick: handleClick,
+          onError: handleError2,
+          title: `Click to open ${getFileName(file)}`
+        }
+      ),
+      isLocalFile && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        FileActionsContainer,
+        {
+          className: "file-actions-menu",
+          onClick: (e3) => {
+            e3.stopPropagation();
+          },
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            FileActionsMenu,
+            {
+              filePath: normalizedPath,
+              tooltip: "File actions",
+              "aria-label": "File actions",
+              onShowInCanvas: handleShowInCanvas
+            }
+          )
+        }
+      )
+    ] });
   }
 );
 VideoAttachment.displayName = "VideoAttachment";
@@ -221655,7 +223204,7 @@ const tourSteps = [
         classes: "shepherd-button-primary",
         action: function() {
           const button = document.querySelector(
-            'button[data-tour-tag="close-canvas-button"]'
+            'button[data-tour-tag="canvas-documents-view-button"]'
           );
           if (button) {
             button.click();
@@ -221667,6 +223216,121 @@ const tourSteps = [
       }
     ]
   },
+  {
+    id: "canvas-documents-view",
+    attachTo: {
+      element: 'button[data-tour-tag="canvas-documents-view-button"]',
+      on: "top"
+    },
+    title: "Documents View",
+    text: "The Documents view shows all your open markdown, code, and HTML documents as tabs. You can switch between documents and see dynamic visualizations in HTML created by your agents. Use this view to work with your notes, reports, and agent-generated content.",
+    buttons: [
+      {
+        text: "Back",
+        classes: "shepherd-button-secondary",
+        action: function() {
+          this.back();
+        }
+      },
+      {
+        text: "Next",
+        classes: "shepherd-button-primary",
+        action: function() {
+          const button = document.querySelector(
+            'button[data-tour-tag="canvas-files-view-button"]'
+          );
+          if (button) {
+            button.click();
+          }
+          setTimeout(() => {
+            this.next();
+          }, 500);
+        }
+      }
+    ]
+  },
+  {
+    id: "canvas-files-view",
+    attachTo: {
+      element: 'button[data-tour-tag="canvas-files-view-button"]',
+      on: "top"
+    },
+    title: "Files View",
+    text: "The Files view lets you browse and open files that your agents have created or that are relevant to your current conversation. Use this to quickly access, preview, and open files in the Canvas workspace.",
+    buttons: [
+      {
+        text: "Back",
+        classes: "shepherd-button-secondary",
+        action: function() {
+          const button = document.querySelector(
+            'button[data-tour-tag="canvas-documents-view-button"]'
+          );
+          if (button) {
+            button.click();
+          }
+          setTimeout(() => {
+            this.back();
+          }, 500);
+        }
+      },
+      {
+        text: "Next",
+        classes: "shepherd-button-primary",
+        action: function() {
+          const button = document.querySelector(
+            'button[data-tour-tag="canvas-variables-view-button"]'
+          );
+          if (button) {
+            button.click();
+          }
+          setTimeout(() => {
+            this.next();
+          }, 500);
+        }
+      }
+    ]
+  },
+  {
+    id: "canvas-variables-view",
+    attachTo: {
+      element: 'button[data-tour-tag="canvas-variables-view-button"]',
+      on: "top"
+    },
+    title: "Variables View",
+    text: 'The Variables view displays the "code memory" that agents have stored during their work. These are technical variables that include results, intermediate values, and other data that agents use to perform tasks. You can inspect and manage these variables here.<br /><br />This section will be most helpful for more technical users who want to understand how agents are working and what they are doing.',
+    buttons: [
+      {
+        text: "Back",
+        classes: "shepherd-button-secondary",
+        action: function() {
+          const button = document.querySelector(
+            'button[data-tour-tag="canvas-files-view-button"]'
+          );
+          if (button) {
+            button.click();
+          }
+          setTimeout(() => {
+            this.back();
+          }, 500);
+        }
+      },
+      {
+        text: "Next",
+        classes: "shepherd-button-primary",
+        action: function() {
+          const closeButton = document.querySelector(
+            'button[data-tour-tag="close-canvas-button"]'
+          );
+          if (closeButton) {
+            closeButton.click();
+          }
+          setTimeout(() => {
+            this.next();
+          }, 500);
+        }
+      }
+    ]
+  },
   {
     id: "agent-options",
     attachTo: {