diff --git a/templates/io-assist-react-editable/package-lock.json b/templates/io-assist-react-editable/package-lock.json
index acadc1d..c8ab27b 100644
--- a/templates/io-assist-react-editable/package-lock.json
+++ b/templates/io-assist-react-editable/package-lock.json
@@ -9,10 +9,10 @@
       "version": "0.0.0",
       "dependencies": {
         "@fontsource-variable/inter": "^5.0.0",
-        "@interopio/ai-web": "^1.1.2",
+        "@interopio/ai-web": "^1.2.2",
         "@interopio/browser": "^4.5.0",
         "@interopio/desktop": "^6.21.0",
-        "@interopio/working-context": "^1.1.1",
+        "@interopio/working-context": "^1.1.2",
         "@interopio/workspaces-api": "^4.5.0",
         "prism-react-renderer": "^2.4.1",
         "react": "^19.2.6",
@@ -38,6 +38,25 @@
         "vite": "^8.0.12"
       }
     },
+    "node_modules/@ag-ui/core": {
+      "version": "0.0.52",
+      "resolved": "https://registry.npmjs.org/@ag-ui/core/-/core-0.0.52.tgz",
+      "integrity": "sha512-Xo0bUaNV56EqylzcrAuhUkQX7et7+SZIrqZZtEByGwEq/I1EHny6ZMkWHLkKR7UNi0FJZwJyhKYmKJS3B2SEgA==",
+      "peer": true,
+      "dependencies": {
+        "zod": "^3.22.4"
+      }
+    },
+    "node_modules/@ag-ui/core/node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.29.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
@@ -450,9 +469,9 @@
       }
     },
     "node_modules/@hono/node-server": {
-      "version": "2.0.12",
-      "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-2.0.12.tgz",
-      "integrity": "sha512-eWpQYr67tqJLeaSUl0Q+TquuYfUdTibpOJlUMV2FfUP7+KqCC5TufnwnlXL6mobZBJbGAYRd7ZvEBDCbLInjhg==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-2.1.1.tgz",
+      "integrity": "sha512-ELuehkj5VCBdgEw9zs+ivkKwyzzUCSQuE96YmiPvn1ECBoZCczbFXJLeEGMTYjphP6gydh4pHMqEYPVMYUVgQg==",
       "license": "MIT",
       "engines": {
         "node": ">=20"
@@ -528,15 +547,16 @@
       }
     },
     "node_modules/@interopio/ai-web": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@interopio/ai-web/-/ai-web-1.1.2.tgz",
-      "integrity": "sha512-Y2CvegmCU6o0Jp0TWh3H+/VUe26EwKCDlpQ7VjdxXXJM9QrMkFMFWDgDukFaRhGJzKPjBLgNc6yBEPxkHbPRvg==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@interopio/ai-web/-/ai-web-1.2.2.tgz",
+      "integrity": "sha512-F8FNGeLgsk9Zpkze9mB9ssHgzQQPfyvB1D53ZlL8C3XM8i/j9C+jtgSx4bGbUe35EY4ktPNhnIf+lFYr+9gGlg==",
       "license": "MIT",
       "dependencies": {
         "@interopio/browser": "^4.0.0",
+        "@interopio/code-mode": "^0.0.2",
         "@interopio/desktop": "^6.0.0",
-        "@interopio/mcp-core": "^1.2.1",
-        "@interopio/working-context": "^1.1.1",
+        "@interopio/mcp-core": "^1.2.4",
+        "@interopio/working-context": "^1.1.2",
         "@modelcontextprotocol/sdk": "^1.19.1"
       }
     },
@@ -574,6 +594,25 @@
         }
       }
     },
+    "node_modules/@interopio/code-mode": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@interopio/code-mode/-/code-mode-0.0.2.tgz",
+      "integrity": "sha512-qwe8jByc4Z5huBJ1JddjvjpF1xmIDtko4zcuhuGTb2BeAZjRNR7N7+YzbM4YPfgWVORI9NA/hgPN9YGBynPJRA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/ai-code-mode": "0.3.7",
+        "zod": "^3.25.76"
+      }
+    },
+    "node_modules/@interopio/code-mode/node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/@interopio/core": {
       "version": "6.11.0",
       "resolved": "https://registry.npmjs.org/@interopio/core/-/core-6.11.0.tgz",
@@ -680,14 +719,15 @@
       }
     },
     "node_modules/@interopio/mcp-core": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@interopio/mcp-core/-/mcp-core-1.2.1.tgz",
-      "integrity": "sha512-6ECVIgyeaB/y00ptlrhT4VatqMKAmeHLTZP6kj8PmUjkKXOaC5/WPrJqGf5meyr6n03IiyFLOp84PB6p8yljbA==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@interopio/mcp-core/-/mcp-core-1.2.4.tgz",
+      "integrity": "sha512-03UGOM+UaQLGizU9letXKude10IPrSVykuqqJsv3CCdw3GUpSKPhiw08pkIkCaCMeT+fZQ0a7icfph76XHD4FQ==",
       "license": "MIT",
       "dependencies": {
         "@interopio/browser": "^4.0.0",
+        "@interopio/code-mode": "^0.0.2",
         "@interopio/desktop": "^6.0.0",
-        "@interopio/working-context": "^1.1.1",
+        "@interopio/working-context": "^1.1.2",
         "@modelcontextprotocol/sdk": "^1.19.1"
       }
     },
@@ -753,9 +793,9 @@
       }
     },
     "node_modules/@interopio/working-context": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@interopio/working-context/-/working-context-1.1.1.tgz",
-      "integrity": "sha512-Vbb4SXxkxHc5VBsh06EvUDCt53frDi5Au13xQjSHjN8eUYvdPOJovsGOrvQgy7xdyQr6p7kdAxP2M92eSb2Pbg==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@interopio/working-context/-/working-context-1.1.2.tgz",
+      "integrity": "sha512-BtOvk5J0lwBMo7hVNVGX0NJqowr+zZM3WBq5C4V1ro68HUf7ShF8ZpF23ywwT/dX4BNOZHPWNFwJgivxQLsdOA==",
       "license": "MIT",
       "dependencies": {
         "@interopio/browser": "^4.0.0",
@@ -772,7 +812,6 @@
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
       "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -794,7 +833,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -804,14 +842,12 @@
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.31",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
       "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -1630,6 +1666,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/@tailwindcss/node": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.3.tgz",
@@ -1902,6 +1945,97 @@
         "vite": "^5.2.0 || ^6 || ^7 || ^8"
       }
     },
+    "node_modules/@tanstack/ai": {
+      "version": "0.41.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/ai/-/ai-0.41.0.tgz",
+      "integrity": "sha512-cq6ye9/rTfcwBDv9z2t1iCUIXL+lGdtM2HZm/KiLu3u6i+MH57W7i4tbB5uTUtcCnDmOlQ7EHD97esyNJpGtNw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@ag-ui/core": "^0.0.52",
+        "@standard-schema/spec": "^1.1.0",
+        "@tanstack/ai-event-client": "0.6.8",
+        "@tanstack/ai-utils": "0.3.1",
+        "partial-json": "^0.1.7"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.9.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@tanstack/ai-code-mode": {
+      "version": "0.3.7",
+      "resolved": "https://registry.npmjs.org/@tanstack/ai-code-mode/-/ai-code-mode-0.3.7.tgz",
+      "integrity": "sha512-NbIdQfNfWwV095jon2YsV3GPtVXCD+fuNx/TSJOaCHvV4AnowPBtgoax0qhfco4E4xBGKDrfdWyIxFCD6n+Lzg==",
+      "license": "MIT",
+      "dependencies": {
+        "sucrase": "^3.35.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/ai": "0.41.0",
+        "zod": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "node_modules/@tanstack/ai-event-client": {
+      "version": "0.6.8",
+      "resolved": "https://registry.npmjs.org/@tanstack/ai-event-client/-/ai-event-client-0.6.8.tgz",
+      "integrity": "sha512-h7/HLz9u2LF9ba6uKFMnSZkFlkzQONJ5u3Hi+4qGxpsHyvcGRtW6v186jaFLoklndhEwyC49ytkC4eafi7Qq8w==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@tanstack/devtools-event-client": "^0.4.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/ai-utils": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/ai-utils/-/ai-utils-0.3.1.tgz",
+      "integrity": "sha512-fgbjd5DohL3k5rTWr/KInauLVYMiHVm0cnmTsNrzL3cr4wWhEld5vmFSrjiwUWACAuONjZa+uBXuS+ZSO8fwDQ==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/devtools-event-client": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/devtools-event-client/-/devtools-event-client-0.4.4.tgz",
+      "integrity": "sha512-6T5Yop/793YI+H+5J8Hsyj4kCih9sl4t3ElLgKioW5hk3ocn+ZdSJ94tT7vL7uabxSugWYBZlOTMPzEw2puvQw==",
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "intent": "bin/intent.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.3",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz",
@@ -2391,6 +2525,12 @@
         "ajv": "^6.9.1"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "license": "MIT"
+    },
     "node_modules/bail": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
@@ -2449,9 +2589,9 @@
       }
     },
     "node_modules/body-parser/node_modules/content-type": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.0.0.tgz",
-      "integrity": "sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.1.0.tgz",
+      "integrity": "sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
@@ -2642,6 +2782,15 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/content-disposition": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.1.0.tgz",
@@ -3145,9 +3294,9 @@
       }
     },
     "node_modules/eventsource-parser": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.1.0.tgz",
-      "integrity": "sha512-kJezFj9YFAMLeORyi7aCLxLbD5/qWMQnoMVlVPyHIll7lgRJCc3JVln9Vgl9nwQi0YkMnhdGTMNn7CkRRAptMg==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.1.1.tgz",
+      "integrity": "sha512-EKN1vKAMcZ8MlYMpaNuxN6R9yakzH6uajHcHVTqWJzvu5pWw9DyhbP35HH8MVBQ+dZjAfDxk+A8NiR9KWaXiyQ==",
       "license": "MIT",
       "engines": {
         "node": ">=18.0.0"
@@ -3197,9 +3346,9 @@
       }
     },
     "node_modules/express-rate-limit": {
-      "version": "8.6.1",
-      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.6.1.tgz",
-      "integrity": "sha512-0D493aP61w0TJ2A0wy27riRsO7FMQ7FK+KUHOKCSfPvYo0R55aiC6emCVgFUeShH0fq0ICPVzNcgoS+BsbXQCA==",
+      "version": "8.6.2",
+      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.6.2.tgz",
+      "integrity": "sha512-YH4ru+eOJxQABscKFfRCy9R7x9QFGdezclVMwwgFFndzS2Xnm0uo6B0ABZsLhcpeptGv2qvuJVWlQr9gQZoC3A==",
       "license": "MIT",
       "dependencies": {
         "debug": "^4.4.3",
@@ -3241,9 +3390,9 @@
       "license": "MIT"
     },
     "node_modules/fast-uri": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.5.tgz",
-      "integrity": "sha512-gHwA1O9LDIcKunMKhObS/HimwtehO1nPUECKAu5TpKgaO19fcWEl4bliWe1jWxVFvIXztJjjQ4L8XQ1EU9f7Jw==",
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.6.tgz",
+      "integrity": "sha512-7Ical1vFEMr0onbVzEDIreM22I4khW+fzyQPwvAFWBp1iwdshSZRsL4jjRvPG9JP1uiqMHRto+YU6R2/CzDz5Q==",
       "funding": [
         {
           "type": "github",
@@ -3260,7 +3409,6 @@
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
       "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12.0.0"
@@ -3574,9 +3722,9 @@
       }
     },
     "node_modules/hono": {
-      "version": "4.12.32",
-      "resolved": "https://registry.npmjs.org/hono/-/hono-4.12.32.tgz",
-      "integrity": "sha512-XcuyW9qE2kJn07PkecMOBd5Vq/hMy7mmGw+idz1yblbg9N17ijJODrvPkn7/dwL3Kulj8LcRJ69DLOWf91dRUg==",
+      "version": "4.13.4",
+      "resolved": "https://registry.npmjs.org/hono/-/hono-4.13.4.tgz",
+      "integrity": "sha512-AGEwKIyRMHRv1t8Wjwa3LHxQ61X5CqrdFT+4BRNTpqS5aJNnpl5WLjADb7vFlJzI/8uK7T5QLVApCMQKNa3LgQ==",
       "license": "MIT",
       "engines": {
         "node": ">=16.9.0"
@@ -3661,9 +3809,9 @@
       "license": "MIT"
     },
     "node_modules/ip-address": {
-      "version": "10.4.0",
-      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.4.0.tgz",
-      "integrity": "sha512-oSK96Grm3aP6OrS263xVxbNDGVL7rzBtYdpGqlDG8iQdoenDoTs/nkki+DflYbAEE8Xl6o5YxhxlrKvI3nqKXQ==",
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.5.0.tgz",
+      "integrity": "sha512-R5SnVLJmgYYvf2F2ZgwSBnelz5G4q5AxIC277GDfUaNbrZKNANcBC7RHqYYePlszf4kBolVkJauG0ZjHHFh55g==",
       "license": "MIT",
       "engines": {
         "node": ">= 12"
@@ -3780,9 +3928,9 @@
       }
     },
     "node_modules/jose": {
-      "version": "6.2.5",
-      "resolved": "https://registry.npmjs.org/jose/-/jose-6.2.5.tgz",
-      "integrity": "sha512-2E5L2yRp03FnwreJLJX8/r7mHiZICCf8kG7fAsTWkSQTDAcc46NIZoQLKy+EJ8sPoJlxyS4OQR5H70LjIZZlIQ==",
+      "version": "6.2.10",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-6.2.10.tgz",
+      "integrity": "sha512-iiW7J9qRFlGxvCOIBDBDxFePQSn7ZMAnrYGhrrOo6siO/MIqwfyilLR27pkfDgUk+raLuzADS8A3S/KLBisc0g==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/panva"
@@ -4141,6 +4289,12 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "license": "MIT"
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -5145,6 +5299,17 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "license": "MIT"
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "5.1.16",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.16.tgz",
@@ -5171,12 +5336,32 @@
       "license": "MIT"
     },
     "node_modules/negotiator": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
-      "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.1.0.tgz",
+      "integrity": "sha512-NMPBRMJgiQHjbd8phG3Vebdx4kZ1H121rbl5IkMqeOsahptB9BKo/d7oJ3zTXqTgagn2bWlNSXkh0QUGM31RYg==",
       "license": "MIT",
+      "dependencies": {
+        "content-type": "^2.1.0"
+      },
       "engines": {
-        "node": ">= 0.6"
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/negotiator/node_modules/content-type": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.1.0.tgz",
+      "integrity": "sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/node-releases": {
@@ -5315,6 +5500,13 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/partial-json": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/partial-json/-/partial-json-0.1.7.tgz",
+      "integrity": "sha512-Njv/59hHaokb/hRUjce3Hdv12wd60MtM9Z5Olmn+nehe0QDAsRtRbJPvJ0Z91TusF0SuZRIvnM+S4l6EIP8leA==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -5355,7 +5547,6 @@
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz",
       "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -5364,6 +5555,15 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/pkce-challenge": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/pkce-challenge/-/pkce-challenge-5.0.1.tgz",
@@ -5940,6 +6140,28 @@
         "inline-style-parser": "0.2.7"
       }
     },
+    "node_modules/sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.3.tgz",
@@ -5961,11 +6183,31 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.17",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
       "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
@@ -6020,6 +6262,12 @@
         "typescript": ">=4.8.4"
       }
     },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "license": "Apache-2.0"
