added code panel, tool approval, tool calls logging

agent/prompts/system_prompt.yaml

@@ -77,7 +77,7 @@ system_prompt: |
 
   - Be concise and direct.
   - Don't flatter the user.
-  - Don't use emojis nor exclamation points.
+  - Never use emojis nor exclamation points.
   - If you are limited in a task, offer alternatives.
   - Don't thank the user when he provides results.
   - Explain what you're doing for non-trivial operations.

configs/main_agent_config.json

@@ -3,7 +3,7 @@
   "save_sessions": true,
   "session_dataset_repo": "akseljoonas/hf-agent-sessions",
   "yolo_mode": false,
-  "confirm_cpu_jobs": false,
+  "confirm_cpu_jobs": true,
   "auto_file_upload": false,
   "mcpServers": {
     "hf-mcp-server": {

frontend/package-lock.json

@@ -15,12 +15,15 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-markdown": "^9.0.1",
+        "react-syntax-highlighter": "^16.1.0",
+        "remark-gfm": "^4.0.1",
         "zustand": "^5.0.0"
       },
       "devDependencies": {
         "@eslint/js": "^9.13.0",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",
+        "@types/react-syntax-highlighter": "^15.5.13",
         "@vitejs/plugin-react": "^4.3.3",
         "eslint": "^9.13.0",
         "eslint-plugin-react-hooks": "^5.0.0",
@@ -1818,6 +1821,12 @@
       "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
       "license": "MIT"
     },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.5",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.5.tgz",
+      "integrity": "sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.15",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
@@ -1845,6 +1854,16 @@
         "@types/react": "^18.0.0"
       }
     },
+    "node_modules/@types/react-syntax-highlighter": {
+      "version": "15.5.13",
+      "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.13.tgz",
+      "integrity": "sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.12",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
@@ -2856,6 +2875,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fault": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
+      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+      "license": "MIT",
+      "dependencies": {
+        "format": "^0.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -2931,6 +2963,14 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -3013,6 +3053,19 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-parse-selector": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
+      "integrity": "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-to-jsx-runtime": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
@@ -3053,6 +3106,38 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hastscript": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-9.0.1.tgz",
+      "integrity": "sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-parse-selector": "^4.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/highlightjs-vue": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/highlightjs-vue/-/highlightjs-vue-1.0.0.tgz",
+      "integrity": "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==",
+      "license": "CC0-1.0"
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -3373,6 +3458,20 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lowlight": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
+      "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
+      "license": "MIT",
+      "dependencies": {
+        "fault": "^1.0.0",
+        "highlight.js": "~10.7.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -3383,6 +3482,44 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/markdown-table": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
+      "integrity": "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/mdast-util-find-and-replace": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.2.tgz",
+      "integrity": "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "escape-string-regexp": "^5.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-find-and-replace/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/mdast-util-from-markdown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.2.tgz",
@@ -3407,6 +3544,107 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdast-util-gfm": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.1.0.tgz",
+      "integrity": "sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==",
+      "license": "MIT",
+      "dependencies": {
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-gfm-autolink-literal": "^2.0.0",
+        "mdast-util-gfm-footnote": "^2.0.0",
+        "mdast-util-gfm-strikethrough": "^2.0.0",
+        "mdast-util-gfm-table": "^2.0.0",
+        "mdast-util-gfm-task-list-item": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-autolink-literal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.1.tgz",
+      "integrity": "sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-find-and-replace": "^3.0.0",
+        "micromark-util-character": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-strikethrough": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-2.0.0.tgz",
+      "integrity": "sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-table": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-2.0.0.tgz",
+      "integrity": "sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "markdown-table": "^3.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-task-list-item": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-2.0.0.tgz",
+      "integrity": "sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdast-util-mdx-expression": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
@@ -3605,6 +3843,127 @@
         "micromark-util-types": "^2.0.0"
       }
     },
+    "node_modules/micromark-extension-gfm": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz",
+      "integrity": "sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-extension-gfm-autolink-literal": "^2.0.0",
+        "micromark-extension-gfm-footnote": "^2.0.0",
+        "micromark-extension-gfm-strikethrough": "^2.0.0",
+        "micromark-extension-gfm-table": "^2.0.0",
+        "micromark-extension-gfm-tagfilter": "^2.0.0",
+        "micromark-extension-gfm-task-list-item": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-autolink-literal": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz",
+      "integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-strikethrough": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.1.0.tgz",
+      "integrity": "sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-table": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.1.tgz",
+      "integrity": "sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-tagfilter": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-2.0.0.tgz",
+      "integrity": "sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-task-list-item": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.1.0.tgz",
+      "integrity": "sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/micromark-factory-destination": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
@@ -4238,6 +4597,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -4345,6 +4713,26 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-syntax-highlighter": {
+      "version": "16.1.0",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-16.1.0.tgz",
+      "integrity": "sha512-E40/hBiP5rCNwkeBN1vRP+xow1X0pndinO+z3h7HLsHyjztbyjfzNWNKuAsJj+7DLam9iT4AaaOZnueCU+Nplg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "highlight.js": "^10.4.1",
+        "highlightjs-vue": "^1.0.0",
+        "lowlight": "^1.17.0",
+        "prismjs": "^1.30.0",
+        "refractor": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 16.20.2"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -4361,6 +4749,40 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/refractor": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/refractor/-/refractor-5.0.0.tgz",
+      "integrity": "sha512-QXOrHQF5jOpjjLfiNk5GFnWhRXvxjUVnlFxkeDmewR5sXkr3iM46Zo+CnRR8B+MDVqkULW4EcLVcRBNOPXHosw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/prismjs": "^1.0.0",
+        "hastscript": "^9.0.0",
+        "parse-entities": "^4.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/remark-gfm": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz",
+      "integrity": "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-gfm": "^3.0.0",
+        "micromark-extension-gfm": "^3.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-stringify": "^11.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-parse": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
@@ -4394,6 +4816,21 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-stringify": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
+      "integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",

frontend/package.json

@@ -17,12 +17,15 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-markdown": "^9.0.1",
+    "react-syntax-highlighter": "^16.1.0",
+    "remark-gfm": "^4.0.1",
     "zustand": "^5.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^4.3.3",
     "eslint": "^9.13.0",
     "eslint-plugin-react-hooks": "^5.0.0",

frontend/src/components/Chat/ApprovalFlow.tsx

@@ -0,0 +1,157 @@
+import { useState, useCallback, useEffect } from 'react';
+import { Box, Typography, Button, TextField, Divider } from '@mui/material';
+import { useAgentStore } from '@/store/agentStore';
+import { useLayoutStore } from '@/store/layoutStore';
+
+interface ApprovalFlowProps {
+  sessionId: string;
+}
+
+export default function ApprovalFlow({ sessionId }: ApprovalFlowProps) {
+  const { pendingApprovals, setPendingApprovals, setPanelContent } = useAgentStore();
+  const { setRightPanelOpen, setLeftSidebarOpen } = useLayoutStore();
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [feedback, setFeedback] = useState('');
+  const [decisions, setDecisions] = useState<Array<{ tool_call_id: string; approved: boolean; feedback: string | null }>>([]);
+
+  // Reset local state when a new batch of approvals arrives
+  useEffect(() => {
+    setCurrentIndex(0);
+    setFeedback('');
+    setDecisions([]);
+  }, [pendingApprovals]);
+
+  // Sync right panel with current tool
+  useEffect(() => {
+    if (!pendingApprovals || currentIndex >= pendingApprovals.tools.length) return;
+    
+    const tool = pendingApprovals.tools[currentIndex];
+    const args = tool.arguments as any;
+
+    if (tool.tool === 'hf_jobs' && (args.operation === 'run' || args.operation === 'scheduled run') && args.script) {
+      setPanelContent({
+        title: 'Compute Job Script',
+        content: args.script,
+        language: 'python',
+        parameters: args
+      });
+      setRightPanelOpen(true);
+      setLeftSidebarOpen(false);
+    } else if (tool.tool === 'hf_repo_files' && args.operation === 'upload' && args.content) {
+      setPanelContent({
+        title: `File Upload: ${args.path || 'unnamed'}`,
+        content: args.content,
+        parameters: args
+      });
+      setRightPanelOpen(true);
+      setLeftSidebarOpen(false);
+    } else {
+      // For other tools, just show parameters in the panel
+      setPanelContent({
+        title: `Tool: ${tool.tool}`,
+        content: '',
+        parameters: args
+      });
+    }
+  }, [currentIndex, pendingApprovals, setPanelContent, setRightPanelOpen, setLeftSidebarOpen]);
+
+  const handleResolve = useCallback(async (approved: boolean) => {
+    if (!pendingApprovals) return;
+
+    const currentTool = pendingApprovals.tools[currentIndex];
+    const newDecisions = [
+      ...decisions,
+      {
+        tool_call_id: currentTool.tool_call_id,
+        approved,
+        feedback: approved ? null : feedback || 'Rejected by user',
+      },
+    ];
+
+    if (currentIndex < pendingApprovals.tools.length - 1) {
+      setDecisions(newDecisions);
+      setCurrentIndex(currentIndex + 1);
+      setFeedback('');
+    } else {
+      // All tools in batch resolved, submit to backend
+      try {
+        await fetch('/api/approve', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            session_id: sessionId,
+            approvals: newDecisions,
+          }),
+        });
+        setPendingApprovals(null);
+      } catch (e) {
+        console.error('Approval submission failed:', e);
+      }
+    }
+  }, [sessionId, pendingApprovals, currentIndex, feedback, decisions, setPendingApprovals]);
+
+  if (!pendingApprovals || currentIndex >= pendingApprovals.tools.length) return null;
+
+  const currentTool = pendingApprovals.tools[currentIndex];
+
+  return (
+    <Box sx={{ 
+      mt: 0, 
+      mb: 4, 
+      px: 2, 
+      width: '100%',
+      alignSelf: 'center'
+    }}>
+      <Typography variant="subtitle2" sx={{ fontFamily: 'monospace', mb: 2, fontWeight: 600 }}>
+        ACTION REQUIRED ({currentIndex + 1}/{pendingApprovals.count}) : The agent wants to execute <Box component="span" sx={{ color: 'primary.main' }}>{currentTool.tool}</Box>
+      </Typography>
+
+      <Box component="pre" sx={{ 
+        bgcolor: 'background.default', 
+        p: 1.5, 
+        borderRadius: 0.5, 
+        fontSize: '0.75rem', 
+        fontFamily: 'monospace',
+        overflow: 'auto',
+        maxHeight: 150,
+        mb: 2,
+        border: 1,
+        borderColor: 'divider'
+      }}>
+        {JSON.stringify(currentTool.arguments, null, 2)}
+      </Box>
+
+      <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+        <TextField
+          fullWidth
+          size="small"
+          placeholder="Feedback for rejection (optional)"
+          value={feedback}
+          onChange={(e) => setFeedback(e.target.value)}
+          variant="outlined"
+          sx={{ 
+            flex: 1,
+            '& .MuiOutlinedInput-root': { fontFamily: 'monospace', fontSize: '0.8rem', height: '36px' }
+          }}
+        />
+        
+        <Button 
+          variant="outlined" 
+          color="error" 
+          onClick={() => handleResolve(false)}
+          sx={{ fontFamily: 'monospace', height: '36px', px: 3 }}
+        >
+          REJECT
+        </Button>
+        <Button 
+          variant="contained" 
+          color="success" 
+          onClick={() => handleResolve(true)}
+          sx={{ color: 'white', fontFamily: 'monospace', height: '36px', px: 3 }}
+        >
+          APPROVE
+        </Button>
+      </Box>
+    </Box>
+  );
+}