+    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -6060,9 +6308,9 @@
       }
     },
     "node_modules/type-is/node_modules/content-type": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.0.0.tgz",
-      "integrity": "sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.1.0.tgz",
+      "integrity": "sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
diff --git a/templates/io-assist-react-editable/package.json b/templates/io-assist-react-editable/package.json
index 6aec69c..1681795 100644
--- a/templates/io-assist-react-editable/package.json
+++ b/templates/io-assist-react-editable/package.json
@@ -11,10 +11,10 @@
   },
   "dependencies": {
     "@fontsource-variable/inter": "^5.0.0",
-    "@interopio/ai-web": "^1.1.2",
+    "@interopio/ai-web": "^1.2.2",
     "@interopio/browser": "^4.5.0",
     "@interopio/desktop": "^6.21.0",
-    "@interopio/working-context": "^1.1.1",
+    "@interopio/working-context": "^1.1.2",
     "@interopio/workspaces-api": "^4.5.0",
     "prism-react-renderer": "^2.4.1",
     "react": "^19.2.6",
diff --git a/templates/io-assist-react-editable/src/io-assist/actions/initIoAiWeb.ts b/templates/io-assist-react-editable/src/io-assist/actions/initIoAiWeb.ts
index 6179768..5c9834b 100644
--- a/templates/io-assist-react-editable/src/io-assist/actions/initIoAiWeb.ts
+++ b/templates/io-assist-react-editable/src/io-assist/actions/initIoAiWeb.ts
@@ -86,6 +86,10 @@ function buildWebConfig(staticConfig: IoAssistStaticConfig, dynamicConfig: IoAss
         config.context = staticConfig.workingContext;
     }
 
+    if (staticConfig.aiWebConfig.codeMode) {
+        config.codeMode = staticConfig.aiWebConfig.codeMode;
+    }
+
     return config;
 }
 
diff --git a/templates/io-assist-react-editable/src/io-assist/components/chat/Chat.tsx b/templates/io-assist-react-editable/src/io-assist/components/chat/Chat.tsx
index b10af27..dfbb7e6 100644
--- a/templates/io-assist-react-editable/src/io-assist/components/chat/Chat.tsx
+++ b/templates/io-assist-react-editable/src/io-assist/components/chat/Chat.tsx
@@ -31,7 +31,7 @@ export const Chat: React.FC = () => {
     const showMessageArea = hasMessages || isLoadingThread;
     const showWelcomeMessage = !showMessageArea;
     const showFavoritePrompts = showWelcomeMessage && favoritePromptNames.length > 0;
-    const agentName = dynamicConfig.user.name ?? dynamicConfig.user.id;
+    const agentName = dynamicConfig.user.name;
 
     // Auto-close sidebar when the viewport shrinks below md (parity with ng's
     // ResponsiveUIService effect). Intentionally depends only on `isMobile` so
@@ -65,7 +65,7 @@ export const Chat: React.FC = () => {
     const innerColumnClassNames = ["flex flex-1 min-h-0 min-w-0 flex-col items-center w-full custom-scrollbar-snap-right", showMessageArea ? "gap-0" : "gap-6"].join(" ");
 
     return (
-        <div data-testid="io-assist-root" className="flex h-full w-full overflow-hidden bg-app-background">
+        <div data-testid="io-assist-root" className="io-assist-root flex h-full w-full overflow-hidden bg-app-background">
             <div data-testid="chat" className="flex flex-1 min-h-0 overflow-hidden">
                 {isThreadHistoryVisible && isMobile && (
                     <div role="presentation" className="fixed inset-0 z-20 bg-black/45" onClick={closeSidebar} onKeyDown={(e) => e.key === "Escape" && closeSidebar()} />
diff --git a/templates/io-assist-react-editable/src/io-assist/components/chat/WelcomeHeading.tsx b/templates/io-assist-react-editable/src/io-assist/components/chat/WelcomeHeading.tsx
index 6cda8c9..74fc383 100644
--- a/templates/io-assist-react-editable/src/io-assist/components/chat/WelcomeHeading.tsx
+++ b/templates/io-assist-react-editable/src/io-assist/components/chat/WelcomeHeading.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { UI_STRINGS } from "../../constants/uiStrings";
 
 type Props = {
-    agentName: string;
+    agentName?: string;
 };
 
 export const WelcomeHeading: React.FC<Props> = ({ agentName }) => (
diff --git a/templates/io-assist-react-editable/src/io-assist/components/header/Header.tsx b/templates/io-assist-react-editable/src/io-assist/components/header/Header.tsx
index a0aef05..d891691 100644
--- a/templates/io-assist-react-editable/src/io-assist/components/header/Header.tsx
+++ b/templates/io-assist-react-editable/src/io-assist/components/header/Header.tsx
@@ -72,7 +72,7 @@ export const Header: React.FC = () => {
                     <button
                         type="button"
                         data-testid="working-context-button"
-                        className="flex justify-center items-center px-2 py-[3.5px] border-[1px] rounded-[8px] text-text-default cursor-pointer hover:text-text-states-hover font-weight-400 text-[10px] leading-[13px]"
+                        className="flex justify-center items-center px-2 py-[3.5px] border-[1px] rounded-[8px] text-text-default cursor-pointer hover:text-text-states-hover font-weight-350 text-[10px] leading-[13px]"
                         onClick={handleWorkingContextOpen}
                     >
                         {UI_STRINGS.WORKING_CONTEXT_PANEL_COMPONENT.VIEW_WORKING_CONTEXT_BUTTON}
diff --git a/templates/io-assist-react-editable/src/io-assist/components/input-area/InputArea.tsx b/templates/io-assist-react-editable/src/io-assist/components/input-area/InputArea.tsx
index c8d94e3..c595b14 100644
--- a/templates/io-assist-react-editable/src/io-assist/components/input-area/InputArea.tsx
+++ b/templates/io-assist-react-editable/src/io-assist/components/input-area/InputArea.tsx
@@ -143,7 +143,7 @@ export const InputArea: React.FC<Props> = ({ onSend, onAbort, className }) => {
             <div className="input-area__container relative w-full">
                 <div className="input-area__content accent-gradient-border relative rounded-2xl bg-app-background">
                     <div className="flex flex-col gap-4 p-4">
-                        <div className="flex gap-3 items-start px-2">
+                        <div className="flex gap-3 items-start ps-[1px] pt-1">
                             <textarea
                                 ref={textareaRef}
                                 data-testid="chat-input-field"
@@ -203,20 +203,19 @@ const ActionBar: React.FC = () => {
 
     const [hovered, setHovered] = useState<"prompt" | "tool" | null>(null);
 
-    // Match ng: size depends only on whether the panel is displayed (XS when open, S otherwise) —
-    // it must NOT shrink on hover. The icon variant, however, swaps to the filled glyph on hover.
     const promptDisplayed = activePanelContent === PANEL_CONTENT.PROMPTS;
     const toolDisplayed = activePanelContent === PANEL_CONTENT.TOOLS;
     const promptFilled = promptDisplayed || hovered === "prompt";
     const toolFilled = toolDisplayed || hovered === "tool";
 
     return (
-        <div className="flex flex-1 gap-0.5 items-center">
+        <div className="flex flex-1 gap-1 items-center">
             <IconButton
-                size={promptDisplayed ? 12 : 16}
-                containerSize={promptDisplayed ? 24 : 32}
+                size={12}
+                containerSize={24}
                 testId="prompt-panel-button"
-                className="hover:bg-app-icon-background-hover"
+                shape="rounded-rectangle"
+                aria-pressed={promptDisplayed}
                 onClick={() => setActivePanelContent(PANEL_CONTENT.PROMPTS)}
                 onMouseEnter={() => setHovered("prompt")}
                 onMouseLeave={() => setHovered(null)}
@@ -226,10 +225,11 @@ const ActionBar: React.FC = () => {
                 {promptFilled ? <PromptPanelFilledIcon /> : <PromptPanelIcon />}
             </IconButton>
             <IconButton
-                size={toolDisplayed ? 12 : 16}
-                containerSize={toolDisplayed ? 24 : 32}
+                size={12}
+                containerSize={24}
                 testId="tool-panel-button"
-                className="hover:bg-app-icon-background-hover"
+                shape="rounded-rectangle"
+                aria-pressed={toolDisplayed}
                 onClick={() => setActivePanelContent(PANEL_CONTENT.TOOLS)}
                 onMouseEnter={() => setHovered("tool")}
                 onMouseLeave={() => setHovered(null)}
diff --git a/templates/io-assist-react-editable/src/io-assist/components/messages/AssistantMessage.tsx b/templates/io-assist-react-editable/src/io-assist/components/messages/AssistantMessage.tsx
index 10cb76f..29135a8 100644
--- a/templates/io-assist-react-editable/src/io-assist/components/messages/AssistantMessage.tsx
+++ b/templates/io-assist-react-editable/src/io-assist/components/messages/AssistantMessage.tsx
@@ -15,7 +15,7 @@ type Props = {
 
 export const AssistantMessage: React.FC<Props> = ({ message, showFooter = false, footerCopyText = "", onReload, isGenerating = false }) => {
     return (
-        <div data-testid="assistant-message" className="flex flex-col flex-1 min-w-0 max-w-full self-stretch text-text-states-active font-weight-weight-400 leading-[19px] safe-word-break">
+        <div data-testid="assistant-message" className="flex flex-col flex-1 min-w-0 max-w-full self-stretch text-text-states-active font-weight-350 leading-[19px] safe-word-break">
             {message.content && (
                 <div data-testid="assistant-message-text">
                     <MdFormatter content={message.content} />
diff --git a/templates/io-assist-react-editable/src/io-assist/components/messages/MdFormatter.tsx b/templates/io-assist-react-editable/src/io-assist/components/messages/MdFormatter.tsx
index a67f5e6..8acc37d 100644
--- a/templates/io-assist-react-editable/src/io-assist/components/messages/MdFormatter.tsx
+++ b/templates/io-assist-react-editable/src/io-assist/components/messages/MdFormatter.tsx
@@ -44,7 +44,7 @@ const components: Components = {
         const isInline = !className && typeof children === "string" && !children.includes("\n");
         if (isInline) {
             return (
-                <code className="bg-app-background-secondary px-1.5 py-0.5 rounded text-sm font-mono text-text-states-active" {...props}>
+                <code className="bg-app-background-secondary px-1.5 py-0.5 rounded text-sm font-mono text-[var(--app-blue)]" {...props}>
                     {children}
                 </code>
             );
@@ -59,7 +59,7 @@ const components: Components = {
             <a
                 href={href}
                 title={title ?? ""}
-                className="text-[14px] font-semibold leading-5 text-[var(--app-blue)] underline [text-decoration-skip-ink:none] hover:opacity-[0.85]"
+                className="text-[14px] font-weight-550 leading-5 text-[var(--app-blue)] underline [text-decoration-skip-ink:none] hover:opacity-[0.85]"
                 target="_blank"
                 rel="noopener noreferrer"
             >
@@ -74,7 +74,7 @@ const components: Components = {
         return <thead className="text-left">{children}</thead>;
     },
     th({ children }) {
-        return <th className="py-3 pr-3 pl-0 last:pr-0 font-medium text-[14px] leading-5 text-text-states-active border-b-2 border-panel-border">{children}</th>;
+        return <th className="py-3 pr-3 pl-0 last:pr-0 font-weight-550 text-[14px] leading-5 text-text-states-active border-b-2 border-panel-border">{children}</th>;
     },
     td({ children }) {
         return <td className="py-3 pr-3 pl-0 last:pr-0 text-[14px] leading-5 text-text-default">{children}</td>;
@@ -87,43 +87,47 @@ const components: Components = {
         );
     },
     ul({ children }) {
-        return <ul className="list-disc pl-5 mt-4 mb-2 text-[14px] font-normal leading-5 text-text-default">{children}</ul>;
+        return <ul className="text-[14px] font-weight-350 leading-5 text-text-default">{children}</ul>;
     },
     ol({ children }) {
-        return <ol className="list-decimal pl-5 mt-4 mb-2 text-[14px] font-normal leading-5 text-text-default">{children}</ol>;
+        return <ol className="text-[14px] font-weight-350 leading-5 text-text-default">{children}</ol>;
     },
     li({ children }) {
-        return <li className="py-1">{children}</li>;
+        return <li>{children}</li>;
     },
     blockquote({ children }) {
-        return <blockquote className="p-4 my-4 rounded-2xl text-text-default flex flex-col gap-1 relative border border-app-accent-color-1">{children}</blockquote>;
+        return (
+            <blockquote className="relative flex flex-col gap-1 py-4 px-6 my-2 rounded-[4px] text-text-default bg-[#2e3033] before:content-[''] before:absolute before:left-0 before:inset-y-0 before:w-1.5 before:rounded-l-[4px] before:bg-[linear-gradient(180deg,var(--color-app-accent-color-1),var(--app-blue))]">
+                {children}
+            </blockquote>
+        );
     },
     hr() {
         return <hr className="my-4 border-0 border-t border-panel-border" />;
     },
     p({ children }) {
-        return <p className="text-[14px] font-normal leading-5 text-text-default my-2 first:mt-0 last:mb-0">{children}</p>;
+        return <p className="text-[14px] font-weight-350 leading-5 text-text-default my-2 first:mt-0 last:mb-0">{children}</p>;
     },
     strong({ children }) {
-        return <strong className="font-semibold">{children}</strong>;
+        return <strong className="font-weight-550">{children}</strong>;
     },
     h1({ children }) {
-        return <h1 className="font-default font-medium text-text-states-active py-0 mt-5 text-[20px] leading-[28px]">{children}</h1>;
+        return <h1 className="font-default font-weight-550 text-text-states-active py-0 mt-5 text-[20px] leading-[28px]">{children}</h1>;
     },
     h2({ children }) {
-        return <h2 className="font-default font-medium text-text-states-active py-0 mt-5 text-[18px] leading-[26px]">{children}</h2>;
+        return <h2 className="font-default font-weight-550 text-text-states-active py-0 mt-5 text-[18px] leading-[26px]">{children}</h2>;
     },
     h3({ children }) {
-        return <h3 className="font-default font-medium text-text-states-active py-0 mt-5 text-[16px] leading-[24px]">{children}</h3>;
+        return <h3 className="font-default font-weight-550 text-text-states-active py-0 mt-5 text-[16px] leading-[24px]">{children}</h3>;
     },
     h4({ children }) {
-        return <h4 className="font-default font-medium text-text-states-active py-0 mt-5 text-[15px] leading-[22px]">{children}</h4>;
+        return <h4 className="font-default font-weight-550 text-text-states-active py-0 mt-5 text-[15px] leading-[22px]">{children}</h4>;
     },
     h5({ children }) {
-        return <h5 className="font-default font-medium text-text-states-active py-0 mt-5 text-[14px] leading-5">{children}</h5>;
+        return <h5 className="font-default font-weight-550 text-text-states-active py-0 mt-5 text-[14px] leading-5">{children}</h5>;
     },
     h6({ children }) {
-        return <h6 className="font-default font-medium text-text-states-active py-0 mt-5 text-[13px] leading-[18px]">{children}</h6>;
+        return <h6 className="font-default font-weight-550 text-text-states-active py-0 mt-5 text-[13px] leading-[18px]">{children}</h6>;
     },
 };
 
diff --git a/templates/io-assist-react-editable/src/io-assist/components/messages/MessageArea.tsx b/templates/io-assist-react-editable/src/io-assist/components/messages/MessageArea.tsx
index ed1c8fb..82edc7d 100644
--- a/templates/io-assist-react-editable/src/io-assist/components/messages/MessageArea.tsx
+++ b/templates/io-assist-react-editable/src/io-assist/components/messages/MessageArea.tsx
@@ -70,14 +70,7 @@ export const MessageArea: React.FC<Props> = ({ onReloadResponse, className }) =>
                 <div className="flex flex-1 justify-center items-center p-4">
                     <div className="flex gap-1">
                         {[0, 1, 2].map((i) => (
-                            <div
-                                key={i}
-                                className="size-1.5 rounded-full bg-app-accent-color-1"
-                                style={{
-                                    animationDelay: `${i * 0.15}s`,
-                                    animation: `rise 0.6s cubic-bezier(0.16,1,0.3,1) ${i * 0.15}s infinite alternate`,
-                                }}
-                            />
+                            <div key={i} className="loading-dot size-1.5 rounded-full bg-app-accent-color-1" style={{ animationDelay: `${i * 0.15}s` }} />
                         ))}
                     </div>
                 </div>
diff --git a/templates/io-assist-react-editable/src/io-assist/components/messages/ToolMessage.tsx b/templates/io-assist-react-editable/src/io-assist/components/messages/ToolMessage.tsx
index 886ad92..6db92a7 100644
--- a/templates/io-assist-react-editable/src/io-assist/components/messages/ToolMessage.tsx
+++ b/templates/io-assist-react-editable/src/io-assist/components/messages/ToolMessage.tsx
@@ -35,7 +35,7 @@ export const ToolMessage: React.FC<Props> = ({ tool, parentToolTraceId, onToggle
     const resultMd = useMemo(() => resultToJSONMarkdown(tool.result), [tool.result]);
 
     return (
-        <div data-testid="tool-message" className="flex flex-col justify-start py-2 px-[3px] text-[13px] font-weight-weight-600 leading-[100%] text-text-states-active">
+        <div data-testid="tool-message" className="flex flex-col justify-start py-2 px-[3px] text-[13px] font-weight-550 leading-[100%] text-text-states-active">
             <div className="flex items-center gap-2 px-1">
                 <span
                     data-testid="tool-item-dot"
diff --git a/templates/io-assist-react-editable/src/io-assist/components/messages/UserMessage.tsx b/templates/io-assist-react-editable/src/io-assist/components/messages/UserMessage.tsx
index 0d4e7f0..19bc451 100644
--- a/templates/io-assist-react-editable/src/io-assist/components/messages/UserMessage.tsx
+++ b/templates/io-assist-react-editable/src/io-assist/components/messages/UserMessage.tsx
@@ -33,13 +33,13 @@ export const UserMessage: React.FC<Props> = ({ message, isLast = false, isGenera
                 </div>
 
                 <div className="flex min-w-0">
-                    <div className="p-4 list-none text-[14px] leading-[18px] font-weight-weight-400 text-user-message-text bg-user-message-background rounded-2xl max-w-[620px] min-w-0 whitespace-pre-wrap break-words">
+                    <div className="p-4 list-none text-[14px] leading-[18px] font-weight-350 text-user-message-text bg-user-message-background rounded-2xl max-w-[620px] min-w-0 whitespace-pre-wrap break-words">
                         {message.content ?? ""}
                     </div>
                 </div>
             </div>
 
-            {showError && <div className="flex justify-end py-1 text-text-default text-[13px] font-weight-weight-400 leading-[100%]">{error}</div>}
+            {showError && <div className="flex justify-end py-1 text-text-default text-[13px] font-weight-350 leading-[100%]">{error}</div>}
         </div>
     );
 };
diff --git a/templates/io-assist-react-editable/src/io-assist/components/prompt/PromptListItem.tsx b/templates/io-assist-react-editable/src/io-assist/components/prompt/PromptListItem.tsx
index d4eb6fa..7b45f79 100644
--- a/templates/io-assist-react-editable/src/io-assist/components/prompt/PromptListItem.tsx
+++ b/templates/io-assist-react-editable/src/io-assist/components/prompt/PromptListItem.tsx
@@ -2,15 +2,52 @@ import React, { useState } from "react";
 
 import { useIoAssistStore } from "../../context/IoAssistContext";
 import { useIoConnectApi } from "../../hooks/useIoConnectApi";
-import type { Prompt } from "../../types";
+import type { IconResource, Prompt } from "../../types";
 import { Icon } from "../shared/Icon";
-import { PromptDotIcon, StarIcon, StarFilledIcon } from "../shared/icons";
+import { PromptPanelIcon, StarIcon, StarFilledIcon } from "../shared/icons";
 
 type Props = {
     prompt: Prompt;
     isDisplayedInFavoriteList: boolean;
 };
 
+const getIconMaskUrl = (iconResource: IconResource): string => {
+    if (iconResource.type === "svg") {
+        return `url(${JSON.stringify(`data:image/svg+xml,${encodeURIComponent(iconResource.data)}`)})`;
+    }
+
+    return `url(${JSON.stringify(iconResource.data)})`;
+};
+
+const PromptItemIcon: React.FC<{ iconResource?: IconResource }> = ({ iconResource }) => {
+    if (!iconResource) {
+        return (
+            <Icon size={12}>
+                <PromptPanelIcon />
+            </Icon>
+        );
+    }
+
+    const maskImage = getIconMaskUrl(iconResource);
+
+    return (
+        <span
+            aria-hidden="true"
+            className="block size-3 bg-current"
+            style={{
+                WebkitMaskImage: maskImage,
+                maskImage,
+                WebkitMaskPosition: "center",
+                maskPosition: "center",
+                WebkitMaskRepeat: "no-repeat",
+                maskRepeat: "no-repeat",
+                WebkitMaskSize: "contain",
+                maskSize: "contain",
+            }}
+        />
+    );
+};
+
 export const PromptListItem: React.FC<Props> = ({ prompt, isDisplayedInFavoriteList }) => {
     const [isHovered, setIsHovered] = useState(false);
     const favoritePromptNames = useIoAssistStore((s) => s.favoritePromptNames);
@@ -56,10 +93,8 @@ export const PromptListItem: React.FC<Props> = ({ prompt, isDisplayedInFavoriteL
                 }}
                 title={prompt.description || undefined}
             >
-                <span className="flex size-8 shrink-0 items-center justify-center rounded-full text-text-default">
-                    <Icon size={16}>
-                        <PromptDotIcon />
-                    </Icon>
+                <span data-testid="prompt-icon" className={["flex size-6 shrink-0 items-center justify-center", isHovered ? "text-text-states-hover" : "text-text-default"].join(" ")}>
+                    <PromptItemIcon iconResource={prompt.iconResource} />
                 </span>
 
                 <span className={["flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-xs", isHovered ? "text-text-states-hover" : "text-text-default"].join(" ")}>{prompt.name}</span>
@@ -71,7 +106,7 @@ export const PromptListItem: React.FC<Props> = ({ prompt, isDisplayedInFavoriteL
                     aria-label={isFavorite ? "Remove from favorites" : "Add to favorites"}
                     title={isFavorite ? "Remove from favorites" : "Add to favorites"}
                     className={[
-                        "p-2 ps-1 shrink-0 inline-flex items-center justify-center cursor-pointer bg-transparent border-0",
+                        "size-6 p-2 ps-1 shrink-0 inline-flex items-center justify-center cursor-pointer bg-transparent border-0",
                         isFavorite ? "text-yellow-400" : isHovered ? "text-text-default hover:text-yellow-400" : "text-text-states-disabled",
                     ].join(" ")}
                     onClick={handleToggleFavorite}
diff --git a/templates/io-assist-react-editable/src/io-assist/components/shared/IconButton.tsx b/templates/io-assist-react-editable/src/io-assist/components/shared/IconButton.tsx
index db5d48c..d71da02 100644
--- a/templates/io-assist-react-editable/src/io-assist/components/shared/IconButton.tsx
+++ b/templates/io-assist-react-editable/src/io-assist/components/shared/IconButton.tsx
@@ -3,29 +3,37 @@ import React from "react";
 import { Icon } from "./Icon";
 
 type IconButtonVariant = "default" | "danger" | "plain";
+type IconButtonShape = "circle" | "rounded-rectangle";
 
 type IconButtonProps = {
     size?: number;
     containerSize?: number;
     testId?: string;
     variant?: IconButtonVariant;
+    shape?: IconButtonShape;
     children: React.ReactNode;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">;
 
 const ICON_BUTTON_HOVER_BY_VARIANT: Record<IconButtonVariant, string> = {
-    default: "hover:text-text-states-hover",
+    default: "hover:text-icon-hover",
     danger: "hover:text-app-danger",
     // No hover color change — for buttons that animate/keep their color on hover
     // (e.g. ng's panel/modal close icon keeps `--app-text-black-white`).
     plain: "",
 };
 
-export const IconButton: React.FC<IconButtonProps> = ({ size = 16, containerSize, className, testId, style, type = "button", variant = "default", children, ...rest }) => (
+const ICON_BUTTON_SHAPE_CLASS: Record<IconButtonShape, string> = {
+    circle: "rounded-full",
+    "rounded-rectangle": "rounded-lg",
+};
+
+export const IconButton: React.FC<IconButtonProps> = ({ size = 16, containerSize, className, testId, style, type = "button", variant = "default", shape = "circle", children, ...rest }) => (
     <button
         type={type}
         data-testid={testId}
         className={[
-            "flex items-center justify-center cursor-pointer transition-colors rounded-full text-text-default disabled:opacity-50 disabled:cursor-not-allowed",
+            "flex items-center justify-center cursor-pointer transition-colors text-icon-default disabled:text-icon-disabled disabled:cursor-not-allowed",
+            ICON_BUTTON_SHAPE_CLASS[shape],
             ICON_BUTTON_HOVER_BY_VARIANT[variant],
             className ?? "",
         ].join(" ")}
diff --git a/templates/io-assist-react-editable/src/io-assist/components/shared/Modal.tsx b/templates/io-assist-react-editable/src/io-assist/components/shared/Modal.tsx
index 346003b..396d42f 100644
--- a/templates/io-assist-react-editable/src/io-assist/components/shared/Modal.tsx
+++ b/templates/io-assist-react-editable/src/io-assist/components/shared/Modal.tsx
@@ -31,7 +31,7 @@ export const Modal: React.FC<ModalProps> = ({ open, onClose, title, showCloseIco
         <div
             data-testid={testId}
             role="presentation"
-            className="panel-overlay-container fixed inset-0 z-50 flex items-center justify-center bg-black/[0.32]"
+            className="io-assist-root panel-overlay-container fixed inset-0 z-50 flex items-center justify-center bg-black/[0.32]"
             onClick={(e) => {
                 if (e.target === e.currentTarget) onClose?.();
             }}
@@ -43,7 +43,7 @@ export const Modal: React.FC<ModalProps> = ({ open, onClose, title, showCloseIco
                 open
                 className="static flex flex-col box-border overflow-hidden bg-panel-background rounded-2xl border border-panel-border shadow-panel-box-shadow w-auto min-w-[320px] md:min-w-[540px] max-w-[960px] max-h-[90vh] p-0 m-0"
             >
-                <div className="flex justify-end items-center gap-2 px-6 pt-6 text-text-black-white text-xl font-weight-600 shrink-0">
+                <div className="flex justify-end items-center gap-2 px-6 pt-6 text-text-black-white text-xl font-weight-550 shrink-0">
                     {title && <span className="flex flex-1 items-center text-text-black-white leading-[24px] truncate">{title}</span>}
                     {showCloseIcon && onClose && (
                         <IconButton size={20} containerSize={28} variant="plain" onClick={onClose} title="Close" className="text-text-black-white">
diff --git a/templates/io-assist-react-editable/src/io-assist/components/shared/Tooltip.tsx b/templates/io-assist-react-editable/src/io-assist/components/shared/Tooltip.tsx
index 075c841..06e0f4e 100644
--- a/templates/io-assist-react-editable/src/io-assist/components/shared/Tooltip.tsx
+++ b/templates/io-assist-react-editable/src/io-assist/components/shared/Tooltip.tsx
@@ -115,7 +115,7 @@ export const Tooltip: React.FC<Props> = ({ content, position = "top", offset = 1
                     className={["fixed z-[999999] pointer-events-none transition-opacity duration-[120ms] max-w-[320px]", isPositioned ? "opacity-100" : "opacity-0"].join(" ")}
                     style={{ left: `${coords.x}px`, top: `${coords.y}px` }}
                 >
-                    <div className="relative flex flex-col items-start gap-1 px-[4px] py-[3px] rounded-[4px] border border-tooltip-border bg-tooltip-background text-tooltip-text text-[9px] tracking-[0.09px] leading-[11px]">
+                    <div className="relative flex flex-col items-start gap-1 px-[4px] py-[3px] rounded-[4px] border border-tooltip-border bg-tooltip-background text-tooltip-text text-[9px] font-weight-350 tracking-[0.09px] leading-[11px]">
                         {content}
                         <div className={`app-tooltip__arrow app-tooltip__arrow--${position}`} style={arrowStyle} />
                     </div>
diff --git a/templates/io-assist-react-editable/src/io-assist/components/shared/icons.tsx b/templates/io-assist-react-editable/src/io-assist/components/shared/icons.tsx
index 76aa9f3..0c09170 100644
--- a/templates/io-assist-react-editable/src/io-assist/components/shared/icons.tsx
+++ b/templates/io-assist-react-editable/src/io-assist/components/shared/icons.tsx
@@ -240,22 +240,22 @@ export const PromptPanelFilledIcon = () => (
     </svg>
 );
 
-// Sliders / row-toggles icon (matches ng app-icon TOOL_PANEL variant)
+// Wrench icon (matches ng app-icon TOOL_PANEL variant)
 export const ToolPanelIcon = () => (
-    <svg width="100%" height="100%" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width="100%" height="100%" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
             fill="currentColor"
-            d="M0.5625 0H1.6875C1.99219 0 2.25 0.257812 2.25 0.5625V1.6875C2.25 2.01562 1.99219 2.25 1.6875 2.25H0.5625C0.234375 2.25 0 2.01562 0 1.6875V0.5625C0 0.257812 0.234375 0 0.5625 0ZM4.125 0.375H10.875C11.2734 0.375 11.625 0.726562 11.625 1.125C11.625 1.54688 11.2734 1.875 10.875 1.875H4.125C3.70312 1.875 3.375 1.54688 3.375 1.125C3.375 0.726562 3.70312 0.375 4.125 0.375ZM4.125 4.125H10.875C11.2734 4.125 11.625 4.47656 11.625 4.875C11.625 5.29688 11.2734 5.625 10.875 5.625H4.125C3.70312 5.625 3.375 5.29688 3.375 4.875C3.375 4.47656 3.70312 4.125 4.125 4.125ZM4.125 7.875H10.875C11.2734 7.875 11.625 8.22656 11.625 8.625C11.625 9.04688 11.2734 9.375 10.875 9.375H4.125C3.70312 9.375 3.375 9.04688 3.375 8.625C3.375 8.22656 3.70312 7.875 4.125 7.875ZM0 4.3125C0 4.00781 0.234375 3.75 0.5625 3.75H1.6875C1.99219 3.75 2.25 4.00781 2.25 4.3125V5.4375C2.25 5.76562 1.99219 6 1.6875 6H0.5625C0.234375 6 0 5.76562 0 5.4375V4.3125ZM0.5625 7.5H1.6875C1.99219 7.5 2.25 7.75781 2.25 8.0625V9.1875C2.25 9.51562 1.99219 9.75 1.6875 9.75H0.5625C0.234375 9.75 0 9.51562 0 9.1875V8.0625C0 7.75781 0.234375 7.5 0.5625 7.5Z"
+            d="M3.48734 0.219759C5.18344 -0.302855 7.10737 0.106413 8.4512 1.45023C9.73675 2.73577 10.1638 4.55147 9.74124 6.19144L11.2119 7.66312C12.1685 8.61969 12.1694 10.1705 11.2129 11.127L11.127 11.2129C10.1705 12.1694 8.61969 12.1685 7.66312 11.2119L6.19144 9.74124C4.55147 10.1638 2.73577 9.73675 1.45023 8.4512C0.106413 7.10737 -0.302855 5.18344 0.219759 3.48734L0.259798 3.39847C0.310728 3.31696 0.392632 3.25717 0.488313 3.23343C0.615822 3.20193 0.750896 3.23918 0.843782 3.33206L3.23148 5.72074C3.44256 5.9318 3.78439 5.9313 3.99515 5.72074L5.72074 3.99515C5.9313 3.78439 5.9318 3.44256 5.72074 3.23148L3.33206 0.843782C3.23918 0.750896 3.20193 0.615822 3.23343 0.488314C3.2651 0.360696 3.36168 0.258487 3.48734 0.219759ZM7.92093 1.98148C6.94638 1.00693 5.6119 0.611733 4.34476 0.794954L6.25101 2.7012C6.75475 3.20496 6.75469 4.02155 6.25101 4.52542L4.52542 6.25101C4.02155 6.7547 3.20496 6.75475 2.7012 6.25101L0.794954 4.34476C0.611733 5.6119 1.00693 6.94638 1.98148 7.92093C3.12119 9.06029 4.7526 9.40886 6.19339 8.96488C6.32612 8.92397 6.47111 8.95952 6.56937 9.05765L8.19339 10.6817C8.85728 11.3456 9.93337 11.346 10.5967 10.6826L10.6826 10.5967C11.346 9.93337 11.3456 8.85729 10.6817 8.19339L9.05765 6.56937C8.95952 6.47111 8.92397 6.32612 8.96488 6.19339C9.40886 4.75261 9.06029 3.12119 7.92093 1.98148Z"
         />
     </svg>
 );
 
-// Filled sliders — used when tool panel is open / on hover (TOOL_PANEL_FILLED)
+// Filled wrench — used when tool panel is open / on hover (TOOL_PANEL_FILLED)
 export const ToolPanelFilledIcon = () => (
-    <svg width="100%" height="100%" viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width="100%" height="100%" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
             fill="currentColor"
-            d="M0.421875 0H1.26562C1.49414 0 1.6875 0.193359 1.6875 0.421875V1.26562C1.6875 1.51172 1.49414 1.6875 1.26562 1.6875H0.421875C0.175781 1.6875 0 1.51172 0 1.26562V0.421875C0 0.193359 0.175781 0 0.421875 0ZM3.09375 0.28125H8.15625C8.45508 0.28125 8.71875 0.544922 8.71875 0.84375C8.71875 1.16016 8.45508 1.40625 8.15625 1.40625H3.09375C2.77734 1.40625 2.53125 1.16016 2.53125 0.84375C2.53125 0.544922 2.77734 0.28125 3.09375 0.28125ZM3.09375 3.09375H8.15625C8.45508 3.09375 8.71875 3.35742 8.71875 3.65625C8.71875 3.97266 8.45508 4.21875 8.15625 4.21875H3.09375C2.77734 4.21875 2.53125 3.97266 2.53125 3.65625C2.53125 3.35742 2.77734 3.09375 3.09375 3.09375ZM3.09375 5.90625H8.15625C8.45508 5.90625 8.71875 6.16992 8.71875 6.46875C8.71875 6.78516 8.45508 7.03125 8.15625 7.03125H3.09375C2.77734 7.03125 2.53125 6.78516 2.53125 6.46875C2.53125 6.16992 2.77734 5.90625 3.09375 5.90625ZM0 3.23438C0 3.00586 0.175781 2.8125 0.421875 2.8125H1.26562C1.49414 2.8125 1.6875 3.00586 1.6875 3.23438V4.07812C1.6875 4.32422 1.49414 4.5 1.26562 4.5H0.421875C0.175781 4.5 0 4.32422 0 4.07812V3.23438ZM0.421875 5.625H1.26562C1.49414 5.625 1.6875 5.81836 1.6875 6.04688V6.89062C1.6875 7.13672 1.49414 7.3125 1.26562 7.3125H0.421875C0.175781 7.3125 0 7.13672 0 6.89062V6.04688C0 5.81836 0.175781 5.625 0.421875 5.625Z"
+            d="M3.48734 0.219759C5.18344 -0.302855 7.10737 0.106413 8.4512 1.45023C9.73675 2.73577 10.1638 4.55147 9.74124 6.19144L11.2119 7.66312C12.1685 8.61969 12.1694 10.1705 11.2129 11.127L11.127 11.2129C10.1705 12.1694 8.61969 12.1685 7.66312 11.2119L6.19144 9.74124C4.55147 10.1638 2.73577 9.73675 1.45023 8.4512C0.106413 7.10737 -0.302855 5.18344 0.219759 3.48734L0.259798 3.39847C0.310728 3.31696 0.392632 3.25717 0.488313 3.23343C0.615822 3.20193 0.750896 3.23918 0.843782 3.33206L3.23148 5.72074C3.44256 5.9318 3.78439 5.9313 3.99515 5.72074L5.72074 3.99515C5.9313 3.78439 5.9318 3.44256 5.72074 3.23148L3.33206 0.843782C3.23918 0.750896 3.20193 0.615822 3.23343 0.488314C3.2651 0.360696 3.36168 0.258487 3.48734 0.219759Z"
         />
     </svg>
 );
diff --git a/templates/io-assist-react-editable/src/io-assist/components/threads/ThreadHistoryPanel.tsx b/templates/io-assist-react-editable/src/io-assist/components/threads/ThreadHistoryPanel.tsx
index bc9b009..a10c8e7 100644
--- a/templates/io-assist-react-editable/src/io-assist/components/threads/ThreadHistoryPanel.tsx
+++ b/templates/io-assist-react-editable/src/io-assist/components/threads/ThreadHistoryPanel.tsx
@@ -33,11 +33,11 @@ export const ThreadHistoryPanel: React.FC<ThreadHistoryPanelProps> = ({ userName
 
             {hasUsername && (
                 <div data-testid="thread-user-profile" className="flex items-center gap-3 px-4 py-3 mt-auto border-t border-border-default">
-                    <div data-testid="thread-user-avatar" className="flex items-center justify-center size-6 rounded-full bg-app-accent-color-1 text-white font-semibold text-[12px] flex-shrink-0">
+                    <div data-testid="thread-user-avatar" className="flex items-center justify-center size-6 rounded-full bg-app-accent-color-1 text-white font-weight-550 text-[12px] flex-shrink-0">
                         {userInitial}
                     </div>
                     <div className="flex flex-col flex-1 min-w-0">
-                        <span data-testid="thread-user-name" className="text-text-default text-[12px] leading-[12px] font-normal truncate" title={userName}>
+                        <span data-testid="thread-user-name" className="text-text-default text-[12px] leading-[12px] font-weight-350 truncate" title={userName}>
                             {userName}
                         </span>
                     </div>
diff --git a/templates/io-assist-react-editable/src/io-assist/components/tool/ToolListItem.tsx b/templates/io-assist-react-editable/src/io-assist/components/tool/ToolListItem.tsx
index 55913b2..3f9a9d6 100644
--- a/templates/io-assist-react-editable/src/io-assist/components/tool/ToolListItem.tsx
+++ b/templates/io-assist-react-editable/src/io-assist/components/tool/ToolListItem.tsx
@@ -18,6 +18,12 @@ export const ToolListItem: React.FC<Props> = ({ tool, onToggle }) => {
         <div
             data-testid="tool-list-item"
             data-tool-name={tool.name}
+            // Upstream disables jsx-a11y/no-noninteractive-tabindex here; this template's
+            // ESLint config does not load that plugin (no ESLint 10 support), so the
+            // directive is dropped and only its rationale is kept: the row itself has no
+            // click action (toggle/tooltip are separately focusable children); tabIndex
+            // only ports ng's tool-list-item.component.html focusability.
+            tabIndex={0}
             className={["flex justify-between items-center px-2 py-1 gap-2 cursor-pointer rounded-md w-full", isHovered ? "bg-app-background-secondary" : ""].filter(Boolean).join(" ")}
             onMouseEnter={() => setIsHovered(true)}
             onMouseLeave={() => setIsHovered(false)}
@@ -30,7 +36,7 @@ export const ToolListItem: React.FC<Props> = ({ tool, onToggle }) => {
                 content={
                     <div className="flex justify-center bg-app-background-secondary text-text-default border border-border-default p-4 rounded-md leading-[17px] text-xs min-w-[240px] max-w-[320px]">
                         <div>
-                            <span className="text-text-states-active font-weight-600">Server name: </span>
+                            <span className="text-text-states-active font-weight-550">Server name: </span>
                             {tool.mcpServerName}
                         </div>
                     </div>
diff --git a/templates/io-assist-react-editable/src/io-assist/styles/defaults.css b/templates/io-assist-react-editable/src/io-assist/styles/defaults.css
index 6f4d473..e5d4a42 100644
--- a/templates/io-assist-react-editable/src/io-assist/styles/defaults.css
+++ b/templates/io-assist-react-editable/src/io-assist/styles/defaults.css
@@ -76,8 +76,9 @@
         --app-border-size-1: 1px;
 
         /* Text [Weights] */
-        --app-font-weight-400: 400;
-        --app-font-weight-600: 600;
+        --app-font-weight-250: 250;
+        --app-font-weight-350: 350;
+        --app-font-weight-550: 550;
 
         --app-default-box-shadow: 0 3px 11px 6px rgba(0, 0, 0, 0.16);
 
@@ -104,6 +105,8 @@
         --app-button-border-default: var(--app-neutrals-500);
         --app-background-disabled: var(--app-neutrals-900);
         --app-text-disabled: var(--app-neutrals-600);
+        --app-icon-default: var(--app-neutrals-200);
+        --app-icon-hover: var(--app-neutrals-0);
         --app-icon-disabled: var(--app-neutrals-600);
         --app-icon-background-hover: var(--app-neutrals-800);
         --app-icon-background-disabled: var(--app-neutrals-700);
@@ -170,6 +173,8 @@
         --app-button-border-default: var(--app-neutrals-200);
         --app-background-disabled: var(--app-neutrals-50);
         --app-text-disabled: var(--app-neutrals-400);
+        --app-icon-default: var(--app-neutrals-800);
+        --app-icon-hover: var(--app-neutrals-1000);
         --app-icon-disabled: var(--app-neutrals-400);
         --app-icon-background-hover: var(--app-neutrals-25);
         --app-icon-background-disabled: var(--app-neutrals-100);
diff --git a/templates/io-assist-react-editable/src/io-assist/styles/index.css b/templates/io-assist-react-editable/src/io-assist/styles/index.css
index e988b25..007e2f5 100644
--- a/templates/io-assist-react-editable/src/io-assist/styles/index.css
+++ b/templates/io-assist-react-editable/src/io-assist/styles/index.css
@@ -4,18 +4,14 @@
 /* Inter Variable — latin subset only (weights 100–900, normal style).
    We declare a single @font-face by hand (instead of importing the full
    @fontsource-variable/inter stylesheet) so the compiled CSS references only
-   the one woff2 we need. */
+   the one woff2 we need. Vite resolves the bare specifier from node_modules. */
 @font-face {
-  font-family: "Inter Variable";
-  font-style: normal;
-  font-display: swap;
-  font-weight: 100 900;
-  src: url("@fontsource-variable/inter/files/inter-latin-wght-normal.woff2")
-    format("woff2-variations");
-  unicode-range:
-    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
-    U+2215, U+FEFF, U+FFFD;
+    font-family: "Inter Variable";
+    font-style: normal;
+    font-display: swap;
+    font-weight: 100 900;
+    src: url("@fontsource-variable/inter/files/inter-latin-wght-normal.woff2") format("woff2-variations");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 /* ─── Tailwind Theme: map CSS variables to Tailwind utilities ─────────────────
@@ -23,127 +19,125 @@
    automatically when the class is applied to <html>.
    ─────────────────────────────────────────────────────────────────────────── */
 @theme {
-  /* General */
-  /* General [Colors] */
-  /* ... */
-  --color-app-background: var(--app-background);
-  --color-app-background-secondary: var(--app-background-secondary);
-  --color-app-accent-color-1: var(--app-accent-color-1);
-  --color-app-accent-color-2: var(--app-accent-color-2);
-  --color-app-accent-color-3: var(--app-accent-color-3);
-
-  /* General [Spacings] */
-  --spacing-spacing-1: var(--app-spacing-1);
-  --spacing-spacing-2: var(--app-spacing-2);
-  --spacing-spacing-3: var(--app-spacing-3);
-  --spacing-spacing-4: var(--app-spacing-4);
-  --spacing-spacing-5: var(--app-spacing-5);
-  --spacing-spacing-6: var(--app-spacing-6);
-
-  /* Font */
-  /* Font [Types] */
-  --font-default: "Inter Variable", sans-serif;
-
-  /* Font [Colors] */
-  --color-text-states-disabled: var(--app-text-states-disabled);
-  --color-text-states-hover: var(--app-text-states-hover);
-  --color-text-states-active: var(--app-text-states-active);
-  --color-text-default: var(--app-text-default);
-  --color-text-secondary: var(--app-text-secondary);
-  --color-text-black-white: var(--app-text-black-white);
-  --color-text-danger: var(--app-red-700);
-
-  /* Thread History */
-  /* Thread History [Colors] */
-  --color-thread-list-item-hover-background: var(
-    --app-thread-list-item-hover-background
-  );
-
-  /* Font [Weights] */
-  --font-weight-weight-400: var(--app-font-weight-400);
-  --font-weight-weight-600: var(--app-font-weight-600);
-
-  /* Borders */
-  /* Borders [Colors] */
-  --color-border-default: var(--app-border-default);
-  --color-border-hover: var(--app-border-hover);
-
-  /* AppTooltipComponent [Colors] */
-  --color-tooltip-background: var(--app-tooltip-background);
-  --color-tooltip-border: var(--app-tooltip-border);
-  --color-tooltip-text: var(--app-tooltip-text);
-
-  /* AppPanelComponent */
-  /* AppPanelComponent [Colors] */
-  --color-panel-background: var(--app-panel-background);
-  --color-panel-border: var(--app-panel-border);
-  --shadow-panel-box-shadow: var(--app-default-box-shadow);
-
-  /* AppButtonComponent */
-  /* AppButtonComponent [Colors] */
-  --color-button-submit-background: var(--app-blue);
-  --color-button-danger-background: var(--app-red-700);
-  --color-button-border: var(--app-neutrals-1000);
-  --color-button-border-default: var(--app-button-border-default);
-  --color-button-background-disabled: var(--app-background-disabled);
-  --color-button-text-disabled: var(--app-text-disabled);
-
-  /* UserMessageComponent */
-  /* UserMessageComponent [Colors] */
-  --color-user-message-background: var(--app-user-message-background);
-  --color-user-message-text: var(--app-user-message-text);
-
-  /* AppInputComponent */
-  /* AppInputComponent [Colors] */
-  --color-input-background-disabled: var(--app-input-background-disabled);
-  --color-input-border: var(--app-input-border);
-  --color-input-border-disabled: var(--app-border-disabled-default);
-  --color-input-default: var(--app-text-default);
-  --color-input-label-disabled: var(--app-text-states-disabled);
-  --color-input-background: var(--app-input-background);
-  --color-input-background-hover: var(--app-input-background-hover);
-  --color-input-background-active: var(--app-input-background-active);
-  --color-input-border: var(--app-input-border);
-  --color-input-border-hover: var(--app-input-border-hover);
-  --color-input-border-active: var(--app-input-border-active);
-  --color-input-text: var(--app-input-text);
-  --color-input-text-active: var(--app-input-text-active);
-  --color-input-icon: var(--app-input-icon);
-  --color-input-icon-active: var(--app-input-icon-active);
-  --color-input-icon-disabled: var(--app-input-icon-disabled);
-  --color-input-error-border: var(--app-border-error);
-  --color-input-error-text: var(--app-text-error);
-
-  /* AppInputComponent [Sizes] */
-  --border-width-input-border: var(--app-border-size-1);
-  --radius-input-radius: var(--app-border-radius-sm);
-  --font-size-input-text: var(--app-font-size-12);
-  --font-size-input-error: var(--app-font-size-10);
-  --line-height-input-error: var(--app-line-height-13);
-  --tracking-input-error: var(--app-letter-spacing-01);
-
-  /* AppIconComponent [Colors] */
-  --color-app-icon-background-hover: var(--app-icon-background-hover);
-  --color-app-icon-background-disabled: var(--app-icon-background-disabled);
-
-  /* AppToggleComponent */
-  /* AppToggleComponent [Colors] */
-  --color-toggle-background-disabled: var(--app-toggle-background-disabled);
-  --color-toggle-background-enabled: var(--app-toggle-background-enabled);
-  --color-toggle-background-hover-disabled: var(
-    --app-toggle-background-hover-disabled
-  );
-  --color-toggle-background-hover-enabled: var(
-    --app-toggle-background-hover-enabled
-  );
-  --color-toggle-circle: var(--app-toggle-circle);
-
-  /* Prototype Colors */
-  --color-proto-background: var(--app-proto-background);
-  --color-proto-background-light: var(--app-proto-background-light);
-  --color-proto-border-default: var(--app-proto-border-default);
-  --color-proto-text-default: var(--app-proto-text-default);
-  --color-proto-text-disabled: var(--app-proto-text-disabled);
+    /* General */
+    /* General [Colors] */
+    /* ... */
+    --color-app-background: var(--app-background);
+    --color-app-background-secondary: var(--app-background-secondary);
+    --color-app-accent-color-1: var(--app-accent-color-1);
+    --color-app-accent-color-2: var(--app-accent-color-2);
+    --color-app-accent-color-3: var(--app-accent-color-3);
+
+    /* General [Spacings] */
+    --spacing-spacing-1: var(--app-spacing-1);
+    --spacing-spacing-2: var(--app-spacing-2);
+    --spacing-spacing-3: var(--app-spacing-3);
+    --spacing-spacing-4: var(--app-spacing-4);
+    --spacing-spacing-5: var(--app-spacing-5);
+    --spacing-spacing-6: var(--app-spacing-6);
+
+    /* Font */
+    /* Font [Types] */
+    --font-default: "Inter Variable", sans-serif;
+
+    /* Font [Colors] */
+    --color-text-states-disabled: var(--app-text-states-disabled);
+    --color-text-states-hover: var(--app-text-states-hover);
+    --color-text-states-active: var(--app-text-states-active);
+    --color-text-default: var(--app-text-default);
+    --color-text-secondary: var(--app-text-secondary);
+    --color-text-black-white: var(--app-text-black-white);
+    --color-text-danger: var(--app-red-700);
+
+    /* Thread History */
+    /* Thread History [Colors] */
+    --color-thread-list-item-hover-background: var(--app-thread-list-item-hover-background);
+
+    /* Font [Weights] */
+    --font-weight-weight-250: var(--app-font-weight-250);
+    --font-weight-weight-350: var(--app-font-weight-350);
+    --font-weight-weight-550: var(--app-font-weight-550);
+
+    /* Borders */
+    /* Borders [Colors] */
+    --color-border-default: var(--app-border-default);
+    --color-border-hover: var(--app-border-hover);
+
+    /* AppTooltipComponent [Colors] */
+    --color-tooltip-background: var(--app-tooltip-background);
+    --color-tooltip-border: var(--app-tooltip-border);
+    --color-tooltip-text: var(--app-tooltip-text);
+
+    /* AppPanelComponent */
+    /* AppPanelComponent [Colors] */
+    --color-panel-background: var(--app-panel-background);
+    --color-panel-border: var(--app-panel-border);
+    --shadow-panel-box-shadow: var(--app-default-box-shadow);
+
+    /* AppButtonComponent */
+    /* AppButtonComponent [Colors] */
+    --color-button-submit-background: var(--app-blue);
+    --color-button-danger-background: var(--app-red-700);
+    --color-button-border: var(--app-neutrals-1000);
+    --color-button-border-default: var(--app-button-border-default);
+    --color-button-background-disabled: var(--app-background-disabled);
+    --color-button-text-disabled: var(--app-text-disabled);
+
+    /* UserMessageComponent */
+    /* UserMessageComponent [Colors] */
+    --color-user-message-background: var(--app-user-message-background);
+    --color-user-message-text: var(--app-user-message-text);
+
+    /* AppInputComponent */
+    /* AppInputComponent [Colors] */
+    --color-input-background-disabled: var(--app-input-background-disabled);
+    --color-input-border: var(--app-input-border);
+    --color-input-border-disabled: var(--app-border-disabled-default);
+    --color-input-default: var(--app-text-default);
+    --color-input-label-disabled: var(--app-text-states-disabled);
+    --color-input-background: var(--app-input-background);
+    --color-input-background-hover: var(--app-input-background-hover);
+    --color-input-background-active: var(--app-input-background-active);
+    --color-input-border: var(--app-input-border);
+    --color-input-border-hover: var(--app-input-border-hover);
+    --color-input-border-active: var(--app-input-border-active);
+    --color-input-text: var(--app-input-text);
+    --color-input-text-active: var(--app-input-text-active);
+    --color-input-icon: var(--app-input-icon);
+    --color-input-icon-active: var(--app-input-icon-active);
+    --color-input-icon-disabled: var(--app-input-icon-disabled);
+    --color-input-error-border: var(--app-border-error);
+    --color-input-error-text: var(--app-text-error);
+
+    /* AppInputComponent [Sizes] */
+    --border-width-input-border: var(--app-border-size-1);
+    --radius-input-radius: var(--app-border-radius-sm);
+    --font-size-input-text: var(--app-font-size-12);
+    --font-size-input-error: var(--app-font-size-10);
+    --line-height-input-error: var(--app-line-height-13);
+    --tracking-input-error: var(--app-letter-spacing-01);
+
+    /* AppIconComponent [Colors] */
+    --color-icon-default: var(--app-icon-default);
+    --color-icon-hover: var(--app-icon-hover);
+    --color-icon-disabled: var(--app-icon-disabled);
+    --color-app-icon-background-hover: var(--app-icon-background-hover);
+    --color-app-icon-background-disabled: var(--app-icon-background-disabled);
+
+    /* AppToggleComponent */
+    /* AppToggleComponent [Colors] */
+    --color-toggle-background-disabled: var(--app-toggle-background-disabled);
+    --color-toggle-background-enabled: var(--app-toggle-background-enabled);
+    --color-toggle-background-hover-disabled: var(--app-toggle-background-hover-disabled);
+    --color-toggle-background-hover-enabled: var(--app-toggle-background-hover-enabled);
+    --color-toggle-circle: var(--app-toggle-circle);
+
+    /* Prototype Colors */
+    --color-proto-background: var(--app-proto-background);
+    --color-proto-background-light: var(--app-proto-background-light);
+    --color-proto-border-default: var(--app-proto-border-default);
+    --color-proto-text-default: var(--app-proto-text-default);
+    --color-proto-text-disabled: var(--app-proto-text-disabled);
 }
 
 /* ─── App-md-formatter rules ─────────────────────────────────────────────────
@@ -152,31 +146,147 @@
    - Accent gradient peek behind code blocks (`.io-assist-code-theme::before`).
    ─────────────────────────────────────────────────────────────────────────── */
 @layer base {
-  /* Lives in @layer base so Tailwind utilities (in the utilities layer) still
+    .io-assist-root {
+        font-weight: var(--app-font-weight-350);
+    }
+
+    .io-assist-root h1,
+    .io-assist-root h2,
+    .io-assist-root h3,
+    .io-assist-root h4,
+    .io-assist-root h5,
+    .io-assist-root h6,
+    .io-assist-root b,
+    .io-assist-root strong {
+        font-weight: var(--app-font-weight-550);
+    }
+
+    .io-assist-root input,
+    .io-assist-root textarea {
+        font-weight: var(--app-font-weight-350);
+    }
+
+    /* Lives in @layer base so Tailwind utilities (in the utilities layer) still
        win for specific per-element padding (e.g. headings/code blocks). */
-  .io-assist-md * {
-    padding-top: 8px;
-    padding-bottom: 8px;
-  }
+    .io-assist-md * {
+        padding-top: 8px;
+        padding-bottom: 8px;
+    }
+
+    /* Code block — reset the blanket padding for all code-block descendants. */
+    .io-assist-md .io-assist-code-block * {
+        padding: 0;
+    }
+}
+
+@layer components {
+    .io-assist-md .io-assist-code-theme {
+        position: relative;
+        display: block;
+    }
+
+    /* Working context panel — clamp the JSON code block to a viewport-relative
+       height so the panel stays scrollable. Mirrors ng's working-context-panel.component.css. */
+    .working-context-panel .io-assist-code-theme > pre {
+        height: 30vh;
+        max-height: 620px;
+    }
+}
 
-  /* Code block — reset the blanket padding for all code-block descendants. */
-  .io-assist-md .io-assist-code-block * {
+/* ─── Custom list markers ────────────────────────────────────────────────────
+   Ports ng's app-md-formatter.component.css list rules: bullets/numbers are
+   drawn via ::before instead of native markers, with per-nesting-level shapes.
+   Unlayered so it wins over the `.io-assist-md *` blanket padding above.
+   ─────────────────────────────────────────────────────────────────────────── */
+.io-assist-md ul,
+.io-assist-md ol {
+    margin: 16px 0 8px 0;
     padding: 0;
-  }
+    list-style: none;
 }
 
-@layer components {
-  .io-assist-md .io-assist-code-theme {
+.io-assist-md li > p,
+.io-assist-md li > span {
+    padding: 0;
+    margin: 0;
+}
+
+.io-assist-md li > ul,
+.io-assist-md li > ol {
+    margin: 0;
+}
+
+/* Unordered lists */
+.io-assist-md ul {
+    padding-left: 8px;
+}
+
+.io-assist-md li > ul {
+    padding-left: 16px;
+}
+
+.io-assist-md li > ul > li > ul {
+    padding-left: 24px;
+}
+
+.io-assist-md ul > li {
     position: relative;
-    display: block;
-  }
+    padding: 6px 0 6px 14px;
+}
 
-  /* Working context panel — clamp the JSON code block to a viewport-relative
-       height so the panel stays scrollable. Mirrors ng's working-context-panel.component.css. */
-  .working-context-panel .io-assist-code-theme > pre {
-    height: 30vh;
-    max-height: 620px;
-  }
+/* Bullet: vertically centred with the first text line. */
+.io-assist-md ul > li::before {
+    content: "";
+    position: absolute;
+    left: 1px;
+    top: 13px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: var(--color-text-default);
+}
+
+/* L3 bullet: hollow circle */
+.io-assist-md ul > li > ul > li > ul > li::before {
+    background-color: transparent;
+    border: 1.5px solid var(--color-text-default);
+}
+
+/* Ordered lists */
+.io-assist-md ol {
+    counter-reset: item;
+}
+
+.io-assist-md li > ol {
+    padding-left: 24px;
+}
+
+.io-assist-md ol > li {
+    counter-increment: item;
+    position: relative;
+    padding: 6px 0 6px 20px;
+}
+
+/* L2 items need more room for "1.1." */
+.io-assist-md li > ol > li {
+    padding-left: 32px;
+}
+
+/* L3 items need more room for "1.1.1." */
+.io-assist-md li > ol > li > ol > li {
+    padding-left: 44px;
+}
+
+.io-assist-md ol > li::before {
+    content: counters(item, ".") ".";
+    position: absolute;
+    left: 0;
+    top: 6px;
+    font-family: "Inter Variable", sans-serif;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+    color: var(--color-text-states-active);
 }
 
 /* ─── Tooltip arrow ──────────────────────────────────────────────────────────
@@ -184,68 +294,68 @@
    the bubble edge; its left/top is set inline so it tracks the trigger centre.
    ─────────────────────────────────────────────────────────────────────────── */
 .app-tooltip__arrow {
-  position: absolute;
-  width: 8px;
-  height: 8px;
-  background: var(--color-tooltip-background);
-  pointer-events: none;
-  z-index: 1;
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: var(--color-tooltip-background);
+    pointer-events: none;
+    z-index: 1;
 }
 
 /* TOP: tooltip above trigger → arrow points DOWN at bottom edge. */
 .app-tooltip__arrow--top {
-  bottom: -5px;
-  transform: translateX(-50%) rotate(45deg);
-  border-right: 1px solid var(--color-tooltip-border);
-  border-bottom: 1px solid var(--color-tooltip-border);
+    bottom: -5px;
+    transform: translateX(-50%) rotate(45deg);
+    border-right: 1px solid var(--color-tooltip-border);
+    border-bottom: 1px solid var(--color-tooltip-border);
 }
 
 /* BOTTOM: tooltip below trigger → arrow points UP at top edge. */
 .app-tooltip__arrow--bottom {
-  top: -5px;
-  transform: translateX(-50%) rotate(45deg);
-  border-left: 1px solid var(--color-tooltip-border);
-  border-top: 1px solid var(--color-tooltip-border);
+    top: -5px;
+    transform: translateX(-50%) rotate(45deg);
+    border-left: 1px solid var(--color-tooltip-border);
+    border-top: 1px solid var(--color-tooltip-border);
 }
 
 /* LEFT: tooltip left of trigger → arrow points RIGHT at right edge. */
 .app-tooltip__arrow--left {
-  right: -5px;
-  transform: translateY(-50%) rotate(45deg);
-  border-top: 1px solid var(--color-tooltip-border);
-  border-right: 1px solid var(--color-tooltip-border);
+    right: -5px;
+    transform: translateY(-50%) rotate(45deg);
+    border-top: 1px solid var(--color-tooltip-border);
+    border-right: 1px solid var(--color-tooltip-border);
 }
 
 /* RIGHT: tooltip right of trigger → arrow points LEFT at left edge. */
 .app-tooltip__arrow--right {
-  left: -5px;
-  transform: translateY(-50%) rotate(45deg);
-  border-bottom: 1px solid var(--color-tooltip-border);
-  border-left: 1px solid var(--color-tooltip-border);
+    left: -5px;
+    transform: translateY(-50%) rotate(45deg);
+    border-bottom: 1px solid var(--color-tooltip-border);
+    border-left: 1px solid var(--color-tooltip-border);
 }
 
 /* ─── Select dropdown ────────────────────────────────────────────────────────
    Ports ng's app-select.component.css open animation.
    ─────────────────────────────────────────────────────────────────────────── */
 @keyframes select-in {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+    from {
+        opacity: 0;
+        transform: translateY(-4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 .app-select__dropdown {
-  animation: select-in 120ms ease-in;
+    animation: select-in 120ms ease-in;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .app-select__dropdown {
-    animation: none;
-  }
+    .app-select__dropdown {
+        animation: none;
+    }
 }
 
 /* ─── Accent gradient border ─────────────────────────────────────────────────
@@ -255,31 +365,27 @@
    solid background; the ring sits behind the content via an isolated context.
    ─────────────────────────────────────────────────────────────────────────── */
 .accent-gradient-border {
-  position: relative;
-  isolation: isolate;
+    position: relative;
+    isolation: isolate;
 }
 
 .accent-gradient-border::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  padding: 1px;
-  border-radius: inherit;
-  pointer-events: none;
-  background: linear-gradient(
-    90deg,
-    var(--color-app-accent-color-1),
-    var(--color-app-accent-color-2)
-  );
-  -webkit-mask:
-    linear-gradient(#fff 0 0) content-box,
-    linear-gradient(#fff 0 0);
-  mask:
-    linear-gradient(#fff 0 0) content-box,
-    linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  mask-composite: exclude;
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    padding: 1px;
+    border-radius: inherit;
+    pointer-events: none;
+    background: linear-gradient(90deg, var(--color-app-accent-color-1), var(--color-app-accent-color-2));
+    -webkit-mask:
+        linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
+    mask:
+        linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
 }
 
 /* ─── Input area glow ────────────────────────────────────────────────────────
@@ -287,32 +393,23 @@
    border edge, bleeding upward above the box. The content box sits above it.
    ─────────────────────────────────────────────────────────────────────────── */
 .input-area__container::before {
-  content: "";
-  position: absolute;
-  left: 5%;
-  right: 5%;
-  top: -3px;
-  height: 12px;
-  pointer-events: none;
-  z-index: 0;
-  background:
-    radial-gradient(
-      ellipse 40% 100% at 15% 50%,
-      var(--color-app-accent-color-1),
-      transparent 100%
-    ),
-    radial-gradient(
-      ellipse 40% 100% at 85% 50%,
-      var(--color-app-accent-color-2),
-      transparent 100%
-    );
-  filter: blur(12px);
-  opacity: 0.75;
+    content: "";
+    position: absolute;
+    left: 5%;
+    right: 5%;
+    top: -3px;
+    height: 12px;
+    pointer-events: none;
+    z-index: 0;
+    background:
+        radial-gradient(ellipse 40% 100% at 15% 50%, var(--color-app-accent-color-1), transparent 100%), radial-gradient(ellipse 40% 100% at 85% 50%, var(--color-app-accent-color-2), transparent 100%);
+    filter: blur(12px);
+    opacity: 0.75;
 }
 
 .input-area__content {
-  position: relative;
-  z-index: 1;
+    position: relative;
+    z-index: 1;
 }
 
 /* ─── Reload icon animation ──────────────────────────────────────────────────
@@ -320,38 +417,63 @@
    270° then settles back. Used by the message-footer ReloadButton.
    ─────────────────────────────────────────────────────────────────────────── */
 .io-reload__icon {
-  display: inline-flex;
-  /* Fills the IconButton's <Icon> box so the 100%-sized SVG keeps its size. */
-  width: 100%;
-  height: 100%;
-  transition: transform 200ms ease;
+    display: inline-flex;
+    /* Fills the IconButton's <Icon> box so the 100%-sized SVG keeps its size. */
+    width: 100%;
+    height: 100%;
+    transition: transform 200ms ease;
 }
 
 .io-reload:not(:disabled):hover .io-reload__icon {
-  transform: rotate(45deg);
+    transform: rotate(45deg);
 }
 
 .io-reload__icon--spin {
-  /* Matches ng's spin-270-return: 270° clockwise then smoothly back to 0°. */
-  animation: io-reload-spin 550ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+    /* Matches ng's spin-270-return: 270° clockwise then smoothly back to 0°. */
+    animation: io-reload-spin 550ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }
 
 @keyframes io-reload-spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  65% {
-    transform: rotate(270deg);
-  }
-  100% {
-    transform: rotate(0deg);
-  }
+    0% {
+        transform: rotate(0deg);
+    }
+    65% {
+        transform: rotate(270deg);
+    }
+    100% {
+        transform: rotate(0deg);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .io-reload__icon,
+    .io-reload__icon--spin {
+        transition: none;
+        animation: none;
+    }
+}
+
+/* ─── Loading dots ───────────────────────────────────────────────────────────
+   Used by MessageArea's "loading messages from thread" indicator: three dots
+   bounce up with a staggered delay (set inline per-dot), alternating back down.
+   ─────────────────────────────────────────────────────────────────────────── */
+.loading-dot {
+    animation: rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) infinite alternate;
+}
+
+@keyframes rise {
+    from {
+        transform: translateY(0);
+        opacity: 0.5;
+    }
+    to {
+        transform: translateY(-6px);
+        opacity: 1;
+    }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .io-reload__icon,
-  .io-reload__icon--spin {
-    transition: none;
-    animation: none;
-  }
+    .loading-dot {
+        animation: none;
+    }
 }
diff --git a/templates/io-assist-react-editable/src/io-assist/types/config.ts b/templates/io-assist-react-editable/src/io-assist/types/config.ts
index 8fc91cd..7455b7a 100644
--- a/templates/io-assist-react-editable/src/io-assist/types/config.ts
+++ b/templates/io-assist-react-editable/src/io-assist/types/config.ts
@@ -39,6 +39,7 @@ export type IoAssistStaticConfig = {
     aiWebConfig: {
         agentServer: IoAiWeb.AgentServerConfig;
         mcp?: IoAiWeb.MCPConfig;
+        codeMode?: IoAiWeb.CodeModeConfig;
     };
     defaultAgentName?: string;
     workingContext?: IoAiWeb.WorkingContextConfig;
diff --git a/templates/io-assist-react-packaged/package-lock.json b/templates/io-assist-react-packaged/package-lock.json
index 35ba4ab..0a655cc 100644
--- a/templates/io-assist-react-packaged/package-lock.json
+++ b/templates/io-assist-react-packaged/package-lock.json
@@ -1,15 +1,15 @@
 {
-  "name": "io-assist-react",
+  "name": "io-assist-react-packaged",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "io-assist-react",
+      "name": "io-assist-react-packaged",
       "version": "0.0.0",
       "dependencies": {
         "@interopio/browser": "^4.5.0",
-        "@interopio/io-assist-react": "^1.0.1",
+        "@interopio/io-assist-react": "^1.1.2",
         "@interopio/workspaces-api": "^4.5.0",
         "react": "^19.2.6",
         "react-dom": "^19.2.6"
@@ -29,6 +29,25 @@
         "vite": "^8.0.12"
       }
     },
+    "node_modules/@ag-ui/core": {
+      "version": "0.0.52",
+      "resolved": "https://registry.npmjs.org/@ag-ui/core/-/core-0.0.52.tgz",
+      "integrity": "sha512-Xo0bUaNV56EqylzcrAuhUkQX7et7+SZIrqZZtEByGwEq/I1EHny6ZMkWHLkKR7UNi0FJZwJyhKYmKJS3B2SEgA==",
+      "peer": true,
+      "dependencies": {
+        "zod": "^3.22.4"
+      }
+    },
+    "node_modules/@ag-ui/core/node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.29.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
@@ -441,9 +460,9 @@
       }
     },
     "node_modules/@hono/node-server": {
-      "version": "2.0.12",
-      "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-2.0.12.tgz",
-      "integrity": "sha512-eWpQYr67tqJLeaSUl0Q+TquuYfUdTibpOJlUMV2FfUP7+KqCC5TufnwnlXL6mobZBJbGAYRd7ZvEBDCbLInjhg==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-2.1.1.tgz",
+      "integrity": "sha512-ELuehkj5VCBdgEw9zs+ivkKwyzzUCSQuE96YmiPvn1ECBoZCczbFXJLeEGMTYjphP6gydh4pHMqEYPVMYUVgQg==",
       "license": "MIT",
       "engines": {
         "node": ">=20"
@@ -519,15 +538,16 @@
       }
     },
     "node_modules/@interopio/ai-web": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@interopio/ai-web/-/ai-web-1.1.2.tgz",
-      "integrity": "sha512-Y2CvegmCU6o0Jp0TWh3H+/VUe26EwKCDlpQ7VjdxXXJM9QrMkFMFWDgDukFaRhGJzKPjBLgNc6yBEPxkHbPRvg==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@interopio/ai-web/-/ai-web-1.2.2.tgz",
+      "integrity": "sha512-F8FNGeLgsk9Zpkze9mB9ssHgzQQPfyvB1D53ZlL8C3XM8i/j9C+jtgSx4bGbUe35EY4ktPNhnIf+lFYr+9gGlg==",
       "license": "MIT",
       "dependencies": {
         "@interopio/browser": "^4.0.0",
+        "@interopio/code-mode": "^0.0.2",
         "@interopio/desktop": "^6.0.0",
-        "@interopio/mcp-core": "^1.2.1",
-        "@interopio/working-context": "^1.1.1",
+        "@interopio/mcp-core": "^1.2.4",
+        "@interopio/working-context": "^1.1.2",
         "@modelcontextprotocol/sdk": "^1.19.1"
       }
     },
@@ -565,6 +585,25 @@
         }
       }
     },
+    "node_modules/@interopio/code-mode": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@interopio/code-mode/-/code-mode-0.0.2.tgz",
+      "integrity": "sha512-qwe8jByc4Z5huBJ1JddjvjpF1xmIDtko4zcuhuGTb2BeAZjRNR7N7+YzbM4YPfgWVORI9NA/hgPN9YGBynPJRA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/ai-code-mode": "0.3.7",
+        "zod": "^3.25.76"
+      }
+    },
+    "node_modules/@interopio/code-mode/node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/@interopio/core": {
       "version": "6.11.0",
       "resolved": "https://registry.npmjs.org/@interopio/core/-/core-6.11.0.tgz",
@@ -689,17 +728,17 @@
       }
     },
     "node_modules/@interopio/io-assist-react": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@interopio/io-assist-react/-/io-assist-react-1.0.2.tgz",
-      "integrity": "sha512-k+0UJulazY9QsuHgX8WAOhPM+G7wZeqPy36XZu3u389f8t2jYmgeJgP3ZDMmeiiexKGYYClmmmzjCzxrfw35+A==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@interopio/io-assist-react/-/io-assist-react-1.1.2.tgz",
+      "integrity": "sha512-2tQA2OIFxsCh9i6Yws14j3OcM0iHHh7DMFPbb4qiFLOwzSRMJnqamXXvIjrgFVI8s5wE6kTkzBtu1cF4PbLWqg==",
       "license": "MIT",
       "dependencies": {
         "@fontsource-variable/inter": "^5.0.0",
-        "@interopio/ai-web": "^1.1.2",
+        "@interopio/ai-web": "^1.2.2",
         "@interopio/browser": ">=4.0.0",
         "@interopio/core": ">=6.0.0",
         "@interopio/desktop": ">=6.0.0",
-        "@interopio/working-context": "^1.1.1",
+        "@interopio/working-context": "^1.1.2",
         "prism-react-renderer": "^2.4.1",
         "react-markdown": "^9.0.1",
         "remark-gfm": "^4.0.1",
@@ -711,14 +750,15 @@
       }
     },
     "node_modules/@interopio/mcp-core": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@interopio/mcp-core/-/mcp-core-1.2.1.tgz",
-      "integrity": "sha512-6ECVIgyeaB/y00ptlrhT4VatqMKAmeHLTZP6kj8PmUjkKXOaC5/WPrJqGf5meyr6n03IiyFLOp84PB6p8yljbA==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@interopio/mcp-core/-/mcp-core-1.2.4.tgz",
+      "integrity": "sha512-03UGOM+UaQLGizU9letXKude10IPrSVykuqqJsv3CCdw3GUpSKPhiw08pkIkCaCMeT+fZQ0a7icfph76XHD4FQ==",
       "license": "MIT",
       "dependencies": {
         "@interopio/browser": "^4.0.0",
+        "@interopio/code-mode": "^0.0.2",
         "@interopio/desktop": "^6.0.0",
-        "@interopio/working-context": "^1.1.1",
+        "@interopio/working-context": "^1.1.2",
         "@modelcontextprotocol/sdk": "^1.19.1"
       }
     },
@@ -784,9 +824,9 @@
       }
     },
     "node_modules/@interopio/working-context": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@interopio/working-context/-/working-context-1.1.1.tgz",
-      "integrity": "sha512-Vbb4SXxkxHc5VBsh06EvUDCt53frDi5Au13xQjSHjN8eUYvdPOJovsGOrvQgy7xdyQr6p7kdAxP2M92eSb2Pbg==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@interopio/working-context/-/working-context-1.1.2.tgz",
+      "integrity": "sha512-BtOvk5J0lwBMo7hVNVGX0NJqowr+zZM3WBq5C4V1ro68HUf7ShF8ZpF23ywwT/dX4BNOZHPWNFwJgivxQLsdOA==",
       "license": "MIT",
       "dependencies": {
         "@interopio/browser": "^4.0.0",
@@ -803,7 +843,6 @@
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
       "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -825,7 +864,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -835,14 +873,12 @@
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.31",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
       "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -1661,6 +1697,104 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@tanstack/ai": {
+      "version": "0.41.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/ai/-/ai-0.41.0.tgz",
+      "integrity": "sha512-cq6ye9/rTfcwBDv9z2t1iCUIXL+lGdtM2HZm/KiLu3u6i+MH57W7i4tbB5uTUtcCnDmOlQ7EHD97esyNJpGtNw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@ag-ui/core": "^0.0.52",
+        "@standard-schema/spec": "^1.1.0",
+        "@tanstack/ai-event-client": "0.6.8",
+        "@tanstack/ai-utils": "0.3.1",
+        "partial-json": "^0.1.7"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.9.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@tanstack/ai-code-mode": {
+      "version": "0.3.7",
+      "resolved": "https://registry.npmjs.org/@tanstack/ai-code-mode/-/ai-code-mode-0.3.7.tgz",
+      "integrity": "sha512-NbIdQfNfWwV095jon2YsV3GPtVXCD+fuNx/TSJOaCHvV4AnowPBtgoax0qhfco4E4xBGKDrfdWyIxFCD6n+Lzg==",
+      "license": "MIT",
+      "dependencies": {
+        "sucrase": "^3.35.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/ai": "0.41.0",
+        "zod": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "node_modules/@tanstack/ai-event-client": {
+      "version": "0.6.8",
+      "resolved": "https://registry.npmjs.org/@tanstack/ai-event-client/-/ai-event-client-0.6.8.tgz",
+      "integrity": "sha512-h7/HLz9u2LF9ba6uKFMnSZkFlkzQONJ5u3Hi+4qGxpsHyvcGRtW6v186jaFLoklndhEwyC49ytkC4eafi7Qq8w==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@tanstack/devtools-event-client": "^0.4.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/ai-utils": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/ai-utils/-/ai-utils-0.3.1.tgz",
+      "integrity": "sha512-fgbjd5DohL3k5rTWr/KInauLVYMiHVm0cnmTsNrzL3cr4wWhEld5vmFSrjiwUWACAuONjZa+uBXuS+ZSO8fwDQ==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/devtools-event-client": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/devtools-event-client/-/devtools-event-client-0.4.4.tgz",
+      "integrity": "sha512-6T5Yop/793YI+H+5J8Hsyj4kCih9sl4t3ElLgKioW5hk3ocn+ZdSJ94tT7vL7uabxSugWYBZlOTMPzEw2puvQw==",
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "intent": "bin/intent.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.2",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
@@ -2150,6 +2284,12 @@
         "ajv": "^6.9.1"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "license": "MIT"
+    },
     "node_modules/bail": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
@@ -2208,9 +2348,9 @@
       }
     },
     "node_modules/body-parser/node_modules/content-type": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.0.0.tgz",
-      "integrity": "sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.1.0.tgz",
+      "integrity": "sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
@@ -2401,6 +2541,15 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/content-disposition": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.1.0.tgz",
@@ -2887,9 +3036,9 @@
       }
     },
     "node_modules/eventsource-parser": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.1.0.tgz",
-      "integrity": "sha512-kJezFj9YFAMLeORyi7aCLxLbD5/qWMQnoMVlVPyHIll7lgRJCc3JVln9Vgl9nwQi0YkMnhdGTMNn7CkRRAptMg==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.1.1.tgz",
+      "integrity": "sha512-EKN1vKAMcZ8MlYMpaNuxN6R9yakzH6uajHcHVTqWJzvu5pWw9DyhbP35HH8MVBQ+dZjAfDxk+A8NiR9KWaXiyQ==",
       "license": "MIT",
       "engines": {
         "node": ">=18.0.0"
@@ -2939,9 +3088,9 @@
       }
     },
     "node_modules/express-rate-limit": {
-      "version": "8.6.1",
-      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.6.1.tgz",
-      "integrity": "sha512-0D493aP61w0TJ2A0wy27riRsO7FMQ7FK+KUHOKCSfPvYo0R55aiC6emCVgFUeShH0fq0ICPVzNcgoS+BsbXQCA==",
+      "version": "8.6.2",
+      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.6.2.tgz",
+      "integrity": "sha512-YH4ru+eOJxQABscKFfRCy9R7x9QFGdezclVMwwgFFndzS2Xnm0uo6B0ABZsLhcpeptGv2qvuJVWlQr9gQZoC3A==",
       "license": "MIT",
       "dependencies": {
         "debug": "^4.4.3",
@@ -2983,9 +3132,9 @@
       "license": "MIT"
     },
     "node_modules/fast-uri": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.4.tgz",
-      "integrity": "sha512-8JnbkQ4juDyvYs4mgFGQqg4yCYtFDtUtmp2QIQq11ZZe5CFQ5wcqm1rqDgAh/QdMySuBnPzMUiJUNZG5N/AiQw==",
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.6.tgz",
+      "integrity": "sha512-7Ical1vFEMr0onbVzEDIreM22I4khW+fzyQPwvAFWBp1iwdshSZRsL4jjRvPG9JP1uiqMHRto+YU6R2/CzDz5Q==",
       "funding": [
         {
           "type": "github",
@@ -3002,7 +3151,6 @@
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
       "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12.0.0"
@@ -3316,9 +3464,9 @@
       }
     },
     "node_modules/hono": {
-      "version": "4.12.32",
-      "resolved": "https://registry.npmjs.org/hono/-/hono-4.12.32.tgz",
-      "integrity": "sha512-XcuyW9qE2kJn07PkecMOBd5Vq/hMy7mmGw+idz1yblbg9N17ijJODrvPkn7/dwL3Kulj8LcRJ69DLOWf91dRUg==",
+      "version": "4.13.4",
+      "resolved": "https://registry.npmjs.org/hono/-/hono-4.13.4.tgz",
+      "integrity": "sha512-AGEwKIyRMHRv1t8Wjwa3LHxQ61X5CqrdFT+4BRNTpqS5aJNnpl5WLjADb7vFlJzI/8uK7T5QLVApCMQKNa3LgQ==",
       "license": "MIT",
       "engines": {
         "node": ">=16.9.0"
@@ -3403,9 +3551,9 @@
       "license": "MIT"
     },
     "node_modules/ip-address": {
-      "version": "10.3.1",
-      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.3.1.tgz",
-      "integrity": "sha512-1e9d3kb97NHJTIJDZW9rKqW2h6+dFa50Dy0fpPSMQp2ADje5gvKsXmdiK6dwY5t76TaTt5+P5N1Y/LoToIxP6g==",
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.5.0.tgz",
+      "integrity": "sha512-R5SnVLJmgYYvf2F2ZgwSBnelz5G4q5AxIC277GDfUaNbrZKNANcBC7RHqYYePlszf4kBolVkJauG0ZjHHFh55g==",
       "license": "MIT",
       "engines": {
         "node": ">= 12"
@@ -3512,9 +3660,9 @@
       "license": "ISC"
     },
     "node_modules/jose": {
-      "version": "6.2.5",
-      "resolved": "https://registry.npmjs.org/jose/-/jose-6.2.5.tgz",
-      "integrity": "sha512-2E5L2yRp03FnwreJLJX8/r7mHiZICCf8kG7fAsTWkSQTDAcc46NIZoQLKy+EJ8sPoJlxyS4OQR5H70LjIZZlIQ==",
+      "version": "6.2.10",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-6.2.10.tgz",
+      "integrity": "sha512-iiW7J9qRFlGxvCOIBDBDxFePQSn7ZMAnrYGhrrOo6siO/MIqwfyilLR27pkfDgUk+raLuzADS8A3S/KLBisc0g==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/panva"
@@ -3873,6 +4021,12 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "license": "MIT"
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -4867,6 +5021,17 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "license": "MIT"
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.12",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
@@ -4894,12 +5059,32 @@
       "license": "MIT"
     },
     "node_modules/negotiator": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
-      "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.1.0.tgz",
+      "integrity": "sha512-NMPBRMJgiQHjbd8phG3Vebdx4kZ1H121rbl5IkMqeOsahptB9BKo/d7oJ3zTXqTgagn2bWlNSXkh0QUGM31RYg==",
       "license": "MIT",
+      "dependencies": {
+        "content-type": "^2.1.0"
+      },
       "engines": {
-        "node": ">= 0.6"
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/negotiator/node_modules/content-type": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.1.0.tgz",
+      "integrity": "sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/node-releases": {
@@ -5038,6 +5223,13 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/partial-json": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/partial-json/-/partial-json-0.1.7.tgz",
+      "integrity": "sha512-Njv/59hHaokb/hRUjce3Hdv12wd60MtM9Z5Olmn+nehe0QDAsRtRbJPvJ0Z91TusF0SuZRIvnM+S4l6EIP8leA==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -5078,7 +5270,6 @@
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -5087,6 +5278,15 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/pkce-challenge": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/pkce-challenge/-/pkce-challenge-5.0.1.tgz",
@@ -5644,11 +5844,53 @@
         "inline-style-parser": "0.2.7"
       }
     },
+    "node_modules/sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.17",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
       "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
@@ -5703,6 +5945,12 @@
         "typescript": ">=4.8.4"
       }
     },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "license": "Apache-2.0"
+    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -5743,9 +5991,9 @@
       }
     },
     "node_modules/type-is/node_modules/content-type": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.0.0.tgz",
-      "integrity": "sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.1.0.tgz",
+      "integrity": "sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
diff --git a/templates/io-assist-react-packaged/package.json b/templates/io-assist-react-packaged/package.json
index d76a226..dd8e43a 100644
--- a/templates/io-assist-react-packaged/package.json
+++ b/templates/io-assist-react-packaged/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@interopio/browser": "^4.5.0",
-    "@interopio/io-assist-react": "^1.0.1",
+    "@interopio/io-assist-react": "^1.1.2",
     "@interopio/workspaces-api": "^4.5.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6"
diff --git a/templates/io-assist-react-packaged/src/App.tsx b/templates/io-assist-react-packaged/src/App.tsx
index 0b08535..e5331d7 100644
--- a/templates/io-assist-react-packaged/src/App.tsx
+++ b/templates/io-assist-react-packaged/src/App.tsx
@@ -1,23 +1,23 @@
-import { useMemo } from 'react'
-import IOBrowser from '@interopio/browser'
+import { useMemo } from "react";
+import IOBrowser from "@interopio/browser";
 import {
   IoAssist,
   type IoAssistDynamicConfig,
   type IoAssistStaticConfig,
-} from '@interopio/io-assist-react'
-import IOWorkspaces from '@interopio/workspaces-api'
-import './App.css'
+} from "@interopio/io-assist-react";
+import IOWorkspaces from "@interopio/workspaces-api";
+import "./App.css";
 
 // this must be defined;
-const AGENT_SERVER_URL = '';
+const AGENT_SERVER_URL = "";
 
 const createIOConnect: typeof IOBrowser = async (config) => {
   const io = await IOBrowser(config);
 
-  (window as any).io = io;
+  (window as unknown as { io: typeof io }).io = io;
 
-  return io
-}
+  return io;
+};
 
 const staticConfig: IoAssistStaticConfig = {
   connectConfig: {
@@ -33,30 +33,30 @@ const staticConfig: IoAssistStaticConfig = {
       },
     },
   },
-  defaultAgentName: 'io-agent',
+  defaultAgentName: "io-agent",
   aiWebConfig: {
     agentServer: {
       baseUrl: AGENT_SERVER_URL,
     },
   },
-}
+};
 
 function App() {
   const dynamicConfig = useMemo<IoAssistDynamicConfig>(
     () => ({
       user: {
-        id: 'acme-advisor',
-        name: 'ACME Advisor',
+        id: "acme-advisor",
+        name: "ACME Advisor",
       },
     }),
     [],
-  )
+  );
 
   return (
     <main className="assist-shell">
       <IoAssist staticConfig={staticConfig} dynamicConfig={dynamicConfig} />
     </main>
-  )
+  );
 }
 
-export default App
+export default App;