frontend/src/components/Chat/ChatInput.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, KeyboardEvent } from 'react';
-import { Box, TextField, IconButton, CircularProgress } from '@mui/material';
-import SendIcon from '@mui/icons-material/Send';
+import { Box, TextField, IconButton, CircularProgress, Typography } from '@mui/material';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 
 interface ChatInputProps {
   onSend: (text: string) => void;
@@ -30,47 +30,82 @@ export default function ChatInput({ onSend, disabled = false }: ChatInputProps)
   return (
     <Box
       sx={{
-        p: 2,
-        borderTop: 1,
-        borderColor: 'divider',
-        bgcolor: 'background.paper',
+        pb: 4,
+        pt: 2,
+        position: 'relative',
+        zIndex: 10,
       }}
     >
-      <Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-end' }}>
-        <TextField
-          fullWidth
-          multiline
-          maxRows={6}
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          onKeyDown={handleKeyDown}
-          placeholder="Type a message..."
-          disabled={disabled}
-          variant="outlined"
-          size="small"
-          sx={{
-            '& .MuiOutlinedInput-root': {
-              bgcolor: 'background.default',
-            },
-          }}
-        />
-        <IconButton
-          onClick={handleSend}
-          disabled={disabled || !input.trim()}
-          color="primary"
+      <Box sx={{ maxWidth: 'md', mx: 'auto', width: '100%', px: 2 }}>
+        {/* Input Label and Divider */}
+        <Box sx={{ display: 'flex', alignItems: 'center', mb: 1, gap: 2 }}>
+          <Typography variant="caption" sx={{ fontFamily: 'monospace', fontWeight: 600, color: 'text.secondary', letterSpacing: '0.05em' }}>
+            INPUT
+          </Typography>
+          <Box sx={{ flex: 1, height: '1px', bgcolor: 'divider' }} />
+        </Box>
+
+        <Box
           sx={{
-            bgcolor: 'primary.main',
-            color: 'primary.contrastText',
-            '&:hover': {
-              bgcolor: 'primary.dark',
-            },
-            '&.Mui-disabled': {
-              bgcolor: 'action.disabledBackground',
-            },
+            display: 'flex',
+            gap: 1,
+            alignItems: 'center',
+            bgcolor: 'background.paper',
+            borderRadius: 1,
+            boxShadow: 4,
+            p: 1,
+            border: 1,
+            borderColor: 'divider',
           }}
         >
-          {disabled ? <CircularProgress size={24} color="inherit" /> : <SendIcon />}
-        </IconButton>
+          <TextField
+            fullWidth
+            multiline
+            maxRows={6}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Ask anything"
+            disabled={disabled}
+            variant="outlined"
+            size="small"
+            sx={{
+              '& .MuiOutlinedInput-root': {
+                padding: '9px 12px',
+                lineHeight: '1.4',
+                fontFamily: 'monospace',
+              },
+              '& .MuiInputBase-input': {
+                fontFamily: 'monospace',
+              },
+              '& .MuiOutlinedInput-notchedOutline': {
+                border: 'none',
+              },
+            }}
+          />
+          <IconButton
+            onClick={handleSend}
+            disabled={disabled || !input.trim()}
+            sx={{
+              border: 1,
+              borderColor: 'divider',
+              borderRadius: 1,
+              color: 'text.secondary',
+              transition: 'all 0.2s',
+              '&:hover': {
+                borderColor: 'primary.main',
+                color: 'primary.main',
+                bgcolor: 'transparent',
+              },
+              '&.Mui-disabled': {
+                borderColor: 'divider',
+                opacity: 0.5,
+              },
+            }}
+          >
+            {disabled ? <CircularProgress size={24} color="inherit" /> : <ArrowUpwardIcon fontSize="small" />}
+          </IconButton>
+        </Box>
       </Box>
     </Box>
   );

frontend/src/components/Chat/MessageBubble.tsx

@@ -1,8 +1,6 @@
 import { Box, Paper, Typography, Chip } from '@mui/material';
 import ReactMarkdown from 'react-markdown';
-import PersonIcon from '@mui/icons-material/Person';
-import SmartToyIcon from '@mui/icons-material/SmartToy';
-import BuildIcon from '@mui/icons-material/Build';
+import remarkGfm from 'remark-gfm';
 import type { Message } from '@/types/agent';
 
 interface MessageBubbleProps {
@@ -13,16 +11,10 @@ export default function MessageBubble({ message }: MessageBubbleProps) {
   const isUser = message.role === 'user';
   const isTool = message.role === 'tool';
 
-  const getIcon = () => {
-    if (isUser) return <PersonIcon fontSize="small" />;
-    if (isTool) return <BuildIcon fontSize="small" />;
-    return <SmartToyIcon fontSize="small" />;
-  };
-
   const getBgColor = () => {
-    if (isUser) return 'primary.dark';
+    if (isUser) return 'background.paper';
     if (isTool) return 'background.default';
-    return 'background.paper';
+    return 'transparent';
   };
 
   return (
@@ -36,31 +28,59 @@ export default function MessageBubble({ message }: MessageBubbleProps) {
       <Paper
         elevation={0}
         sx={{
-          p: 2,
+          p: isTool ? 2 : isUser ? 1.5 : 1,
           maxWidth: isTool ? '100%' : '80%',
           width: isTool ? '100%' : 'auto',
           bgcolor: getBgColor(),
-          border: 1,
+          border: (!isUser && !isTool) ? 0 : 1,
           borderColor: 'divider',
+          borderRadius: isUser ? 2 : undefined,
         }}
       >
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
-          {getIcon()}
-          <Typography variant="caption" color="text.secondary">
-            {isUser ? 'You' : isTool ? 'Tool' : 'Assistant'}
-          </Typography>
-          {isTool && message.toolName && (
-            <Chip
-              label={message.toolName}
-              size="small"
-              variant="outlined"
-              sx={{ ml: 1, height: 20, fontSize: '0.7rem' }}
-            />
-          )}
-          <Typography variant="caption" color="text.secondary" sx={{ ml: 'auto' }}>
-            {new Date(message.timestamp).toLocaleTimeString()}
-          </Typography>
-        </Box>
+        {isTool && (
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
+            <Typography variant="caption" color="text.secondary">
+              Tool
+            </Typography>
+            {message.toolName && (
+              <Chip
+                label={message.toolName}
+                size="small"
+                variant="outlined"
+                sx={{ ml: 1, height: 20, fontSize: '0.7rem' }}
+              />
+            )}
+          </Box>
+        )}
+
+        {/* Persisted Trace Logs */}
+        {message.trace && message.trace.length > 0 && (
+          <Box
+            sx={{
+              bgcolor: 'background.default',
+              borderRadius: 1,
+              p: 1.5,
+              border: 1,
+              borderColor: 'divider',
+              width: '100%',
+              mb: 2,
+            }}
+          >
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+              {message.trace.map((log) => (
+                <Typography
+                  key={log.id}
+                  variant="caption"
+                  component="div"
+                  sx={{ color: 'common.white', fontFamily: 'monospace', fontSize: '0.75rem' }}
+                >
+                  &gt; {log.text}
+                </Typography>
+              ))}
+            </Box>
+          </Box>
+        )}
+
         <Box
           sx={{
             '& p': { m: 0 },
@@ -84,15 +104,34 @@ export default function MessageBubble({ message }: MessageBubbleProps) {
               p: 0,
             },
             '& a': {
-              color: 'primary.main',
+              color: 'inherit',
+              textDecoration: 'underline',
             },
             '& ul, & ol': {
               pl: 2,
               my: 1,
             },
+            '& table': {
+              borderCollapse: 'collapse',
+              width: '100%',
+              my: 2,
+              fontSize: '0.875rem',
+            },
+            '& th': {
+              borderBottom: '1px solid',
+              borderColor: 'divider',
+              textAlign: 'left',
+              p: 1,
+              bgcolor: 'action.hover',
+            },
+            '& td': {
+              borderBottom: '1px solid',
+              borderColor: 'divider',
+              p: 1,
+            },
           }}
         >
-          <ReactMarkdown>{message.content}</ReactMarkdown>
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>{message.content}</ReactMarkdown>
         </Box>
       </Paper>
     </Box>

frontend/src/components/Chat/MessageList.tsx

@@ -1,6 +1,9 @@
 import { useEffect, useRef } from 'react';
-import { Box, Typography, CircularProgress } from '@mui/material';
+import { Box, Typography } from '@mui/material';
+import { useAgentStore } from '@/store/agentStore';
+import { useSessionStore } from '@/store/sessionStore';
 import MessageBubble from './MessageBubble';
+import ApprovalFlow from './ApprovalFlow';
 import type { Message } from '@/types/agent';
 
 interface MessageListProps {
@@ -8,13 +11,51 @@ interface MessageListProps {
   isProcessing: boolean;
 }
 
+const TechnicalIndicator = () => (
+  <Box
+    component="span"
+    sx={{
+      color: 'primary.main',
+      fontFamily: 'monospace',
+      fontWeight: 'bold',
+      fontSize: '1.2rem',
+      lineHeight: 0,
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      width: '1em',
+      letterSpacing: '-3px',
+      transform: 'scale(0.6) translateY(-2px)',
+      '&::after': {
+        content: '""',
+        animation: 'dots 2s steps(4, end) infinite',
+      },
+      '@keyframes dots': {
+        '0%': { content: '""' },
+        '25%': { content: '"."' },
+        '50%': { content: '".."' },
+        '75%, 100%': { content: '"..."' },
+      },
+    }}
+  />
+);
+
 export default function MessageList({ messages, isProcessing }: MessageListProps) {
   const bottomRef = useRef<HTMLDivElement>(null);
+  const traceBoxRef = useRef<HTMLDivElement>(null);
+  const { traceLogs } = useAgentStore();
+  const { activeSessionId } = useSessionStore();
 
   // Auto-scroll to bottom when new messages arrive
   useEffect(() => {
     bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messages]);
+  }, [messages, isProcessing, traceLogs]);
+
+  // Auto-scroll trace box
+  useEffect(() => {
+    if (traceBoxRef.current) {
+      traceBoxRef.current.scrollTop = traceBoxRef.current.scrollHeight;
+    }
+  }, [traceLogs]);
 
   return (
     <Box
@@ -24,36 +65,77 @@ export default function MessageList({ messages, isProcessing }: MessageListProps
         p: 2,
         display: 'flex',
         flexDirection: 'column',
-        gap: 2,
       }}
     >
-      {messages.length === 0 ? (
-        <Box
-          sx={{
-            flex: 1,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
-          <Typography color="text.secondary">
-            Start a conversation by typing a message below
-          </Typography>
-        </Box>
-      ) : (
-        messages.map((message) => (
-          <MessageBubble key={message.id} message={message} />
-        ))
-      )}
-      {isProcessing && (
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 2 }}>
-          <CircularProgress size={16} />
-          <Typography variant="body2" color="text.secondary">
-            Processing...
-          </Typography>
-        </Box>
-      )}
-      <div ref={bottomRef} />
+      <Box sx={{ maxWidth: 'md', mx: 'auto', width: '100%', display: 'flex', flexDirection: 'column', gap: 2 }}>
+        {messages.length === 0 && traceLogs.length === 0 && !isProcessing ? (
+          <Box
+            sx={{
+              flex: 1,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              py: 8,
+            }}
+          >
+            <Typography color="text.secondary" sx={{ fontFamily: 'monospace' }}>
+              Awaiting input…
+            </Typography>
+          </Box>
+        ) : (
+          messages.map((message) => (
+            <MessageBubble key={message.id} message={message} />
+          ))
+        )}
+        
+        {isProcessing && (
+          <Box sx={{ width: '100%', mb: 2 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1, px: 0.5 }}>
+              <Typography variant="caption" color="text.secondary" sx={{ fontFamily: 'monospace', fontWeight: 600 }}>
+                Thinking
+              </Typography>
+              <TechnicalIndicator />
+            </Box>
+            
+            {traceLogs.length > 0 && (
+              <Box
+                sx={{
+                  bgcolor: 'background.default',
+                  borderRadius: 1,
+                  p: 2,
+                  border: 1,
+                  borderColor: 'divider',
+                  width: '100%',
+                  fontFamily: 'monospace',
+                  maxHeight: 120,
+                  overflowY: 'auto',
+                }}
+                ref={traceBoxRef}
+              >
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+                  {traceLogs.map((log) => (
+                    <Box key={log.id}>
+                      <Typography
+                        variant="caption"
+                        component="div"
+                        sx={{ color: 'common.white', fontFamily: 'monospace' }}
+                      >
+                        &gt; {log.text}
+                      </Typography>
+                    </Box>
+                  ))}
+                </Box>
+              </Box>
+            )}
+          </Box>
+        )}
+
+        {activeSessionId && (
+          <ApprovalFlow sessionId={activeSessionId} />
+        )}
+        
+        <div ref={bottomRef} />
+      </Box>
     </Box>
   );
-}
+}

frontend/src/components/CodePanel/CodePanel.tsx

@@ -0,0 +1,74 @@
+import { Box, Typography, IconButton } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { useAgentStore } from '@/store/agentStore';
+import { useLayoutStore } from '@/store/layoutStore';
+
+export default function CodePanel() {
+  const { panelContent } = useAgentStore();
+  const { setRightPanelOpen } = useLayoutStore();
+
+  return (
+    <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column', bgcolor: 'background.paper' }}>
+      {/* Header - Always Visible */}
+      <Box sx={{ p: 2, borderBottom: 1, borderColor: 'divider', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <Typography variant="caption" sx={{ fontFamily: 'monospace', fontWeight: 600, color: 'text.secondary', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+          {panelContent?.title || 'Code Panel'}
+        </Typography>
+        <IconButton size="small" onClick={() => setRightPanelOpen(false)}>
+          <CloseIcon fontSize="small" />
+        </IconButton>
+      </Box>
+
+      {!panelContent ? (
+        <Box sx={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', p: 4 }}>
+          <Typography variant="body2" color="text.secondary" sx={{ fontFamily: 'monospace', opacity: 0.5 }}>
+            NO DATA LOADED
+          </Typography>
+        </Box>
+      ) : (
+        <Box sx={{ flex: 1, overflow: 'auto', bgcolor: 'background.default' }}>
+          {panelContent.content ? (
+            panelContent.language === 'python' ? (
+              <SyntaxHighlighter
+                language="python"
+                style={vscDarkPlus}
+                customStyle={{
+                  margin: 0,
+                  padding: '16px',
+                  background: 'transparent',
+                  fontSize: '0.8rem',
+                  fontFamily: '"JetBrains Mono", monospace',
+                }}
+                wrapLines={true}
+                wrapLongLines={true}
+              >
+                {panelContent.content}
+              </SyntaxHighlighter>
+            ) : (
+              <Box sx={{ p: 2 }}>
+                <Box component="pre" sx={{ 
+                  m: 0, 
+                  fontFamily: 'monospace', 
+                  fontSize: '0.8rem', 
+                  color: 'text.primary',
+                  whiteSpace: 'pre-wrap',
+                  wordBreak: 'break-all'
+                }}>
+                  <code>{panelContent.content}</code>
+                </Box>
+              </Box>
+            )
+          ) : (
+            <Box sx={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', p: 4, opacity: 0.5 }}>
+              <Typography variant="caption" sx={{ fontFamily: 'monospace' }}>
+                NO CONTENT TO DISPLAY
+              </Typography>
+            </Box>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+}

frontend/src/components/Layout/AppLayout.tsx

@@ -1,33 +1,72 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
 import {
   Box,
-  AppBar,
-  Toolbar,
+  Drawer,
   Typography,
   IconButton,
-  Drawer,
-  Chip,
 } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
-import UndoIcon from '@mui/icons-material/Undo';
-import CompressIcon from '@mui/icons-material/Compress';
-import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 
 import { useSessionStore } from '@/store/sessionStore';
 import { useAgentStore } from '@/store/agentStore';
+import { useLayoutStore } from '@/store/layoutStore';
 import { useAgentWebSocket } from '@/hooks/useAgentWebSocket';
 import SessionSidebar from '@/components/SessionSidebar/SessionSidebar';
+import CodePanel from '@/components/CodePanel/CodePanel';
 import ChatInput from '@/components/Chat/ChatInput';
 import MessageList from '@/components/Chat/MessageList';
-import ApprovalModal from '@/components/ApprovalModal/ApprovalModal';
+import type { Message } from '@/types/agent';
 
 const DRAWER_WIDTH = 280;
 
 export default function AppLayout() {
-  const [mobileOpen, setMobileOpen] = useState(false);
-
   const { activeSessionId } = useSessionStore();
-  const { isConnected, isProcessing, getMessages } = useAgentStore();
+  const { isConnected, isProcessing, getMessages, addMessage } = useAgentStore();
+  const { 
+    isLeftSidebarOpen, 
+    isRightPanelOpen, 
+    rightPanelWidth,
+    setRightPanelWidth,
+    toggleLeftSidebar, 
+    toggleRightPanel 
+  } = useLayoutStore();
+
+  const isResizing = useRef(false);
+
+  const startResizing = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    isResizing.current = true;
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', stopResizing);
+    document.body.style.cursor = 'col-resize';
+  }, []);
+
+  const stopResizing = useCallback(() => {
+    isResizing.current = false;
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', stopResizing);
+    document.body.style.cursor = 'default';
+  }, []);
+
+  const handleMouseMove = useCallback((e: MouseEvent) => {
+    if (!isResizing.current) return;
+    const newWidth = window.innerWidth - e.clientX;
+    const maxWidth = window.innerWidth * 0.8;
+    const minWidth = 300;
+    if (newWidth > minWidth && newWidth < maxWidth) {
+      setRightPanelWidth(newWidth);
+    }
+  }, [setRightPanelWidth]);
+
+  useEffect(() => {
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', stopResizing);
+    };
+  }, [handleMouseMove, stopResizing]);
 
   const messages = activeSessionId ? getMessages(activeSessionId) : [];
 
@@ -37,31 +76,18 @@ export default function AppLayout() {
     onError: (error) => console.error('Agent error:', error),
   });
 
-  const handleDrawerToggle = () => {
-    setMobileOpen(!mobileOpen);
-  };
-
-  const handleUndo = useCallback(async () => {
-    if (!activeSessionId) return;
-    try {
-      await fetch(`/api/undo/${activeSessionId}`, { method: 'POST' });
-    } catch (e) {
-      console.error('Undo failed:', e);
-    }
-  }, [activeSessionId]);
-
-  const handleCompact = useCallback(async () => {
-    if (!activeSessionId) return;
-    try {
-      await fetch(`/api/compact/${activeSessionId}`, { method: 'POST' });
-    } catch (e) {
-      console.error('Compact failed:', e);
-    }
-  }, [activeSessionId]);
-
   const handleSendMessage = useCallback(
     async (text: string) => {
       if (!activeSessionId || !text.trim()) return;
+      
+      const userMsg: Message = {
+        id: `user_${Date.now()}`,
+        role: 'user',
+        content: text.trim(),
+        timestamp: new Date().toISOString(),
+      };
+      addMessage(activeSessionId, userMsg);
+
       try {
         await fetch('/api/submit', {
           method: 'POST',
@@ -75,148 +101,180 @@ export default function AppLayout() {
         console.error('Send failed:', e);
       }
     },
-    [activeSessionId]
+    [activeSessionId, addMessage]
   );
 
-  const drawer = <SessionSidebar onClose={() => setMobileOpen(false)} />;
-
   return (
     <Box sx={{ display: 'flex', width: '100%', height: '100%' }}>
-      {/* App Bar */}
-      <AppBar
-        position="fixed"
-        sx={{
-          width: { md: `calc(100% - ${DRAWER_WIDTH}px)` },
-          ml: { md: `${DRAWER_WIDTH}px` },
-          bgcolor: 'background.paper',
-          borderBottom: 1,
-          borderColor: 'divider',
-        }}
-        elevation={0}
-      >
-        <Toolbar>
-          <IconButton
-            color="inherit"
-            edge="start"
-            onClick={handleDrawerToggle}
-            sx={{ mr: 2, display: { md: 'none' } }}
-          >
-            <MenuIcon />
-          </IconButton>
-          <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
-            HF Agent
-          </Typography>
-          <Chip
-            icon={
-              <FiberManualRecordIcon
-                sx={{
-                  fontSize: 12,
-                  color: isConnected ? 'success.main' : 'error.main',
-                }}
-              />
-            }
-            label={isConnected ? 'Connected' : 'Disconnected'}
-            size="small"
-            variant="outlined"
-            sx={{ mr: 2 }}
-          />
-          <IconButton
-            onClick={handleUndo}
-            disabled={!activeSessionId || isProcessing}
-            title="Undo last turn"
-          >
-            <UndoIcon />
-          </IconButton>
-          <IconButton
-            onClick={handleCompact}
-            disabled={!activeSessionId || isProcessing}
-            title="Compact context"
-          >
-            <CompressIcon />
-          </IconButton>
-        </Toolbar>
-      </AppBar>
-
-      {/* Sidebar Drawer */}
+      {/* Left Sidebar Drawer */}
       <Box
         component="nav"
-        sx={{ width: { md: DRAWER_WIDTH }, flexShrink: { md: 0 } }}
+        sx={{
+          width: { md: isLeftSidebarOpen ? DRAWER_WIDTH : 0 },
+          flexShrink: { md: 0 },
+          transition: isResizing.current ? 'none' : 'width 0.2s',
+          overflow: 'hidden',
+        }}
       >
-        {/* Mobile drawer */}
         <Drawer
-          variant="temporary"
-          open={mobileOpen}
-          onClose={handleDrawerToggle}
-          ModalProps={{ keepMounted: true }}
-          sx={{
-            display: { xs: 'block', md: 'none' },
-            '& .MuiDrawer-paper': {
-              boxSizing: 'border-box',
-              width: DRAWER_WIDTH,
-            },
-          }}
-        >
-          {drawer}
-        </Drawer>
-        {/* Desktop drawer */}
-        <Drawer
-          variant="permanent"
+          variant="persistent"
           sx={{
             display: { xs: 'none', md: 'block' },
             '& .MuiDrawer-paper': {
               boxSizing: 'border-box',
               width: DRAWER_WIDTH,
+              borderRight: '1px solid',
+              borderColor: 'divider',
+              top: '40px', // Below logo bar
+              height: 'calc(100% - 40px)',
             },
           }}
-          open
+          open={isLeftSidebarOpen}
         >
-          {drawer}
+          <SessionSidebar />
         </Drawer>
       </Box>
 
-      {/* Main Content */}
+      {/* Main Content Area */}
       <Box
-        component="main"
         sx={{
           flexGrow: 1,
-          width: { md: `calc(100% - ${DRAWER_WIDTH}px)` },
           height: '100%',
           display: 'flex',
           flexDirection: 'column',
+          transition: isResizing.current ? 'none' : 'width 0.2s',
+          position: 'relative',
+          overflow: 'hidden',
         }}
       >
-        <Toolbar /> {/* Spacer for fixed AppBar */}
-        {activeSessionId ? (
-          <>
-            <MessageList messages={messages} isProcessing={isProcessing} />
-            <ChatInput
-              onSend={handleSendMessage}
-              disabled={isProcessing || !isConnected}
+        {/* Top Header Bar (Fixed) */}
+        <Box sx={{ 
+          height: '60px',
+          px: 1, 
+          display: 'flex', 
+          alignItems: 'center', 
+          borderBottom: 1, 
+          borderColor: 'divider',
+          bgcolor: 'background.default',
+          zIndex: 1200,
+        }}>
+          <IconButton onClick={toggleLeftSidebar} size="small">
+            {isLeftSidebarOpen ? <ChevronLeftIcon /> : <MenuIcon />}
+          </IconButton>
+          
+          <Box sx={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
+            <img 
+              src="/hf-logo-white.png" 
+              alt="Hugging Face" 
+              style={{ height: '40px', objectFit: 'contain' }} 
             />
-          </>
-        ) : (
-          <Box
-            sx={{
-              flex: 1,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              flexDirection: 'column',
-              gap: 2,
-            }}
-          >
-            <Typography variant="h5" color="text.secondary">
-              No session selected
-            </Typography>
-            <Typography variant="body2" color="text.secondary">
-              Create a new session from the sidebar to get started
-            </Typography>
           </Box>
-        )}
+
+          <IconButton 
+            onClick={toggleRightPanel} 
+            size="small" 
+            sx={{ visibility: isRightPanelOpen ? 'hidden' : 'visible' }}
+          >
+            <MenuIcon />
+          </IconButton>
+        </Box>
+
+        <Box
+          component="main"
+          sx={{
+            flexGrow: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
+          }}
+        >
+          {activeSessionId ? (
+            <>
+              <MessageList messages={messages} isProcessing={isProcessing} />
+              <ChatInput
+                onSend={handleSendMessage}
+                disabled={isProcessing || !isConnected}
+              />
+            </>
+          ) : (
+            <Box
+              sx={{
+                flex: 1,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                flexDirection: 'column',
+                gap: 2,
+              }}
+            >
+              <Typography variant="h5" color="text.secondary" sx={{ fontFamily: 'monospace' }}>
+                NO SESSION SELECTED
+              </Typography>
+              <Typography variant="body2" color="text.secondary" sx={{ fontFamily: 'monospace' }}>
+                Initialize a session via the sidebar
+              </Typography>
+            </Box>
+          )}
+        </Box>
       </Box>
 
-      {/* Approval Modal */}
-      <ApprovalModal sessionId={activeSessionId} />
+      {/* Resize Handle */}
+      {isRightPanelOpen && (
+        <Box
+          onMouseDown={startResizing}
+          sx={{
+            width: '4px',
+            cursor: 'col-resize',
+            bgcolor: 'divider',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            transition: 'background-color 0.2s',
+            zIndex: 1300,
+            overflow: 'hidden',
+            '&:hover': {
+              bgcolor: 'primary.main',
+            },
+          }}
+        >
+          <DragIndicatorIcon 
+            sx={{ 
+              fontSize: '0.8rem', 
+              color: 'text.secondary',
+              pointerEvents: 'none',
+            }} 
+          />
+        </Box>
+      )}
+
+      {/* Right Panel Drawer */}
+      <Box
+        component="nav"
+        sx={{
+          width: { md: isRightPanelOpen ? rightPanelWidth : 0 },
+          flexShrink: { md: 0 },
+          transition: isResizing.current ? 'none' : 'width 0.2s',
+          overflow: 'hidden',
+        }}
+      >
+        <Drawer
+          anchor="right"
+          variant="persistent"
+          sx={{
+            display: { xs: 'none', md: 'block' },
+            '& .MuiDrawer-paper': {
+              boxSizing: 'border-box',
+              width: rightPanelWidth,
+              borderLeft: 'none',
+              top: '40px', // Below logo bar
+              height: 'calc(100% - 40px)',
+            },
+          }}
+          open={isRightPanelOpen}
+        >
+          <CodePanel />
+        </Drawer>
+      </Box>
     </Box>
   );
 }

frontend/src/components/SessionSidebar/SessionSidebar.tsx

@@ -11,10 +11,11 @@ import {
   Button,
   Divider,
   Chip,
+  Tooltip,
 } from '@mui/material';
-import AddIcon from '@mui/icons-material/Add';
 import DeleteIcon from '@mui/icons-material/Delete';
-import ChatIcon from '@mui/icons-material/Chat';
+import UndoIcon from '@mui/icons-material/Undo';
+import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
 import { useSessionStore } from '@/store/sessionStore';
 import { useAgentStore } from '@/store/agentStore';
 
@@ -22,10 +23,37 @@ interface SessionSidebarProps {
   onClose?: () => void;
 }
 
+const StatusDiode = ({ connected }: { connected: boolean }) => (
+  <Box
+    sx={{
+      width: 8,
+      height: 8,
+      borderRadius: '50%',
+      bgcolor: connected ? 'success.main' : 'error.main',
+      boxShadow: connected ? '0 0 0 0 rgba(46, 160, 67, 0.7)' : 'none',
+      animation: connected ? 'pulse 2s infinite' : 'none',
+      '@keyframes pulse': {
+        '0%': {
+          transform: 'scale(0.95)',
+          boxShadow: '0 0 0 0 rgba(46, 160, 67, 0.7)',
+        },
+        '70%': {
+          transform: 'scale(1)',
+          boxShadow: '0 0 0 4px rgba(46, 160, 67, 0)',
+        },
+        '100%': {
+          transform: 'scale(0.95)',
+          boxShadow: '0 0 0 0 rgba(46, 160, 67, 0)',
+        },
+      },
+    }}
+  />
+);
+
 export default function SessionSidebar({ onClose }: SessionSidebarProps) {
   const { sessions, activeSessionId, createSession, deleteSession, switchSession } =
     useSessionStore();
-  const { clearMessages } = useAgentStore();
+  const { clearMessages, isConnected, isProcessing } = useAgentStore();
 
   const handleNewSession = useCallback(async () => {
     try {
@@ -60,30 +88,46 @@ export default function SessionSidebar({ onClose }: SessionSidebarProps) {
     [switchSession, onClose]
   );
 
-  const formatDate = (dateString: string) => {
-    const date = new Date(dateString);
-    const now = new Date();
-    const isToday = date.toDateString() === now.toDateString();
-    if (isToday) {
-      return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  const handleUndo = useCallback(async () => {
+    if (!activeSessionId) return;
+    try {
+      await fetch(`/api/undo/${activeSessionId}`, { method: 'POST' });
+    } catch (e) {
+      console.error('Undo failed:', e);
     }
-    return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
+  }, [activeSessionId]);
+
+  const formatTime = (dateString: string) => {
+    return new Date(dateString).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
   };
 
   return (
     <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
       {/* Header */}
-      <Box sx={{ p: 2, borderBottom: 1, borderColor: 'divider' }}>
-        <Typography variant="h6" sx={{ mb: 2 }}>
-          Sessions
-        </Typography>
+      <Box sx={{ p: 2, borderBottom: 1, borderColor: 'divider', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <Box sx={{ mb: 2 }}>
+          <img 
+            src="/hf-log-only-white.png" 
+            alt="HF Agent" 
+            style={{ height: '32px', objectFit: 'contain' }} 
+          />
+        </Box>
+
+        {/* System Info / Status */}
+        <Box sx={{ mb: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
+          <Typography variant="caption" color="text.secondary" sx={{ fontFamily: 'monospace' }}>
+            {isConnected ? 'Connected' : 'Disconnected'}
+          </Typography>
+          <StatusDiode connected={isConnected} />
+        </Box>
+
         <Button
           fullWidth
-          variant="contained"
-          startIcon={<AddIcon />}
+          variant="outlined"
           onClick={handleNewSession}
+          sx={{ justifyContent: 'center' }}
         >
-          New Session
+          Create Session
         </Button>
       </Box>
 
@@ -91,70 +135,81 @@ export default function SessionSidebar({ onClose }: SessionSidebarProps) {
       <Box sx={{ flex: 1, overflow: 'auto' }}>
         {sessions.length === 0 ? (
           <Box sx={{ p: 3, textAlign: 'center' }}>
-            <ChatIcon sx={{ fontSize: 48, color: 'text.secondary', mb: 1 }} />
-            <Typography variant="body2" color="text.secondary">
-              No sessions yet
+            <Typography variant="body2" color="text.secondary" sx={{ fontFamily: 'monospace' }}>
+              NO ACTIVE SESSIONS
             </Typography>
             <Typography variant="caption" color="text.secondary">
-              Create a new session to get started
+              Initialize a new session to begin
             </Typography>
           </Box>
         ) : (
           <List disablePadding>
-            {[...sessions].reverse().map((session) => (
-              <ListItem key={session.id} disablePadding divider>
-                <ListItemButton
-                  selected={session.id === activeSessionId}
-                  onClick={() => handleSelectSession(session.id)}
-                  sx={{
-                    '&.Mui-selected': {
-                      bgcolor: 'action.selected',
-                      '&:hover': {
+            {[...sessions].reverse().map((session, index) => {
+              const sessionNumber = sessions.length - index;
+              return (
+                <ListItem key={session.id} disablePadding divider>
+                  <ListItemButton
+                    selected={session.id === activeSessionId}
+                    onClick={() => handleSelectSession(session.id)}
+                    sx={{
+                      '&.Mui-selected': {
                         bgcolor: 'action.selected',
+                        '&:hover': {
+                          bgcolor: 'action.selected',
+                        },
                       },
-                    },
-                  }}
-                >
-                  <ListItemText
-                    primary={
-                      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                        <Typography variant="body2" noWrap>
-                          {session.title}
+                    }}
+                  >
+                    <ListItemText
+                      primary={
+                        <Typography variant="body2" sx={{ fontFamily: 'monospace', fontWeight: 600 }}>
+                          SESSION {String(sessionNumber).padStart(3, '0')}
+                        </Typography>
+                      }
+                      secondary={
+                        <Typography variant="caption" sx={{ fontFamily: 'monospace', display: 'flex', alignItems: 'center', gap: 1 }}>
+                          <span style={{ color: session.isActive ? 'var(--mui-palette-success-main)' : 'var(--mui-palette-text-secondary)' }}>
+                            {session.isActive ? 'RUNNING' : 'STOPPED'}
+                          </span>
+                          <span>·</span>
+                          <span>{formatTime(session.createdAt)}</span>
                         </Typography>
-                        {session.isActive && (
-                          <Chip
-                            label="active"
-                            size="small"
-                            color="success"
-                            sx={{ height: 18, fontSize: '0.65rem' }}
-                          />
-                        )}
-                      </Box>
-                    }
-                    secondary={formatDate(session.createdAt)}
-                  />
-                  <ListItemSecondaryAction>
-                    <IconButton
-                      edge="end"
-                      size="small"
-                      onClick={(e) => handleDeleteSession(session.id, e)}
-                    >
-                      <DeleteIcon fontSize="small" />
-                    </IconButton>
-                  </ListItemSecondaryAction>
-                </ListItemButton>
-              </ListItem>
-            ))}
+                      }
+                    />
+                    <ListItemSecondaryAction>
+                      <IconButton
+                        edge="end"
+                        size="small"
+                        onClick={(e) => handleDeleteSession(session.id, e)}
+                      >
+                        <DeleteIcon fontSize="small" />
+                      </IconButton>
+                    </ListItemSecondaryAction>
+                  </ListItemButton>
+                </ListItem>
+              );
+            })}
           </List>
         )}
       </Box>
 
       {/* Footer */}
       <Divider />
-      <Box sx={{ p: 2 }}>
-        <Typography variant="caption" color="text.secondary">
-          {sessions.length} session{sessions.length !== 1 ? 's' : ''}
+      <Box sx={{ p: 2, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <Typography variant="caption" color="text.secondary" sx={{ fontFamily: 'monospace' }}>
+          {sessions.length} SESSION{sessions.length !== 1 ? 'S' : ''}
         </Typography>
+        <Tooltip title="Undo last turn">
+          <span>
+            <IconButton
+              onClick={handleUndo}
+              disabled={!activeSessionId || isProcessing}
+              size="small"
+            >
+              <UndoIcon fontSize="small" />
+            </IconButton>
+          </span>
+        </Tooltip>
       </Box>
     </Box>
   );

frontend/src/hooks/useAgentWebSocket.ts

@@ -1,8 +1,9 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { useAgentStore } from '@/store/agentStore';
 import { useSessionStore } from '@/store/sessionStore';
+import { useLayoutStore } from '@/store/layoutStore';
 import type { AgentEvent } from '@/types/events';
-import type { Message } from '@/types/agent';
+import type { Message, TraceLog } from '@/types/agent';
 
 const WS_RECONNECT_DELAY = 1000;
 const WS_MAX_RECONNECT_DELAY = 30000;
@@ -28,8 +29,14 @@ export function useAgentWebSocket({
     setConnected,
     setPendingApprovals,
     setError,
+    addTraceLog,
+    clearTraceLogs,
+    setPanelContent,
+    traceLogs,
   } = useAgentStore();
 
+  const { setRightPanelOpen, setLeftSidebarOpen } = useLayoutStore();
+
   const { setSessionActive } = useSessionStore();
 
   const handleEvent = useCallback(
@@ -46,15 +53,18 @@ export function useAgentWebSocket({
 
         case 'processing':
           setProcessing(true);
+          clearTraceLogs();
           break;
 
         case 'assistant_message': {
           const content = (event.data?.content as string) || '';
+          const currentTrace = useAgentStore.getState().traceLogs;
           const message: Message = {
             id: `msg_${Date.now()}`,
             role: 'assistant',
             content,
             timestamp: new Date().toISOString(),
+            trace: currentTrace.length > 0 ? [...currentTrace] : undefined,
           };
           addMessage(sessionId, message);
           break;
@@ -62,16 +72,36 @@ export function useAgentWebSocket({
 
         case 'tool_call': {
           const toolName = (event.data?.tool as string) || 'unknown';
-          const args = event.data?.arguments || {};
-          const message: Message = {
+          const args = (event.data?.arguments as Record<string, any>) || {};
+          const log: TraceLog = {
             id: `tool_${Date.now()}`,
-            role: 'tool',
-            content: `Calling ${toolName}...`,
+            type: 'call',
+            text: `Calling ${toolName} with ${JSON.stringify(args)}`,
+            tool: toolName,
             timestamp: new Date().toISOString(),
-            toolName,
           };
-          addMessage(sessionId, message);
-          // Store tool call args for display
+          addTraceLog(log);
+          
+          // Auto-expand Right Panel for specific tools
+          if (toolName === 'hf_jobs' && (args.operation === 'run' || args.operation === 'scheduled run') && args.script) {
+            setPanelContent({
+              title: 'Compute Job Script',
+              content: args.script,
+              language: 'python'
+            });
+            setRightPanelOpen(true);
+            setLeftSidebarOpen(false);
+                    } else if (toolName === 'hf_repo_files' && args.operation === 'upload' && args.content) {
+                      setPanelContent({
+                        title: `File Upload: ${args.path || 'unnamed'} `,
+                        content: args.content,
+                        parameters: args,
+                        language: args.path?.endsWith('.py') ? 'python' : undefined
+                      });
+                      setRightPanelOpen(true);
+                      setLeftSidebarOpen(false);
+                    }
+
           console.log('Tool call:', toolName, args);
           break;
         }
@@ -80,14 +110,7 @@ export function useAgentWebSocket({
           const toolName = (event.data?.tool as string) || 'unknown';
           const output = (event.data?.output as string) || '';
           const success = event.data?.success as boolean;
-          const message: Message = {
-            id: `tool_out_${Date.now()}`,
-            role: 'tool',
-            content: output,
-            timestamp: new Date().toISOString(),
-            toolName,
-          };
-          addMessage(sessionId, message);
+          // Only log output to console, not to trace logs per user request
           console.log('Tool output:', toolName, success);
           break;
         }

frontend/src/store/agentStore.ts

@@ -1,5 +1,5 @@
 import { create } from 'zustand';
-import type { Message, ApprovalBatch, User } from '@/types/agent';
+import type { Message, ApprovalBatch, User, TraceLog } from '@/types/agent';
 
 interface AgentStore {
   // State per session (keyed by session ID)
@@ -9,6 +9,8 @@ interface AgentStore {
   pendingApprovals: ApprovalBatch | null;
   user: User | null;
   error: string | null;
+  traceLogs: TraceLog[];
+  panelContent: { title: string; content: string; language?: string; parameters?: any } | null;
 
   // Actions
   addMessage: (sessionId: string, message: Message) => void;
@@ -19,6 +21,9 @@ interface AgentStore {
   setUser: (user: User | null) => void;
   setError: (error: string | null) => void;
   getMessages: (sessionId: string) => Message[];
+  addTraceLog: (log: TraceLog) => void;
+  clearTraceLogs: () => void;
+  setPanelContent: (content: { title: string; content: string; language?: string; parameters?: any } | null) => void;
 }
 
 export const useAgentStore = create<AgentStore>((set, get) => ({
@@ -28,6 +33,8 @@ export const useAgentStore = create<AgentStore>((set, get) => ({
   pendingApprovals: null,
   user: null,
   error: null,
+  traceLogs: [],
+  panelContent: null,
 
   addMessage: (sessionId: string, message: Message) => {
     set((state) => {
@@ -73,4 +80,18 @@ export const useAgentStore = create<AgentStore>((set, get) => ({
   getMessages: (sessionId: string) => {
     return get().messagesBySession[sessionId] || [];
   },
+
+  addTraceLog: (log: TraceLog) => {
+    set((state) => ({
+      traceLogs: [...state.traceLogs, log],
+    }));
+  },
+
+  clearTraceLogs: () => {
+    set({ traceLogs: [] });
+  },
+
+  setPanelContent: (content) => {
+    set({ panelContent: content });
+  },
 }));

frontend/src/store/layoutStore.ts

@@ -0,0 +1,23 @@
+import { create } from 'zustand';
+
+interface LayoutStore {
+  isLeftSidebarOpen: boolean;
+  isRightPanelOpen: boolean;
+  rightPanelWidth: number;
+  setLeftSidebarOpen: (open: boolean) => void;
+  setRightPanelOpen: (open: boolean) => void;
+  setRightPanelWidth: (width: number) => void;
+  toggleLeftSidebar: () => void;
+  toggleRightPanel: () => void;
+}
+
+export const useLayoutStore = create<LayoutStore>((set) => ({
+  isLeftSidebarOpen: true,
+  isRightPanelOpen: false,
+  rightPanelWidth: 450,
+  setLeftSidebarOpen: (open) => set({ isLeftSidebarOpen: open }),
+  setRightPanelOpen: (open) => set({ isRightPanelOpen: open }),
+  setRightPanelWidth: (width) => set({ rightPanelWidth: width }),
+  toggleLeftSidebar: () => set((state) => ({ isLeftSidebarOpen: !state.isLeftSidebarOpen })),
+  toggleRightPanel: () => set((state) => ({ isRightPanelOpen: !state.isRightPanelOpen })),
+}));

frontend/src/theme.ts

@@ -4,9 +4,9 @@ const theme = createTheme({
   palette: {
     mode: 'dark',
     primary: {
-      main: '#FFD21E',
-      light: '#FFE066',
-      dark: '#E6BD1B',
+      main: '#FEE133',
+      light: '#FFF066',
+      dark: '#B29F24',
     },
     secondary: {
       main: '#FF9D00',
@@ -21,7 +21,7 @@ const theme = createTheme({
     },
     divider: '#30363D',
     success: {
-      main: '#3FB950',
+      main: '#2EA043', // Muted green
     },
     error: {
       main: '#F85149',
@@ -34,7 +34,7 @@ const theme = createTheme({
     },
   },
   typography: {
-    fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    fontFamily: '"IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
     h1: {
       fontWeight: 600,
     },
@@ -59,6 +59,9 @@ const theme = createTheme({
     body2: {
       fontSize: '0.875rem',
     },
+    button: {
+      fontFamily: '"JetBrains Mono", "IBM Plex Sans", monospace',
+    },
   },
   components: {
     MuiCssBaseline: {
@@ -71,7 +74,7 @@ const theme = createTheme({
           },
           '&::-webkit-scrollbar-thumb': {
             backgroundColor: '#30363D',
-            borderRadius: '4px',
+            borderRadius: '2px',
           },
           '&::-webkit-scrollbar-track': {
             backgroundColor: 'transparent',
@@ -85,8 +88,10 @@ const theme = createTheme({
     MuiButton: {
       styleOverrides: {
         root: {
-          textTransform: 'none',
-          fontWeight: 500,
+          textTransform: 'uppercase',
+          fontWeight: 600,
+          letterSpacing: '0.05em',
+          fontSize: '0.75rem',
         },
       },
     },
@@ -106,7 +111,7 @@ const theme = createTheme({
     },
   },
   shape: {
-    borderRadius: 8,
+    borderRadius: 2,
   },
 });
 

frontend/src/types/agent.ts

@@ -16,6 +16,7 @@ export interface Message {
   timestamp: string;
   toolName?: string;
   toolCallId?: string;
+  trace?: TraceLog[];
 }
 
 export interface ToolCall {
@@ -41,6 +42,14 @@ export interface ApprovalBatch {
   count: number;
 }
 
+export interface TraceLog {
+  id: string;
+  type: 'call' | 'output';
+  text: string;
+  tool: string;
+  timestamp: string;
+}
+
 export interface User {
   authenticated: boolean;
   username?: string;