Grayscale/nanobot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(webui): polish agent output and app discovery

Browse Source
This commit is contained in:
Xubin Ren
2026-07-22 22:42:31 +08:00
parent b189a37648
commit aa8387fb4d
87 changed files with 6225 additions and 2379 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/bun.lock
+243 -5
View File
@@ -20,12 +20,12 @@
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-i18next": "^17.0.4",
"react-markdown": "^9.0.1",
"react-syntax-highlighter": "^15.6.1",
"rehype-katex": "^7.0.1",
"remark-breaks": "^4.0.0",
"remark-gfm": "^4.0.0",
"remark-math": "^6.0.0",
"streamdown": "2.5.0",
"tailwind-merge": "^2.6.0",
},
"devDependencies": {
@@ -61,6 +61,8 @@
"@alloc/quick-lru": ["@alloc/quick-lru@5.2.0", "", {}, "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="],
"@antfu/install-pkg": ["@antfu/install-pkg@1.1.0", "", { "dependencies": { "package-manager-detector": "^1.3.0", "tinyexec": "^1.0.1" } }, "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ=="],
"@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="],
"@babel/compat-data": ["@babel/compat-data@7.29.0", "", {}, "sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg=="],
@@ -101,6 +103,10 @@
"@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
"@braintree/sanitize-url": ["@braintree/sanitize-url@7.1.2", "", {}, "sha512-jigsZK+sMF/cuiB7sERuo9V7N9jx+dhmHHnQyDSVdpZwVutaBu7WvNYqMDLSgFgfB30n452TP3vjDAvFC973mA=="],
"@chevrotain/types": ["@chevrotain/types@11.1.2", "", {}, "sha512-U+HFai5+zmJCkK86QsaJtoITlboZHBqrVketcO2ROv865xfCMSFpELQoz1GkX5GzME8pTa+3kbKrZHQtI0gdbw=="],
"@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.21.5", "", { "os": "aix", "cpu": "ppc64" }, "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ=="],
"@esbuild/android-arm": ["@esbuild/android-arm@0.21.5", "", { "os": "android", "cpu": "arm" }, "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg=="],
@@ -181,6 +187,10 @@
"@humanwhocodes/retry": ["@humanwhocodes/retry@0.4.3", "", {}, "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ=="],
"@iconify/types": ["@iconify/types@2.0.0", "", {}, "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="],
"@iconify/utils": ["@iconify/utils@3.1.4", "", { "dependencies": { "@antfu/install-pkg": "^1.1.0", "@iconify/types": "^2.0.0", "import-meta-resolve": "^4.2.0" } }, "sha512-b1S7B1k9ohZ+iNTi2ATxbRYG9fTrJmUT0rc46bvVnNxqNRGW7dyo/vRREwyniI5IRN2RSJHDcm+s3BjWrSAjHw=="],
"@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
"@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
@@ -191,6 +201,8 @@
"@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
"@mermaid-js/parser": ["@mermaid-js/parser@1.2.0", "", { "dependencies": { "@chevrotain/types": "~11.1.2" } }, "sha512-oYPyv8A4As1yH5Bx+04iQEQxXuIQDe0GKCNSRgao6z8AM9jixXIfP0vsppRLvGf+nKIOb9/LdpWA4YuJiVvESA=="],
"@nodelib/fs.scandir": ["@nodelib/fs.scandir@2.1.5", "", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" } }, "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="],
"@nodelib/fs.stat": ["@nodelib/fs.stat@2.0.5", "", {}, "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A=="],
@@ -331,6 +343,68 @@
"@types/babel__traverse": ["@types/babel__traverse@7.28.0", "", { "dependencies": { "@babel/types": "^7.28.2" } }, "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q=="],
"@types/d3": ["@types/d3@7.4.3", "", { "dependencies": { "@types/d3-array": "*", "@types/d3-axis": "*", "@types/d3-brush": "*", "@types/d3-chord": "*", "@types/d3-color": "*", "@types/d3-contour": "*", "@types/d3-delaunay": "*", "@types/d3-dispatch": "*", "@types/d3-drag": "*", "@types/d3-dsv": "*", "@types/d3-ease": "*", "@types/d3-fetch": "*", "@types/d3-force": "*", "@types/d3-format": "*", "@types/d3-geo": "*", "@types/d3-hierarchy": "*", "@types/d3-interpolate": "*", "@types/d3-path": "*", "@types/d3-polygon": "*", "@types/d3-quadtree": "*", "@types/d3-random": "*", "@types/d3-scale": "*", "@types/d3-scale-chromatic": "*", "@types/d3-selection": "*", "@types/d3-shape": "*", "@types/d3-time": "*", "@types/d3-time-format": "*", "@types/d3-timer": "*", "@types/d3-transition": "*", "@types/d3-zoom": "*" } }, "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww=="],
"@types/d3-array": ["@types/d3-array@3.2.2", "", {}, "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw=="],
"@types/d3-axis": ["@types/d3-axis@3.0.6", "", { "dependencies": { "@types/d3-selection": "*" } }, "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw=="],
"@types/d3-brush": ["@types/d3-brush@3.0.6", "", { "dependencies": { "@types/d3-selection": "*" } }, "sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A=="],
"@types/d3-chord": ["@types/d3-chord@3.0.6", "", {}, "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg=="],
"@types/d3-color": ["@types/d3-color@3.1.3", "", {}, "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="],
"@types/d3-contour": ["@types/d3-contour@3.0.6", "", { "dependencies": { "@types/d3-array": "*", "@types/geojson": "*" } }, "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg=="],
"@types/d3-delaunay": ["@types/d3-delaunay@6.0.4", "", {}, "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw=="],
"@types/d3-dispatch": ["@types/d3-dispatch@3.0.7", "", {}, "sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA=="],
"@types/d3-drag": ["@types/d3-drag@3.0.7", "", { "dependencies": { "@types/d3-selection": "*" } }, "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ=="],
"@types/d3-dsv": ["@types/d3-dsv@3.0.7", "", {}, "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g=="],
"@types/d3-ease": ["@types/d3-ease@3.0.2", "", {}, "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="],
"@types/d3-fetch": ["@types/d3-fetch@3.0.7", "", { "dependencies": { "@types/d3-dsv": "*" } }, "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA=="],
"@types/d3-force": ["@types/d3-force@3.0.10", "", {}, "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw=="],
"@types/d3-format": ["@types/d3-format@3.0.4", "", {}, "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g=="],
"@types/d3-geo": ["@types/d3-geo@3.1.0", "", { "dependencies": { "@types/geojson": "*" } }, "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ=="],
"@types/d3-hierarchy": ["@types/d3-hierarchy@3.1.7", "", {}, "sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg=="],
"@types/d3-interpolate": ["@types/d3-interpolate@3.0.4", "", { "dependencies": { "@types/d3-color": "*" } }, "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA=="],
"@types/d3-path": ["@types/d3-path@3.1.1", "", {}, "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg=="],
"@types/d3-polygon": ["@types/d3-polygon@3.0.2", "", {}, "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA=="],
"@types/d3-quadtree": ["@types/d3-quadtree@3.0.6", "", {}, "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg=="],
"@types/d3-random": ["@types/d3-random@3.0.4", "", {}, "sha512-UHYId5WTCx4L4YNel7NU00XUXXgvgpgZOvp10PuvsQENjMDXhh2RyFc0KBjO7B45ne4Ha1yVH7ii0vnzKkuzWA=="],
"@types/d3-scale": ["@types/d3-scale@4.0.9", "", { "dependencies": { "@types/d3-time": "*" } }, "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw=="],
"@types/d3-scale-chromatic": ["@types/d3-scale-chromatic@3.1.0", "", {}, "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ=="],
"@types/d3-selection": ["@types/d3-selection@3.0.11", "", {}, "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w=="],
"@types/d3-shape": ["@types/d3-shape@3.1.8", "", { "dependencies": { "@types/d3-path": "*" } }, "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w=="],
"@types/d3-time": ["@types/d3-time@3.0.4", "", {}, "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g=="],
"@types/d3-time-format": ["@types/d3-time-format@4.0.3", "", {}, "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg=="],
"@types/d3-timer": ["@types/d3-timer@3.0.2", "", {}, "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="],
"@types/d3-transition": ["@types/d3-transition@3.0.9", "", { "dependencies": { "@types/d3-selection": "*" } }, "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg=="],
"@types/d3-zoom": ["@types/d3-zoom@3.0.8", "", { "dependencies": { "@types/d3-interpolate": "*", "@types/d3-selection": "*" } }, "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw=="],
"@types/debug": ["@types/debug@4.1.13", "", { "dependencies": { "@types/ms": "*" } }, "sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw=="],
"@types/esrecurse": ["@types/esrecurse@4.3.1", "", {}, "sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw=="],
@@ -339,6 +413,8 @@
"@types/estree-jsx": ["@types/estree-jsx@1.0.5", "", { "dependencies": { "@types/estree": "*" } }, "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg=="],
"@types/geojson": ["@types/geojson@7946.0.16", "", {}, "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg=="],
"@types/hast": ["@types/hast@3.0.4", "", { "dependencies": { "@types/unist": "*" } }, "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ=="],
"@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],
@@ -361,6 +437,8 @@
"@types/react-syntax-highlighter": ["@types/react-syntax-highlighter@15.5.13", "", { "dependencies": { "@types/react": "*" } }, "sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA=="],
"@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],
"@types/unist": ["@types/unist@3.0.3", "", {}, "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="],
"@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.62.1", "", { "dependencies": { "@eslint-community/regexpp": "^4.12.2", "@typescript-eslint/scope-manager": "8.62.1", "@typescript-eslint/type-utils": "8.62.1", "@typescript-eslint/utils": "8.62.1", "@typescript-eslint/visitor-keys": "8.62.1", "ignore": "^7.0.5", "natural-compare": "^1.4.0", "ts-api-utils": "^2.5.0" }, "peerDependencies": { "@typescript-eslint/parser": "^8.62.1", "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-4EQM77WgVNxj7OkL/5b/D/xZsw00G577+UriYTC7JF5opcF3T2AuoeY7ueLaZgSVjSgCS6yOAJB5bRGLPSJUzA=="],
@@ -385,6 +463,8 @@
"@ungap/structured-clone": ["@ungap/structured-clone@1.3.0", "", {}, "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g=="],
"@upsetjs/venn.js": ["@upsetjs/venn.js@2.0.0", "", { "optionalDependencies": { "d3-selection": "^3.0.0", "d3-transition": "^3.0.1" } }, "sha512-WbBhLrooyePuQ1VZxrJjtLvTc4NVfpOyKx0sKqioq9bX1C1m7Jgykkn8gLrtwumBioXIqam8DLxp88Adbue6Hw=="],
"@vitejs/plugin-react": ["@vitejs/plugin-react@4.7.0", "", { "dependencies": { "@babel/core": "^7.28.0", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", "@rolldown/pluginutils": "1.0.0-beta.27", "@types/babel__core": "^7.20.5", "react-refresh": "^0.17.0" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" } }, "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA=="],
"@vitest/expect": ["@vitest/expect@2.1.9", "", { "dependencies": { "@vitest/spy": "2.1.9", "@vitest/utils": "2.1.9", "chai": "^5.1.2", "tinyrainbow": "^1.2.0" } }, "sha512-UJCIkTBenHeKT1TTlKMJWy1laZewsRIzYighyYiJKZreqtdxSos/S1t+ktRMQWu2CKqaarrkeszJx1cgC5tGZw=="],
@@ -479,6 +559,8 @@
"convert-source-map": ["convert-source-map@2.0.0", "", {}, "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="],
"cose-base": ["cose-base@1.0.3", "", { "dependencies": { "layout-base": "^1.0.0" } }, "sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg=="],
"cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
"css.escape": ["css.escape@1.5.1", "", {}, "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg=="],
@@ -487,6 +569,80 @@
"csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
"cytoscape": ["cytoscape@3.34.0", "", {}, "sha512-62rNSrioXw93uliKFBwjukeQyeWwH2PqDrTac31r2P6464u3AUvTk0xS4LVvT251g7IgkFunrI48ZEZGjywSOg=="],
"cytoscape-cose-bilkent": ["cytoscape-cose-bilkent@4.1.0", "", { "dependencies": { "cose-base": "^1.0.0" }, "peerDependencies": { "cytoscape": "^3.2.0" } }, "sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ=="],
"cytoscape-fcose": ["cytoscape-fcose@2.2.0", "", { "dependencies": { "cose-base": "^2.2.0" }, "peerDependencies": { "cytoscape": "^3.2.0" } }, "sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ=="],
"d3": ["d3@7.9.0", "", { "dependencies": { "d3-array": "3", "d3-axis": "3", "d3-brush": "3", "d3-chord": "3", "d3-color": "3", "d3-contour": "4", "d3-delaunay": "6", "d3-dispatch": "3", "d3-drag": "3", "d3-dsv": "3", "d3-ease": "3", "d3-fetch": "3", "d3-force": "3", "d3-format": "3", "d3-geo": "3", "d3-hierarchy": "3", "d3-interpolate": "3", "d3-path": "3", "d3-polygon": "3", "d3-quadtree": "3", "d3-random": "3", "d3-scale": "4", "d3-scale-chromatic": "3", "d3-selection": "3", "d3-shape": "3", "d3-time": "3", "d3-time-format": "4", "d3-timer": "3", "d3-transition": "3", "d3-zoom": "3" } }, "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA=="],
"d3-array": ["d3-array@3.2.4", "", { "dependencies": { "internmap": "1 - 2" } }, "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg=="],
"d3-axis": ["d3-axis@3.0.0", "", {}, "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw=="],
"d3-brush": ["d3-brush@3.0.0", "", { "dependencies": { "d3-dispatch": "1 - 3", "d3-drag": "2 - 3", "d3-interpolate": "1 - 3", "d3-selection": "3", "d3-transition": "3" } }, "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ=="],
"d3-chord": ["d3-chord@3.0.1", "", { "dependencies": { "d3-path": "1 - 3" } }, "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g=="],
"d3-color": ["d3-color@3.1.0", "", {}, "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="],
"d3-contour": ["d3-contour@4.0.2", "", { "dependencies": { "d3-array": "^3.2.0" } }, "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA=="],
"d3-delaunay": ["d3-delaunay@6.0.4", "", { "dependencies": { "delaunator": "5" } }, "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A=="],
"d3-dispatch": ["d3-dispatch@3.0.1", "", {}, "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="],
"d3-drag": ["d3-drag@3.0.0", "", { "dependencies": { "d3-dispatch": "1 - 3", "d3-selection": "3" } }, "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg=="],
"d3-dsv": ["d3-dsv@3.0.1", "", { "dependencies": { "commander": "7", "iconv-lite": "0.6", "rw": "1" }, "bin": { "csv2json": "bin/dsv2json.js", "csv2tsv": "bin/dsv2dsv.js", "dsv2dsv": "bin/dsv2dsv.js", "dsv2json": "bin/dsv2json.js", "json2csv": "bin/json2dsv.js", "json2dsv": "bin/json2dsv.js", "json2tsv": "bin/json2dsv.js", "tsv2csv": "bin/dsv2dsv.js", "tsv2json": "bin/dsv2json.js" } }, "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q=="],
"d3-ease": ["d3-ease@3.0.1", "", {}, "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="],
"d3-fetch": ["d3-fetch@3.0.1", "", { "dependencies": { "d3-dsv": "1 - 3" } }, "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw=="],
"d3-force": ["d3-force@3.0.0", "", { "dependencies": { "d3-dispatch": "1 - 3", "d3-quadtree": "1 - 3", "d3-timer": "1 - 3" } }, "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg=="],
"d3-format": ["d3-format@3.1.2", "", {}, "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg=="],
"d3-geo": ["d3-geo@3.1.1", "", { "dependencies": { "d3-array": "2.5.0 - 3" } }, "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q=="],
"d3-hierarchy": ["d3-hierarchy@3.1.2", "", {}, "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA=="],
"d3-interpolate": ["d3-interpolate@3.0.1", "", { "dependencies": { "d3-color": "1 - 3" } }, "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g=="],
"d3-path": ["d3-path@3.1.0", "", {}, "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ=="],
"d3-polygon": ["d3-polygon@3.0.1", "", {}, "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg=="],
"d3-quadtree": ["d3-quadtree@3.0.1", "", {}, "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw=="],
"d3-random": ["d3-random@3.0.1", "", {}, "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ=="],
"d3-sankey": ["d3-sankey@0.12.3", "", { "dependencies": { "d3-array": "1 - 2", "d3-shape": "^1.2.0" } }, "sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ=="],
"d3-scale": ["d3-scale@4.0.2", "", { "dependencies": { "d3-array": "2.10.0 - 3", "d3-format": "1 - 3", "d3-interpolate": "1.2.0 - 3", "d3-time": "2.1.1 - 3", "d3-time-format": "2 - 4" } }, "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ=="],
"d3-scale-chromatic": ["d3-scale-chromatic@3.1.0", "", { "dependencies": { "d3-color": "1 - 3", "d3-interpolate": "1 - 3" } }, "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ=="],
"d3-selection": ["d3-selection@3.0.0", "", {}, "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="],
"d3-shape": ["d3-shape@3.2.0", "", { "dependencies": { "d3-path": "^3.1.0" } }, "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA=="],
"d3-time": ["d3-time@3.1.0", "", { "dependencies": { "d3-array": "2 - 3" } }, "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q=="],
"d3-time-format": ["d3-time-format@4.1.0", "", { "dependencies": { "d3-time": "1 - 3" } }, "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg=="],
"d3-timer": ["d3-timer@3.0.1", "", {}, "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="],
"d3-transition": ["d3-transition@3.0.1", "", { "dependencies": { "d3-color": "1 - 3", "d3-dispatch": "1 - 3", "d3-ease": "1 - 3", "d3-interpolate": "1 - 3", "d3-timer": "1 - 3" }, "peerDependencies": { "d3-selection": "2 - 3" } }, "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w=="],
"d3-zoom": ["d3-zoom@3.0.0", "", { "dependencies": { "d3-dispatch": "1 - 3", "d3-drag": "2 - 3", "d3-interpolate": "1 - 3", "d3-selection": "2 - 3", "d3-transition": "2 - 3" } }, "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw=="],
"dagre-d3-es": ["dagre-d3-es@7.0.14", "", { "dependencies": { "d3": "^7.9.0", "lodash-es": "^4.17.21" } }, "sha512-P4rFMVq9ESWqmOgK+dlXvOtLwYg0i7u0HBGJER0LZDJT2VHIPAMZ/riPxqJceWMStH5+E61QxFra9kIS3AqdMg=="],
"dayjs": ["dayjs@1.11.21", "", {}, "sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA=="],
"debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
"decamelize": ["decamelize@1.2.0", "", {}, "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA=="],
@@ -497,22 +653,26 @@
"deep-is": ["deep-is@0.1.4", "", {}, "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="],
"delaunator": ["delaunator@5.1.0", "", { "dependencies": { "robust-predicates": "^3.0.2" } }, "sha512-AGrQ4QSgssa1NGmWmLPqN5NY2KajF5MqxetNEO+o0n3ZwZZeTmt7bBnvzHWrmkZFxGgr4HdyFgelzgi06otLuQ=="],
"dequal": ["dequal@2.0.3", "", {}, "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="],
"detect-node-es": ["detect-node-es@1.1.0", "", {}, "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="],
"devlop": ["devlop@1.1.0", "", { "dependencies": { "dequal": "^2.0.0" } }, "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA=="],
"diff": ["diff@9.0.0", "", {}, "sha512-svtcdpS8CgJyqAjEQIXdb3OjhFVVYjzGAPO8WGCmRbrml64SPw/jJD4GoE98aR7r25A0XcgrK3F02yw9R/vhQw=="],
"didyoumean": ["didyoumean@1.2.2", "", {}, "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="],
"diff": ["diff@9.0.0", "", {}, "sha512-svtcdpS8CgJyqAjEQIXdb3OjhFVVYjzGAPO8WGCmRbrml64SPw/jJD4GoE98aR7r25A0XcgrK3F02yw9R/vhQw=="],
"dijkstrajs": ["dijkstrajs@1.0.3", "", {}, "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA=="],
"dlv": ["dlv@1.1.3", "", {}, "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="],
"dom-accessibility-api": ["dom-accessibility-api@0.6.3", "", {}, "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w=="],
"dompurify": ["dompurify@3.4.12", "", { "optionalDependencies": { "@types/trusted-types": "^2.0.7" } }, "sha512-zQvGet8Z2sWbQhCmfFz/T5QWH2oBmjnqK3qvOjaqaNLrLEF912WamU+ohnTp0TCep/MFVHpdJuCZEdFOdTnEFg=="],
"electron-to-chromium": ["electron-to-chromium@1.5.340", "", {}, "sha512-908qahOGocRMinT2nM3ajCEM99H4iPdv84eagPP3FfZy/1ZGeOy2CZYzjhms81ckOPCXPlW7LkY4XpxD8r1DrA=="],
"emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
@@ -523,6 +683,8 @@
"es-module-lexer": ["es-module-lexer@1.7.0", "", {}, "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA=="],
"es-toolkit": ["es-toolkit@1.49.0", "", {}, "sha512-G5iZ6Pc/FNRY/soKZHC+TxGDD83rHUDXxzaWhGCX44vAv/tMs56WMusnm/KMNK+luUPsgA9U28cGr4RDlSzL2g=="],
"esbuild": ["esbuild@0.21.5", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.21.5", "@esbuild/android-arm": "0.21.5", "@esbuild/android-arm64": "0.21.5", "@esbuild/android-x64": "0.21.5", "@esbuild/darwin-arm64": "0.21.5", "@esbuild/darwin-x64": "0.21.5", "@esbuild/freebsd-arm64": "0.21.5", "@esbuild/freebsd-x64": "0.21.5", "@esbuild/linux-arm": "0.21.5", "@esbuild/linux-arm64": "0.21.5", "@esbuild/linux-ia32": "0.21.5", "@esbuild/linux-loong64": "0.21.5", "@esbuild/linux-mips64el": "0.21.5", "@esbuild/linux-ppc64": "0.21.5", "@esbuild/linux-riscv64": "0.21.5", "@esbuild/linux-s390x": "0.21.5", "@esbuild/linux-x64": "0.21.5", "@esbuild/netbsd-x64": "0.21.5", "@esbuild/openbsd-x64": "0.21.5", "@esbuild/sunos-x64": "0.21.5", "@esbuild/win32-arm64": "0.21.5", "@esbuild/win32-ia32": "0.21.5", "@esbuild/win32-x64": "0.21.5" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw=="],
"escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
@@ -597,6 +759,8 @@
"globals": ["globals@17.7.0", "", {}, "sha512-Czmyns5dUsq4seFBR/Kdydhmo8y9kC79hiSkPn0YcGtNnYWnrgt0vjrSjx9tspoDGWm2CMarffRuLjM4xUz8xg=="],
"hachure-fill": ["hachure-fill@0.5.2", "", {}, "sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg=="],
"happy-dom": ["happy-dom@16.8.1", "", { "dependencies": { "webidl-conversions": "^7.0.0", "whatwg-mimetype": "^3.0.0" } }, "sha512-n0QrmT9lD81rbpKsyhnlz3DgnMZlaOkJPpgi746doA+HvaMC79bdWkwjrNnGJRvDrWTI8iOcJiVTJ5CdT/AZRw=="],
"hasown": ["hasown@2.0.3", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg=="],
@@ -613,8 +777,14 @@
"hast-util-parse-selector": ["hast-util-parse-selector@2.2.5", "", {}, "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ=="],
"hast-util-raw": ["hast-util-raw@9.1.0", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", "@ungap/structured-clone": "^1.0.0", "hast-util-from-parse5": "^8.0.0", "hast-util-to-parse5": "^8.0.0", "html-void-elements": "^3.0.0", "mdast-util-to-hast": "^13.0.0", "parse5": "^7.0.0", "unist-util-position": "^5.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0", "web-namespaces": "^2.0.0", "zwitch": "^2.0.0" } }, "sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw=="],
"hast-util-sanitize": ["hast-util-sanitize@5.0.2", "", { "dependencies": { "@types/hast": "^3.0.0", "@ungap/structured-clone": "^1.0.0", "unist-util-position": "^5.0.0" } }, "sha512-3yTWghByc50aGS7JlGhk61SPenfE/p1oaFeNwkOOyrscaOkMGrcW9+Cy/QAIOBpZxP1yqDIzFMR0+Np0i0+usg=="],
"hast-util-to-jsx-runtime": ["hast-util-to-jsx-runtime@2.3.6", "", { "dependencies": { "@types/estree": "^1.0.0", "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", "comma-separated-tokens": "^2.0.0", "devlop": "^1.0.0", "estree-util-is-identifier-name": "^3.0.0", "hast-util-whitespace": "^3.0.0", "mdast-util-mdx-expression": "^2.0.0", "mdast-util-mdx-jsx": "^3.0.0", "mdast-util-mdxjs-esm": "^2.0.0", "property-information": "^7.0.0", "space-separated-tokens": "^2.0.0", "style-to-js": "^1.0.0", "unist-util-position": "^5.0.0", "vfile-message": "^4.0.0" } }, "sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg=="],
"hast-util-to-parse5": ["hast-util-to-parse5@8.0.1", "", { "dependencies": { "@types/hast": "^3.0.0", "comma-separated-tokens": "^2.0.0", "devlop": "^1.0.0", "property-information": "^7.0.0", "space-separated-tokens": "^2.0.0", "web-namespaces": "^2.0.0", "zwitch": "^2.0.0" } }, "sha512-MlWT6Pjt4CG9lFCjiz4BH7l9wmrMkfkJYCxFwKQic8+RTZgWPuWxwAfjJElsXkex7DJjfSJsQIt931ilUgmwdA=="],
"hast-util-to-text": ["hast-util-to-text@4.0.2", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", "hast-util-is-element": "^3.0.0", "unist-util-find-after": "^5.0.0" } }, "sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A=="],
"hast-util-whitespace": ["hast-util-whitespace@3.0.0", "", { "dependencies": { "@types/hast": "^3.0.0" } }, "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw=="],
@@ -633,16 +803,24 @@
"html-url-attributes": ["html-url-attributes@3.0.1", "", {}, "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ=="],
"html-void-elements": ["html-void-elements@3.0.0", "", {}, "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg=="],
"i18next": ["i18next@26.2.0", "", { "peerDependencies": { "typescript": "^5 || ^6" }, "optionalPeers": ["typescript"] }, "sha512-zwBHldHdTmwN7r6UNc7lC6GWNN+YYg3DrRSeHR5PRRBf5QnJZcYHrQc0uaU26qZeYxR7iFZD+Y315dPnKP47wA=="],
"iconv-lite": ["iconv-lite@0.6.3", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" } }, "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw=="],
"ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="],
"import-meta-resolve": ["import-meta-resolve@4.2.0", "", {}, "sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg=="],
"imurmurhash": ["imurmurhash@0.1.4", "", {}, "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="],
"indent-string": ["indent-string@4.0.0", "", {}, "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg=="],
"inline-style-parser": ["inline-style-parser@0.2.7", "", {}, "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA=="],
"internmap": ["internmap@2.0.3", "", {}, "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="],
"is-alphabetical": ["is-alphabetical@1.0.4", "", {}, "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg=="],
"is-alphanumerical": ["is-alphanumerical@1.0.4", "", { "dependencies": { "is-alphabetical": "^1.0.0", "is-decimal": "^1.0.0" } }, "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A=="],
@@ -685,6 +863,10 @@
"keyv": ["keyv@4.5.4", "", { "dependencies": { "json-buffer": "3.0.1" } }, "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw=="],
"khroma": ["khroma@2.1.0", "", {}, "sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw=="],
"layout-base": ["layout-base@1.0.2", "", {}, "sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg=="],
"levn": ["levn@0.4.1", "", { "dependencies": { "prelude-ls": "^1.2.1", "type-check": "~0.4.0" } }, "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="],
"lilconfig": ["lilconfig@3.1.3", "", {}, "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw=="],
@@ -693,6 +875,8 @@
"locate-path": ["locate-path@6.0.0", "", { "dependencies": { "p-locate": "^5.0.0" } }, "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="],
"lodash-es": ["lodash-es@4.18.1", "", {}, "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A=="],
"longest-streak": ["longest-streak@3.1.0", "", {}, "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g=="],
"loose-envify": ["loose-envify@1.4.0", "", { "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, "bin": { "loose-envify": "cli.js" } }, "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="],
@@ -711,6 +895,8 @@
"markdown-table": ["markdown-table@3.0.4", "", {}, "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw=="],
"marked": ["marked@17.0.6", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-gB0gkNafnonOw0obSTEGZTT86IuhILt2Wfx0mWH/1Au83kybTayroZ/V6nS25mN7u8ASy+5fMhgB3XPNrOZdmA=="],
"mdast-util-find-and-replace": ["mdast-util-find-and-replace@3.0.2", "", { "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" } }, "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg=="],
"mdast-util-from-markdown": ["mdast-util-from-markdown@2.0.3", "", { "dependencies": { "@types/mdast": "^4.0.0", "@types/unist": "^3.0.0", "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "mdast-util-to-string": "^4.0.0", "micromark": "^4.0.0", "micromark-util-decode-numeric-character-reference": "^2.0.0", "micromark-util-decode-string": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0", "unist-util-stringify-position": "^4.0.0" } }, "sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q=="],
@@ -747,6 +933,8 @@
"merge2": ["merge2@1.4.1", "", {}, "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="],
"mermaid": ["mermaid@11.16.0", "", { "dependencies": { "@braintree/sanitize-url": "^7.1.2", "@iconify/utils": "^3.0.2", "@mermaid-js/parser": "^1.2.0", "@types/d3": "^7.4.3", "@upsetjs/venn.js": "^2.0.0", "cytoscape": "^3.33.3", "cytoscape-cose-bilkent": "^4.1.0", "cytoscape-fcose": "^2.2.0", "d3": "^7.9.0", "d3-sankey": "^0.12.3", "dagre-d3-es": "7.0.14", "dayjs": "^1.11.20", "dompurify": "^3.3.3", "es-toolkit": "^1.45.1", "katex": "^0.16.45", "khroma": "^2.1.0", "marked": "^16.3.0", "roughjs": "^4.6.6", "stylis": "^4.3.6", "ts-dedent": "^2.2.0", "uuid": "^11.1.0 || ^12 || ^13 || ^14.0.0" } }, "sha512-Zvm3kbstgdpvIJPPItlL7fppIZ3kibvc1oZIGxdvk9t6UFz6flv+Jw7FtRGKwfcI8OckmH04LqG6LlS6X4B1pA=="],
"micromark": ["micromark@4.0.2", "", { "dependencies": { "@types/debug": "^4.0.0", "debug": "^4.0.0", "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "micromark-core-commonmark": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-chunked": "^2.0.0", "micromark-util-combine-extensions": "^2.0.0", "micromark-util-decode-numeric-character-reference": "^2.0.0", "micromark-util-encode": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-resolve-all": "^2.0.0", "micromark-util-sanitize-uri": "^2.0.0", "micromark-util-subtokenize": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA=="],
"micromark-core-commonmark": ["micromark-core-commonmark@2.0.3", "", { "dependencies": { "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "micromark-factory-destination": "^2.0.0", "micromark-factory-label": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-factory-title": "^2.0.0", "micromark-factory-whitespace": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-chunked": "^2.0.0", "micromark-util-classify-character": "^2.0.0", "micromark-util-html-tag-name": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-resolve-all": "^2.0.0", "micromark-util-subtokenize": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg=="],
@@ -835,10 +1023,14 @@
"p-try": ["p-try@2.2.0", "", {}, "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="],
"package-manager-detector": ["package-manager-detector@1.7.0", "", {}, "sha512-xg1eHpwYL/D/HEdWw2goFZP6vV0FH7W+PZ5rFkGjdIDLtxq7EkzBUeT3m+lndYCt8wKbmofUu1MUdMCXkCk9ZQ=="],
"parse-entities": ["parse-entities@2.0.0", "", { "dependencies": { "character-entities": "^1.0.0", "character-entities-legacy": "^1.0.0", "character-reference-invalid": "^1.0.0", "is-alphanumerical": "^1.0.0", "is-decimal": "^1.0.0", "is-hexadecimal": "^1.0.0" } }, "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ=="],
"parse5": ["parse5@7.3.0", "", { "dependencies": { "entities": "^6.0.0" } }, "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw=="],
"path-data-parser": ["path-data-parser@0.1.0", "", {}, "sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w=="],
"path-exists": ["path-exists@4.0.0", "", {}, "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="],
"path-key": ["path-key@3.1.1", "", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="],
@@ -859,6 +1051,10 @@
"pngjs": ["pngjs@5.0.0", "", {}, "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw=="],
"points-on-curve": ["points-on-curve@0.2.0", "", {}, "sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A=="],
"points-on-path": ["points-on-path@0.2.1", "", { "dependencies": { "path-data-parser": "0.1.0", "points-on-curve": "0.2.0" } }, "sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g=="],
"postcss": ["postcss@8.5.10", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ=="],
"postcss-import": ["postcss-import@15.1.0", "", { "dependencies": { "postcss-value-parser": "^4.0.0", "read-cache": "^1.0.0", "resolve": "^1.1.7" }, "peerDependencies": { "postcss": "^8.0.0" } }, "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew=="],
@@ -895,8 +1091,6 @@
"react-is": ["react-is@17.0.2", "", {}, "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="],
"react-markdown": ["react-markdown@9.1.0", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "devlop": "^1.0.0", "hast-util-to-jsx-runtime": "^2.0.0", "html-url-attributes": "^3.0.0", "mdast-util-to-hast": "^13.0.0", "remark-parse": "^11.0.0", "remark-rehype": "^11.0.0", "unified": "^11.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0" }, "peerDependencies": { "@types/react": ">=18", "react": ">=18" } }, "sha512-xaijuJB0kzGiUdG7nc2MOMDUDBWPyGAjZtUrow9XxUeua8IqeP+VlIfAZ3bphpcLTnSZXz6z9jcVC/TCwbfgdw=="],
"react-refresh": ["react-refresh@0.17.0", "", {}, "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ=="],
"react-remove-scroll": ["react-remove-scroll@2.7.2", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.7", "react-style-singleton": "^2.2.3", "tslib": "^2.1.0", "use-callback-ref": "^1.3.3", "use-sidecar": "^1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q=="],
@@ -915,8 +1109,14 @@
"refractor": ["refractor@3.6.0", "", { "dependencies": { "hastscript": "^6.0.0", "parse-entities": "^2.0.0", "prismjs": "~1.27.0" } }, "sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA=="],
"rehype-harden": ["rehype-harden@1.1.8", "", { "dependencies": { "unist-util-visit": "^5.0.0" } }, "sha512-Qn7vR1xrf6fZCrkm9TDWi/AB4ylrHy+jqsNm1EHOAmbARYA6gsnVJBq/sdBh6kmT4NEZxH5vgIjrscefJAOXcw=="],
"rehype-katex": ["rehype-katex@7.0.1", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/katex": "^0.16.0", "hast-util-from-html-isomorphic": "^2.0.0", "hast-util-to-text": "^4.0.0", "katex": "^0.16.0", "unist-util-visit-parents": "^6.0.0", "vfile": "^6.0.0" } }, "sha512-OiM2wrZ/wuhKkigASodFoo8wimG3H12LWQaH8qSPVJn9apWKFSH3YOCtbKpBorTVw/eI7cuT21XBbvwEswbIOA=="],
"rehype-raw": ["rehype-raw@7.0.0", "", { "dependencies": { "@types/hast": "^3.0.0", "hast-util-raw": "^9.0.0", "vfile": "^6.0.0" } }, "sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww=="],
"rehype-sanitize": ["rehype-sanitize@6.0.0", "", { "dependencies": { "@types/hast": "^3.0.0", "hast-util-sanitize": "^5.0.0" } }, "sha512-CsnhKNsyI8Tub6L4sm5ZFsme4puGfc6pYylvXo1AeqaGbjOYyzNv3qZPwvs0oMJ39eryyeOdmxwUIo94IpEhqg=="],
"remark-breaks": ["remark-breaks@4.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-newline-to-break": "^2.0.0", "unified": "^11.0.0" } }, "sha512-IjEjJOkH4FuJvHZVIW0QCDWxcG96kCq7An/KVH2NfJe6rKZU2AsHeB3OEjPNRxi4QC34Xdx7I2KGYn6IpT7gxQ=="],
"remark-gfm": ["remark-gfm@4.0.1", "", { "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" } }, "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg=="],
@@ -929,6 +1129,8 @@
"remark-stringify": ["remark-stringify@11.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-to-markdown": "^2.0.0", "unified": "^11.0.0" } }, "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw=="],
"remend": ["remend@1.3.0", "", {}, "sha512-iIhggPkhW3hFImKtB10w0dz4EZbs28mV/dmbcYVonWEJ6UGHHpP+bFZnTh6GNWJONg5m+U56JrL+8IxZRdgWjw=="],
"require-directory": ["require-directory@2.1.1", "", {}, "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="],
"require-main-filename": ["require-main-filename@2.0.0", "", {}, "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="],
@@ -937,10 +1139,18 @@
"reusify": ["reusify@1.1.0", "", {}, "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw=="],
"robust-predicates": ["robust-predicates@3.0.3", "", {}, "sha512-NS3levdsRIUOmiJ8FZWCP7LG3QpJyrs/TE0Zpf1yvZu8cAJJ6QMW92H1c7kWpdIHo8RvmLxN/o2JXTKHp74lUA=="],
"rollup": ["rollup@4.60.1", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.60.1", "@rollup/rollup-android-arm64": "4.60.1", "@rollup/rollup-darwin-arm64": "4.60.1", "@rollup/rollup-darwin-x64": "4.60.1", "@rollup/rollup-freebsd-arm64": "4.60.1", "@rollup/rollup-freebsd-x64": "4.60.1", "@rollup/rollup-linux-arm-gnueabihf": "4.60.1", "@rollup/rollup-linux-arm-musleabihf": "4.60.1", "@rollup/rollup-linux-arm64-gnu": "4.60.1", "@rollup/rollup-linux-arm64-musl": "4.60.1", "@rollup/rollup-linux-loong64-gnu": "4.60.1", "@rollup/rollup-linux-loong64-musl": "4.60.1", "@rollup/rollup-linux-ppc64-gnu": "4.60.1", "@rollup/rollup-linux-ppc64-musl": "4.60.1", "@rollup/rollup-linux-riscv64-gnu": "4.60.1", "@rollup/rollup-linux-riscv64-musl": "4.60.1", "@rollup/rollup-linux-s390x-gnu": "4.60.1", "@rollup/rollup-linux-x64-gnu": "4.60.1", "@rollup/rollup-linux-x64-musl": "4.60.1", "@rollup/rollup-openbsd-x64": "4.60.1", "@rollup/rollup-openharmony-arm64": "4.60.1", "@rollup/rollup-win32-arm64-msvc": "4.60.1", "@rollup/rollup-win32-ia32-msvc": "4.60.1", "@rollup/rollup-win32-x64-gnu": "4.60.1", "@rollup/rollup-win32-x64-msvc": "4.60.1", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-VmtB2rFU/GroZ4oL8+ZqXgSA38O6GR8KSIvWmEFv63pQ0G6KaBH9s07PO8XTXP4vI+3UJUEypOfjkGfmSBBR0w=="],
"roughjs": ["roughjs@4.6.6", "", { "dependencies": { "hachure-fill": "^0.5.2", "path-data-parser": "^0.1.0", "points-on-curve": "^0.2.0", "points-on-path": "^0.2.1" } }, "sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ=="],
"run-parallel": ["run-parallel@1.2.0", "", { "dependencies": { "queue-microtask": "^1.2.2" } }, "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA=="],
"rw": ["rw@1.3.3", "", {}, "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="],
"safer-buffer": ["safer-buffer@2.1.2", "", {}, "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="],
"scheduler": ["scheduler@0.23.2", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ=="],
"semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
@@ -961,6 +1171,8 @@
"std-env": ["std-env@3.10.0", "", {}, "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg=="],
"streamdown": ["streamdown@2.5.0", "", { "dependencies": { "clsx": "^2.1.1", "hast-util-to-jsx-runtime": "^2.3.6", "html-url-attributes": "^3.0.1", "marked": "^17.0.1", "mermaid": "^11.12.2", "rehype-harden": "^1.1.8", "rehype-raw": "^7.0.0", "rehype-sanitize": "^6.0.0", "remark-gfm": "^4.0.1", "remark-parse": "^11.0.0", "remark-rehype": "^11.1.2", "remend": "1.3.0", "tailwind-merge": "^3.4.0", "unified": "^11.0.5", "unist-util-visit": "^5.0.0", "unist-util-visit-parents": "^6.0.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" } }, "sha512-/tTnURfIOxZK/pqJAxsfCvETG/XCJHoWnk3jq9xLcuz6CSpnjjuxSRBTTL4PKGhxiZQf0lqPxGhImdpwcZ2XwA=="],
"string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
"stringify-entities": ["stringify-entities@4.0.4", "", { "dependencies": { "character-entities-html4": "^2.0.0", "character-entities-legacy": "^3.0.0" } }, "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg=="],
@@ -973,6 +1185,8 @@
"style-to-object": ["style-to-object@1.0.14", "", { "dependencies": { "inline-style-parser": "0.2.7" } }, "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw=="],
"stylis": ["stylis@4.4.0", "", {}, "sha512-5Z9ZpRzfuH6l/UAvCPAPUo3665Nk2wLaZU3x+TLHKVzIz33+sbJqbtrYoC3KD4/uVOr2Zp+L0LySezP9OHV9yA=="],
"sucrase": ["sucrase@3.35.1", "", { "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" } }, "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw=="],
"supports-preserve-symlinks-flag": ["supports-preserve-symlinks-flag@1.0.0", "", {}, "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="],
@@ -1007,6 +1221,8 @@
"ts-api-utils": ["ts-api-utils@2.5.0", "", { "peerDependencies": { "typescript": ">=4.8.4" } }, "sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA=="],
"ts-dedent": ["ts-dedent@2.3.0", "", {}, "sha512-JfJeIHke7y2egdGGgRAvpCwYFUsHlM2gPcrVOxFkznt/4uzQ7HFmvE63iFHVLBJNDuyDOQgijDK/tXH/f6Msjg=="],
"ts-interface-checker": ["ts-interface-checker@0.1.13", "", {}, "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="],
"tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
@@ -1047,6 +1263,8 @@
"util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
"uuid": ["uuid@14.0.1", "", { "bin": { "uuid": "dist-node/bin/uuid" } }, "sha512-6ZxzVpzDXDa3bJWaHilVayA+BH/1zmxCJoVgvmqJnid/gPoKHxUrS/aC/T6LGQtNHT+XHG9fXPJB4d+IrU30Ew=="],
"vfile": ["vfile@6.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "vfile-message": "^4.0.0" } }, "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q=="],
"vfile-location": ["vfile-location@5.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "vfile": "^6.0.0" } }, "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg=="],
@@ -1095,6 +1313,8 @@
"zwitch": ["zwitch@2.0.4", "", {}, "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A=="],
"@antfu/install-pkg/tinyexec": ["tinyexec@1.2.4", "", {}, "sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg=="],
"@eslint-community/eslint-utils/eslint-visitor-keys": ["eslint-visitor-keys@3.4.3", "", {}, "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag=="],
"@radix-ui/react-alert-dialog/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
@@ -1121,6 +1341,14 @@
"chokidar/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
"cytoscape-fcose/cose-base": ["cose-base@2.2.0", "", { "dependencies": { "layout-base": "^2.0.0" } }, "sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g=="],
"d3-dsv/commander": ["commander@7.2.0", "", {}, "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="],
"d3-sankey/d3-array": ["d3-array@2.12.1", "", { "dependencies": { "internmap": "^1.0.0" } }, "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ=="],
"d3-sankey/d3-shape": ["d3-shape@1.3.7", "", { "dependencies": { "d3-path": "1" } }, "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw=="],
"decode-named-character-reference/character-entities": ["character-entities@2.0.2", "", {}, "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ=="],
"fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
@@ -1141,10 +1369,14 @@
"mdast-util-mdx-jsx/parse-entities": ["parse-entities@4.0.2", "", { "dependencies": { "@types/unist": "^2.0.0", "character-entities-legacy": "^3.0.0", "character-reference-invalid": "^2.0.0", "decode-named-character-reference": "^1.0.0", "is-alphanumerical": "^2.0.0", "is-decimal": "^2.0.0", "is-hexadecimal": "^2.0.0" } }, "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw=="],
"mermaid/marked": ["marked@16.4.2", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-TI3V8YYWvkVf3KJe1dRkpnjs68JUPyEa5vjKrp1XEEJUAOaQc+Qj+L1qWbPd0SJuAdQkFU0h73sXXqwDYxsiDA=="],
"postcss-nested/postcss-selector-parser": ["postcss-selector-parser@6.1.2", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg=="],
"refractor/prismjs": ["prismjs@1.27.0", "", {}, "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA=="],
"streamdown/tailwind-merge": ["tailwind-merge@3.6.0", "", {}, "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w=="],
"stringify-entities/character-entities-legacy": ["character-entities-legacy@3.0.0", "", {}, "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ=="],
"sucrase/commander": ["commander@4.1.1", "", {}, "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="],
@@ -1157,6 +1389,12 @@
"yargs/find-up": ["find-up@4.1.0", "", { "dependencies": { "locate-path": "^5.0.0", "path-exists": "^4.0.0" } }, "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw=="],
"cytoscape-fcose/cose-base/layout-base": ["layout-base@2.0.1", "", {}, "sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg=="],
"d3-sankey/d3-array/internmap": ["internmap@1.0.1", "", {}, "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="],
"d3-sankey/d3-shape/d3-path": ["d3-path@1.0.9", "", {}, "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="],
"hast-util-from-dom/hastscript/hast-util-parse-selector": ["hast-util-parse-selector@4.0.0", "", { "dependencies": { "@types/hast": "^3.0.0" } }, "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A=="],
"hast-util-from-parse5/hastscript/hast-util-parse-selector": ["hast-util-parse-selector@4.0.0", "", { "dependencies": { "@types/hast": "^3.0.0" } }, "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A=="],
webui/package-lock.json
Generated
+1235 -26
View File
File diff suppressed because it is too large Load Diff
webui/package.json
+1 -1
View File
@@ -27,12 +27,12 @@
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-i18next": "^17.0.4",
"react-markdown": "^9.0.1",
"react-syntax-highlighter": "^15.6.1",
"rehype-katex": "^7.0.1",
"remark-breaks": "^4.0.0",
"remark-gfm": "^4.0.0",
"remark-math": "^6.0.0",
"streamdown": "2.5.0",
"tailwind-merge": "^2.6.0"
},
"devDependencies": {
webui/src/App.tsx
+133 -61
View File
@@ -1,4 +1,6 @@
import {
lazy,
Suspense,
useCallback,
useEffect,
useMemo,
@@ -9,11 +11,8 @@ import {
import { Moon, PanelLeft, ShieldCheck, Sun, X } from "lucide-react";
import { useTranslation } from "react-i18next";
import { channelUiPresentation } from "@/channel-plugins/registry";
import { DeleteConfirm } from "@/components/DeleteConfirm";
import { RenameChatDialog } from "@/components/RenameChatDialog";
import { Sidebar } from "@/components/Sidebar";
import { SessionSearchDialog } from "@/components/SessionSearchDialog";
import { SettingsView, type SettingsSectionKey } from "@/components/settings/SettingsView";
import type { SettingsSectionKey } from "@/components/settings/SettingsView";
import { ThreadShell } from "@/components/thread/ThreadShell";
import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
@@ -22,6 +21,7 @@ import { useDeferredTitleRefresh } from "@/hooks/useDeferredTitleRefresh";
import { useSidebarState } from "@/hooks/useSidebarState";
import { useSkills } from "@/hooks/useSkills";
import { useLogoFallback } from "@/hooks/useLogoFallback";
import { usePageVisibility } from "@/hooks/usePageVisibility";
import { ThemeProvider, useTheme } from "@/hooks/useTheme";
import { logoFallbackUrls } from "@/lib/provider-brand";
import { cn } from "@/lib/utils";
@@ -88,6 +88,7 @@ const MOBILE_SIDEBAR_WIDTH = `min(${SIDEBAR_WIDTH}px, calc(100vw - 0.75rem))`;
const TOKEN_REFRESH_MARGIN_MS = 30_000;
const TOKEN_REFRESH_MIN_DELAY_MS = 5_000;
const PAIRING_POLL_INTERVAL_MS = 5_000;
const PAIRING_IDLE_POLL_INTERVAL_MS = 15_000;
const PAIRING_DISMISS_SNOOZE_MS = 30_000;
type ShellView = "chat" | "settings" | "apps" | "automations" | "skills";
type ShellRoute = {
@@ -96,6 +97,39 @@ type ShellRoute = {
settingsSection: SettingsSectionKey;
};
const loadSettingsView = () => import("@/components/settings/SettingsView");
const SettingsView = lazy(async () => {
const module = await loadSettingsView();
return { default: module.SettingsView };
});
const SessionSearchDialog = lazy(async () => {
const module = await import("@/components/SessionSearchDialog");
return { default: module.SessionSearchDialog };
});
const DeleteConfirm = lazy(async () => {
const module = await import("@/components/DeleteConfirm");
return { default: module.DeleteConfirm };
});
const RenameChatDialog = lazy(async () => {
const module = await import("@/components/RenameChatDialog");
return { default: module.RenameChatDialog };
});
function SurfaceLoadingFallback() {
return (
<div
aria-busy="true"
className="flex h-full w-full flex-col gap-5 px-5 py-8 sm:px-8 lg:px-12"
>
<span className="sr-only">Loading</span>
<div className="h-4 w-20 animate-pulse rounded bg-muted/70 motion-reduce:animate-none" />
<div className="h-9 w-48 animate-pulse rounded bg-muted/70 motion-reduce:animate-none" />
<div className="mt-4 h-12 w-full max-w-3xl animate-pulse rounded-md bg-muted/55 motion-reduce:animate-none" />
<div className="h-28 w-full max-w-3xl animate-pulse rounded-md bg-muted/40 motion-reduce:animate-none" />
</div>
);
}
const SETTINGS_SECTION_KEYS: SettingsSectionKey[] = [
"overview",
"appearance",
@@ -952,6 +986,7 @@ function Shell({
const [updatedChatIds, setUpdatedChatIds] = useState<Set<string>>(readSessionUpdateChatIds);
const [workspaces, setWorkspaces] = useState<WorkspacesPayload | null>(null);
const skills = useSkills(token);
const pageVisible = usePageVisibility();
const [settingsSnapshot, setSettingsSnapshot] = useState<SettingsPayload | null>(null);
const [workspaceError, setWorkspaceError] = useState<string | null>(null);
const [draftWorkspaceScope, setDraftWorkspaceScope] =
@@ -1020,7 +1055,7 @@ function Shell({
writeSessionUpdateChatIds(updatedChatIds);
}, [updatedChatIds]);
const refreshPairingRequests = useCallback(async () => {
const refreshPairingRequests = useCallback(async (): Promise<number> => {
try {
const payload = await fetchPairingRequests(token);
const requests = Array.isArray(payload.requests) ? payload.requests : [];
@@ -1036,19 +1071,33 @@ function Shell({
);
return next.size === current.size ? current : next;
});
return requests.length;
} catch {
// Pairing is an opportunistic WebUI affordance. The slash command path
// remains available if this polling request fails.
return 0;
}
}, [token]);
useEffect(() => {
void refreshPairingRequests();
const timer = window.setInterval(() => {
void refreshPairingRequests();
}, PAIRING_POLL_INTERVAL_MS);
return () => window.clearInterval(timer);
}, [refreshPairingRequests]);
if (!pageVisible) return undefined;
let disposed = false;
let timer: number | null = null;
const poll = async () => {
const requestCount = await refreshPairingRequests();
if (disposed) return;
timer = window.setTimeout(
() => void poll(),
requestCount > 0 ? PAIRING_POLL_INTERVAL_MS : PAIRING_IDLE_POLL_INTERVAL_MS,
);
};
void poll();
return () => {
disposed = true;
if (timer !== null) window.clearTimeout(timer);
};
}, [pageVisible, refreshPairingRequests]);
const activeSession = useMemo<ChatSummary | null>(() => {
if (!activeKey) return null;
@@ -1578,6 +1627,10 @@ function Shell({
setMobileSidebarOpen(false);
}, [activeKey, navigate]);
const onSettingsIntent = useCallback(() => {
void loadSettingsView();
}, []);
const onOpenModelSettings = useCallback(() => {
onOpenSettings("models");
}, [onOpenSettings]);
@@ -1849,6 +1902,7 @@ function Shell({
onOpenApps,
onOpenAutomations,
onOpenSkills,
onSettingsIntent,
onOpenSearch: onOpenSessionSearch,
activeUtility: view === "apps" || view === "automations" || view === "skills" ? view : null,
onToggleArchived,
@@ -1992,15 +2046,19 @@ function Shell({
</Sheet>
) : null}
<SessionSearchDialog
open={sessionSearchOpen}
onOpenChange={setSessionSearchOpen}
sessions={sessions}
activeKey={activeKey}
loading={loading}
titleOverrides={sidebarState.title_overrides}
onSelect={onSelectSearchResult}
/>
{sessionSearchOpen ? (
<Suspense fallback={null}>
<SessionSearchDialog
open
onOpenChange={setSessionSearchOpen}
sessions={sessions}
activeKey={activeKey}
loading={loading}
titleOverrides={sidebarState.title_overrides}
onSelect={onSelectSearchResult}
/>
</Suspense>
) : null}
<main
className={cn(
"relative flex h-full min-w-0 flex-1 flex-col overflow-hidden bg-background",
@@ -2009,7 +2067,7 @@ function Shell({
<div
className={cn(
"absolute inset-0 flex flex-col",
view !== "chat" && "invisible pointer-events-none",
view !== "chat" && "hidden",
)}
>
<ThreadShell
@@ -2038,51 +2096,65 @@ function Shell({
</div>
{view !== "chat" && (
<div className="absolute inset-0 flex flex-col">
<SettingsView
theme={theme}
initialSection={settingsInitialSection}
initialSettings={settingsSnapshot}
showSidebar={view === "settings"}
onToggleTheme={toggle}
onBackToChat={onBackToChat}
onModelNameChange={onModelNameChange}
onSettingsChange={setSettingsSnapshot}
skills={skills}
onWorkspaceSettingsChange={refreshWorkspaces}
onSectionChange={onSettingsSectionChange}
onLogout={onLogout}
onRestart={onRestart}
onNativeEngineRestart={onNativeEngineRestart}
isRestarting={isRestarting}
hostChromeInset={showHostChrome}
/>
<Suspense fallback={<SurfaceLoadingFallback />}>
<SettingsView
theme={theme}
initialSection={settingsInitialSection}
initialSettings={settingsSnapshot}
showSidebar={view === "settings"}
onToggleTheme={toggle}
onBackToChat={onBackToChat}
onModelNameChange={onModelNameChange}
onSettingsChange={setSettingsSnapshot}
skills={skills}
onWorkspaceSettingsChange={refreshWorkspaces}
onSectionChange={onSettingsSectionChange}
onLogout={onLogout}
onRestart={onRestart}
onNativeEngineRestart={onNativeEngineRestart}
isRestarting={isRestarting}
hostChromeInset={showHostChrome}
/>
</Suspense>
</div>
)}
</main>
</div>
<DeleteConfirm
open={!!pendingDelete}
title={pendingDelete?.label ?? ""}
automations={pendingDelete?.automations}
onCancel={() => setPendingDelete(null)}
onConfirm={onConfirmDelete}
/>
<RenameChatDialog
open={!!pendingRename}
title={pendingRename?.label ?? ""}
onCancel={() => setPendingRename(null)}
onConfirm={onConfirmRename}
/>
<RenameChatDialog
open={!!pendingProjectRename}
title={pendingProjectRename?.label ?? ""}
dialogTitle={t("chat.renameProjectTitle")}
description={t("chat.renameProjectDescription")}
placeholder={t("chat.renameProjectPlaceholder")}
onCancel={() => setPendingProjectRename(null)}
onConfirm={onConfirmProjectRename}
/>
{pendingDelete ? (
<Suspense fallback={null}>
<DeleteConfirm
open
title={pendingDelete.label}
automations={pendingDelete.automations}
onCancel={() => setPendingDelete(null)}
onConfirm={onConfirmDelete}
/>
</Suspense>
) : null}
{pendingRename ? (
<Suspense fallback={null}>
<RenameChatDialog
open
title={pendingRename.label}
onCancel={() => setPendingRename(null)}
onConfirm={onConfirmRename}
/>
</Suspense>
) : null}
{pendingProjectRename ? (
<Suspense fallback={null}>
<RenameChatDialog
open
title={pendingProjectRename.label}
dialogTitle={t("chat.renameProjectTitle")}
description={t("chat.renameProjectDescription")}
placeholder={t("chat.renameProjectPlaceholder")}
onCancel={() => setPendingProjectRename(null)}
onConfirm={onConfirmProjectRename}
/>
</Suspense>
) : null}
{restartToast ? (
<div
role="status"
webui/src/components/AttachmentTile.tsx
+1 -1
View File
@@ -61,7 +61,7 @@ export function AttachmentTile({ attachment, className, inline = false, variant
<video
src={attachment.url}
controls
preload="auto"
preload="metadata"
className={cn(
"block w-full bg-black",
variant === "compact" ? "max-h-40" : "max-h-[26rem]",
webui/src/components/MarkdownText.tsx
+20 -82
View File
@@ -3,12 +3,7 @@ import {
Suspense,
lazy,
memo,
startTransition,
useCallback,
useEffect,
useLayoutEffect,
useRef,
useState,
type ReactNode,
} from "react";
@@ -28,17 +23,20 @@ const MemoizedMarkdownRenderer = memo(function MemoizedMarkdownRenderer({
source,
className,
highlightCode,
streaming,
onOpenFilePreview,
}: {
source: string;
className?: string;
highlightCode: boolean;
streaming: boolean;
onOpenFilePreview?: (path: string) => void;
}) {
return (
<LazyMarkdownRenderer
className={className}
highlightCode={highlightCode}
streaming={streaming}
onOpenFilePreview={onOpenFilePreview}
>
{source}
@@ -46,13 +44,8 @@ const MemoizedMarkdownRenderer = memo(function MemoizedMarkdownRenderer({
);
});
const SHORT_STREAM_COMMIT_MS = 80;
const MEDIUM_STREAM_COMMIT_MS = 140;
const LONG_STREAM_COMMIT_MS = 220;
const STREAMING_HIGHLIGHT_CHAR_LIMIT = 16_000;
class MarkdownRendererBoundary extends Component<
{ children: ReactNode; fallback: ReactNode },
{ children: ReactNode; fallback: ReactNode; resetKey: string },
{ failed: boolean }
> {
state = { failed: false };
@@ -61,39 +54,41 @@ class MarkdownRendererBoundary extends Component<
return { failed: true };
}
componentDidUpdate(previous: Readonly<{ resetKey: string }>) {
if (this.state.failed && previous.resetKey !== this.props.resetKey) {
this.setState({ failed: false });
}
}
render() {
return this.state.failed ? this.props.fallback : this.props.children;
}
}
export function preloadMarkdownText(): void {
void loadMarkdownRenderer();
export function preloadMarkdownText(): Promise<void> {
return loadMarkdownRenderer().then(() => undefined);
}
/**
* Lightweight markdown renderer mirroring agent-chat-ui: GFM + math via
* ``remark-math`` / ``rehype-katex``, and fenced code blocks delegated to
* ``CodeBlock`` for copy-to-clipboard and syntax highlighting.
*/
/** Lazy boundary for the heavier GFM, math, and code renderer. */
export function MarkdownText({
children,
className,
streaming = false,
onOpenFilePreview,
}: MarkdownTextProps) {
const renderedSource = useStreamingMarkdownSource(children, streaming);
const highlightCode = streaming
? renderedSource.length <= STREAMING_HIGHLIGHT_CHAR_LIMIT
: renderedSource === children;
const renderedSource = children;
const renderPhase = streaming ? "streaming" : "complete";
const highlightCode = !streaming;
useEffect(() => {
if (streaming) preloadMarkdownText();
if (streaming) void preloadMarkdownText();
}, [streaming]);
const plainFallback = (
<div
className={cn(
"whitespace-pre-wrap break-words leading-relaxed text-foreground/92",
streaming && "streaming-text-fallback",
className,
)}
>
@@ -102,73 +97,16 @@ export function MarkdownText({
);
return (
<MarkdownRendererBoundary fallback={plainFallback}>
<MarkdownRendererBoundary resetKey={renderPhase} fallback={plainFallback}>
<Suspense fallback={plainFallback}>
<MemoizedMarkdownRenderer
source={renderedSource}
className={className}
highlightCode={highlightCode}
streaming={streaming}
onOpenFilePreview={onOpenFilePreview}
/>
</Suspense>
</MarkdownRendererBoundary>
);
}
function useStreamingMarkdownSource(source: string, streaming: boolean): string {
const [renderedSource, setRenderedSource] = useState(source);
const latestSourceRef = useRef(source);
const renderedSourceRef = useRef(source);
const timerRef = useRef<number | null>(null);
const clearPendingCommit = useCallback(() => {
if (timerRef.current !== null) {
window.clearTimeout(timerRef.current);
timerRef.current = null;
}
}, []);
const commitSource = useCallback((next: string, urgent: boolean) => {
if (renderedSourceRef.current === next) return;
renderedSourceRef.current = next;
if (urgent) {
setRenderedSource(next);
return;
}
startTransition(() => setRenderedSource(next));
}, []);
const scheduleCommit = useCallback(() => {
if (timerRef.current !== null) return;
timerRef.current = window.setTimeout(() => {
timerRef.current = null;
commitSource(latestSourceRef.current, false);
}, streamingCommitDelay(latestSourceRef.current.length));
}, [commitSource]);
latestSourceRef.current = source;
useLayoutEffect(() => {
latestSourceRef.current = source;
if (!streaming) {
clearPendingCommit();
commitSource(source, true);
}
}, [clearPendingCommit, commitSource, source, streaming]);
useEffect(() => {
latestSourceRef.current = source;
if (!streaming) return;
scheduleCommit();
}, [scheduleCommit, source, streaming]);
useEffect(() => clearPendingCommit, [clearPendingCommit]);
return renderedSource;
}
function streamingCommitDelay(length: number): number {
if (length > 24_000) return LONG_STREAM_COMMIT_MS;
if (length > 8_000) return MEDIUM_STREAM_COMMIT_MS;
return SHORT_STREAM_COMMIT_MS;
}
webui/src/components/MarkdownTextRenderer.tsx
+120 -34
View File
@@ -6,13 +6,13 @@ import {
useState,
type ReactNode,
} from "react";
import type { Components, Options as ReactMarkdownOptions } from "react-markdown";
import ReactMarkdown from "react-markdown";
import { useTranslation } from "react-i18next";
import rehypeKatex from "rehype-katex";
import { Check, Globe2 } from "lucide-react";
import remarkBreaks from "remark-breaks";
import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";
import { Streamdown, type Components, type StreamdownProps } from "streamdown";
import { AttachmentTile } from "@/components/AttachmentTile";
import { CodeBlock } from "@/components/CodeBlock";
@@ -27,16 +27,18 @@ import {
} from "@/components/FileReferenceChip";
import { useLogoFallback } from "@/hooks/useLogoFallback";
import { inferMediaKind } from "@/lib/media";
import { faviconUrls } from "@/lib/provider-brand";
import { browserSafeFaviconUrls } from "@/lib/provider-brand";
import { remarkTexMath } from "@/lib/remark-tex-math";
import { cn } from "@/lib/utils";
import "katex/dist/katex.min.css";
import "streamdown/styles.css";
interface MarkdownTextRendererProps {
children: string;
className?: string;
highlightCode?: boolean;
streaming?: boolean;
onOpenFilePreview?: (path: string) => void;
}
@@ -235,18 +237,45 @@ function remarkSafeHtmlSubset() {
};
}
const remarkPlugins: NonNullable<ReactMarkdownOptions["remarkPlugins"]> = [
const remarkPlugins: NonNullable<StreamdownProps["remarkPlugins"]> = [
remarkBreaks,
remarkGfm,
[remarkMath, { singleDollarTextMath: false }],
remarkTexMath,
remarkSafeHtmlSubset,
];
const rehypePlugins: NonNullable<ReactMarkdownOptions["rehypePlugins"]> = [rehypeKatex];
const rehypePlugins: NonNullable<StreamdownProps["rehypePlugins"]> = [rehypeKatex];
const DIRECT_LINKS = { enabled: false } as const;
const SAFE_MARKDOWN_PROTOCOL = /^(https?|ircs?|mailto|xmpp)$/i;
const STREAMING_ANIMATION = {
animation: "fadeIn",
duration: 180,
easing: "cubic-bezier(0.16, 1, 0.3, 1)",
sep: "word",
stagger: 18,
} as const;
/** Preserve react-markdown's URL policy when rendering through Streamdown. */
const safeMarkdownUrl: NonNullable<StreamdownProps["urlTransform"]> = (url) => {
const colon = url.indexOf(":");
const questionMark = url.indexOf("?");
const hash = url.indexOf("#");
const slash = url.indexOf("/");
const relative = colon === -1
|| (slash !== -1 && colon > slash)
|| (questionMark !== -1 && colon > questionMark)
|| (hash !== -1 && colon > hash);
return relative || SAFE_MARKDOWN_PROTOCOL.test(url.slice(0, colon)) ? url : "";
};
function nodeText(value: ReactNode): string {
return Children.toArray(value)
.map((child) => (typeof child === "string" || typeof child === "number" ? String(child) : ""))
.map((child) => {
if (typeof child === "string" || typeof child === "number") return String(child);
if (!isValidElement<{ children?: ReactNode }>(child)) return "";
return nodeText(child.props.children);
})
.join("");
}
@@ -272,7 +301,7 @@ function cleanFileReferenceTarget(value: string): string {
function isPreviewableFileTarget(value: string): boolean {
if (isFilePatternReference(value)) return false;
if (isLikelyFilePath(value)) return true;
if (/^[a-z][a-z0-9+.-]*:\/\//i.test(value)) return false;
if (/^[a-z][a-z0-9+.-]*:/i.test(value)) return false;
if (/[\\/]/.test(value)) return false;
return /^[^?#]+\.[a-z0-9][a-z0-9_-]{0,12}$/i.test(value);
}
@@ -382,6 +411,8 @@ function InlineLinkPreviewRow({ link }: { link: InlineLinkPreview }) {
className="h-3 w-3 rounded-[2px] object-contain"
decoding="async"
loading="lazy"
referrerPolicy="no-referrer"
draggable={false}
onLoad={onFaviconLoad}
onError={onFaviconError}
/>
@@ -397,7 +428,7 @@ function InlineLinkPreviewRow({ link }: { link: InlineLinkPreview }) {
}
function useFaviconFallback(host: string) {
const faviconCandidates = useMemo(() => faviconUrls(host), [host]);
const faviconCandidates = useMemo(() => browserSafeFaviconUrls(host), [host]);
const { logoUrl, onLogoError, onLogoLoad } = useLogoFallback(faviconCandidates);
return {
@@ -433,11 +464,14 @@ export default function MarkdownTextRenderer({
children,
className,
highlightCode = true,
streaming = false,
onOpenFilePreview,
}: MarkdownTextRendererProps) {
const { t } = useTranslation();
const components = useMemo<Components>(
() => ({
code({ className: cls, children: kids, ...props }) {
code({ className: cls, children: kids, node: _node, ...props }) {
void _node;
const match = /language-(\w+)/.exec(cls || "");
if (match) {
const code = String(kids).replace(/\n$/, "");
@@ -447,6 +481,7 @@ export default function MarkdownTextRenderer({
code={code}
className="my-3"
highlight={highlightCode}
showLineNumbers={code.includes("\n")}
/>
);
}
@@ -502,6 +537,7 @@ export default function MarkdownTextRenderer({
code={fence.code}
className="my-3"
highlight={highlightCode}
showLineNumbers={fence.code.includes("\n")}
/>
);
}
@@ -517,7 +553,14 @@ export default function MarkdownTextRenderer({
</pre>
);
},
a({ href, children: markdownChildren, ...props }) {
a({ href, children: markdownChildren, node: _node, ...props }) {
void _node;
if (!href) {
return <>{markdownChildren}</>;
}
if (href === "streamdown:incomplete-link") {
return <>{markdownChildren}</>;
}
const filePath = fileReferenceFromLink(href);
if (filePath) {
const label = nodeText(markdownChildren).trim();
@@ -545,15 +588,49 @@ export default function MarkdownTextRenderer({
</a>
);
},
table({ children, ...props }) {
// Wrap wide markdown tables in a horizontal-scroll container (the
// pattern used by DeepSeek/others) so a 6+ column table scrolls inside
// the conversation column instead of forcing the page wider than 100vw.
// min-w-max keeps natural column widths; w-full stretches narrow tables.
// Streamdown decorates emphasis with spans by default. Preserve native
// semantics for accessibility and predictable typography.
strong({ children: markdownChildren, node: _node, ...props }) {
void _node;
return <strong {...props}>{markdownChildren}</strong>;
},
em({ children: markdownChildren, node: _node, ...props }) {
void _node;
return <em {...props}>{markdownChildren}</em>;
},
del({ children: markdownChildren, node: _node, ...props }) {
void _node;
return <del {...props}>{markdownChildren}</del>;
},
table({ children: tableChildren, node: _node, ...props }) {
void _node;
return (
<div className="w-full overflow-x-auto">
<table className="w-full min-w-max" {...props}>
{children}
<div
data-testid="markdown-data-table"
data-table-kind="data"
role="region"
tabIndex={0}
aria-label={t("message.dataTable", { defaultValue: "Data table" })}
className={cn(
"not-prose mb-5 mt-3 w-full max-w-full overflow-x-auto rounded-lg",
"border border-border/65 bg-muted/20",
"overscroll-x-contain focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
)}
>
<table
className={cn(
"w-full min-w-max border-collapse text-[13px] leading-5",
"[&_thead]:bg-muted/45 [&_thead]:text-muted-foreground",
"[&_th]:border-b [&_th]:border-border/65 [&_th]:px-3 [&_th]:py-2",
"[&_th]:text-left [&_th]:font-medium",
"[&_td]:border-b [&_td]:border-border/55 [&_td]:px-3 [&_td]:py-2",
"[&_th:not(:last-child)]:border-r [&_th:not(:last-child)]:border-border/45",
"[&_td:not(:last-child)]:border-r [&_td:not(:last-child)]:border-border/45",
"[&_tbody_tr:last-child_td]:border-b-0",
)}
{...props}
>
{tableChildren}
</table>
</div>
);
@@ -567,8 +644,14 @@ export default function MarkdownTextRenderer({
</li>
);
}
const taskItem = itemClassName?.includes("task-list-item");
return (
<li className={itemClassName}>
<li
className={cn(
itemClassName,
taskItem && "flex min-w-0 items-start gap-2 text-[13px] leading-5 [&>p]:m-0",
)}
>
{markdownChildren}
</li>
);
@@ -579,10 +662,11 @@ export default function MarkdownTextRenderer({
<span
aria-hidden
data-testid="markdown-task-checkbox"
data-task-checked={checked ? "true" : "false"}
className={cn(
"mr-2 inline-grid h-4 w-4 translate-y-[2px] place-items-center rounded-[4px]",
"border border-border/70 bg-muted/55 text-background",
checked && "border-foreground/55 bg-foreground/65",
"mt-0.5 inline-grid h-4 w-4 shrink-0 place-items-center rounded-full",
"border border-dashed border-muted-foreground/55 bg-background text-background",
checked && "border-solid border-emerald-500 bg-emerald-500 text-white",
)}
>
{checked ? <Check className="h-3 w-3 stroke-[3]" /> : null}
@@ -636,11 +720,21 @@ export default function MarkdownTextRenderer({
);
},
}),
[highlightCode, onOpenFilePreview],
[highlightCode, onOpenFilePreview, t],
);
return (
<div
<Streamdown
mode={streaming ? "streaming" : "static"}
parseIncompleteMarkdown
isAnimating={streaming}
animated={streaming ? STREAMING_ANIMATION : false}
caret={streaming ? "block" : undefined}
linkSafety={DIRECT_LINKS}
urlTransform={safeMarkdownUrl}
remarkPlugins={remarkPlugins}
rehypePlugins={rehypePlugins}
components={components}
className={cn(
"markdown-content prose max-w-none dark:prose-invert",
"prose-headings:mt-4 prose-headings:mb-2 prose-headings:font-semibold prose-headings:tracking-tight",
@@ -653,18 +747,10 @@ export default function MarkdownTextRenderer({
"prose-hr:my-6",
"prose-pre:my-0 prose-pre:bg-transparent prose-pre:p-0",
"prose-code:before:content-none prose-code:after:content-none prose-code:font-normal",
"prose-table:my-3 prose-th:text-left prose-th:font-medium",
className,
)}
style={{ lineHeight: "var(--cjk-line-height)" }}
>
<ReactMarkdown
remarkPlugins={remarkPlugins}
rehypePlugins={rehypePlugins}
components={components}
>
{children}
</ReactMarkdown>
</div>
{children}
</Streamdown>
);
}
webui/src/components/MessageBubble.tsx
+25 -131
View File
@@ -12,15 +12,15 @@ import {
Clock3,
Copy,
ImageIcon,
Sparkles,
Wrench,
} from "lucide-react";
import { useTranslation } from "react-i18next";
import { AttachmentTile } from "@/components/AttachmentTile";
import { ImageLightbox } from "@/components/ImageLightbox";
import { MarkdownText, preloadMarkdownText } from "@/components/MarkdownText";
import { MarkdownText } from "@/components/MarkdownText";
import { SlashCommandText } from "@/components/SlashCommandText";
import { ReasoningRow } from "@/components/thread/activity/ReasoningRow";
import { UserMessageText } from "@/components/UserMessageText";
import {
Tooltip,
@@ -111,7 +111,7 @@ function MessageCopyButton({ content }: { content: string }) {
onClick={onCopy}
aria-label={label}
className={cn(
"inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full",
"touch-target inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full",
"transition-colors hover:bg-muted/55 hover:text-foreground",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
)}
@@ -128,15 +128,7 @@ function MessageCopyButton({ content }: { content: string }) {
);
}
/**
* Render a single message. Following agent-chat-ui: user turns are a rounded
* "pill" right-aligned with a muted fill; assistant turns render as bare
* markdown so prose/code read like a document rather than a chat bubble.
* Each turn fades+slides in for a touch of motion polish.
*
* Trace rows (tool-call hints, progress breadcrumbs) render as a subdued
* collapsible group so intermediate steps never masquerade as replies.
*/
/** Render user turns as compact bubbles and assistant turns as document-like prose. */
export function MessageBubble({
message,
showCopyAction = true,
@@ -250,11 +242,10 @@ export function MessageBubble({
text={reasoning}
streaming={reasoningStreaming}
hasBodyBelow={!empty}
onOpenFilePreview={onOpenFilePreview}
/>
) : null}
{empty && message.isStreaming && !hasReasoning ? (
<TypingDots />
<ThinkingState />
) : empty && message.isStreaming ? null : (
<>
{automationSourceLabel ? (
@@ -263,12 +254,14 @@ export function MessageBubble({
triggerLabel={automationTriggeredLabel}
/>
) : null}
<MarkdownText
streaming={!!message.isStreaming}
onOpenFilePreview={onOpenFilePreview}
>
{message.content}
</MarkdownText>
<div data-assistant-selectable={message.isStreaming ? undefined : "true"}>
<MarkdownText
streaming={!!message.isStreaming}
onOpenFilePreview={onOpenFilePreview}
>
{message.content}
</MarkdownText>
</div>
{media.length > 0 ? <MessageMedia media={media} align="left" /> : null}
{showAssistantFooterRow ? (
<TooltipProvider delayDuration={220} skipDelayDuration={80}>
@@ -284,7 +277,7 @@ export function MessageBubble({
onClick={onForkFromHere}
aria-label={forkLabel}
className={cn(
"inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full",
"touch-target inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full",
"transition-colors hover:bg-muted/55 hover:text-foreground",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
)}
@@ -433,10 +426,6 @@ function MessageMedia({
/**
* Right-aligned preview row for images attached to a user turn.
*
* Visual follows agent-chat-ui: a single wrapping row of fixed-size square
* thumbnails that stay modest next to the text pill regardless of how many
* images are attached.
*
* The URL is expected to be a self-contained ``data:`` URL (the Composer
* hands the normalized base64 payload to the optimistic bubble so that the
* preview survives React StrictMode double-mount — blob URLs would be
@@ -570,33 +559,21 @@ function UserImageCell({
);
}
/** Pre-token-arrival placeholder: three bouncing dots. */
function TypingDots() {
/** Quiet pre-token state that occupies a stable line in the answer column. */
function ThinkingState() {
const { t } = useTranslation();
return (
<span
aria-label={t("message.assistantTyping")}
className="inline-flex items-center gap-1 py-1"
className="inline-flex min-h-7 items-center py-1 text-[13px]"
>
<Dot delay="0ms" />
<Dot delay="150ms" />
<Dot delay="300ms" />
<StreamingLabelSheen active>
{t("message.reasoningStreaming", { defaultValue: "Thinking…" })}
</StreamingLabelSheen>
</span>
);
}
function Dot({ delay }: { delay: string }) {
return (
<span
style={{ animationDelay: delay }}
className={cn(
"inline-block h-1.5 w-1.5 rounded-full bg-muted-foreground/60",
"animate-bounce",
)}
/>
);
}
/** L→R sheen on the glyphs themselves; inactive labels stay solid muted text. */
export function StreamingLabelSheen({
children,
@@ -630,105 +607,22 @@ interface ReasoningBubbleProps {
text: string;
streaming: boolean;
hasBodyBelow: boolean;
/** When true, skip the slide-in wrapper (used inside ``AgentActivityCluster``). */
embeddedInCluster?: boolean;
onOpenFilePreview?: (path: string) => void;
}
/**
* Subordinate "thinking" trace shown above an assistant turn.
*
* Lifecycle:
* - While ``streaming`` is true (``reasoning_delta`` frames still arriving),
* the bubble defaults to open and the header shows a sheen + pulse so
* the user sees the model "thinking out loud" in real time.
* - Expanded reasoning uses the same Markdown pipeline as assistant replies
* (deferred while streaming to reduce parser thrash), so headings and
* emphasis render instead of leaking raw ``###`` / ``**``.
* - On ``reasoning_end`` the bubble auto-collapses for prose density —
* the user can re-expand to inspect the chain of thought. The local
* toggle persists once the user interacts.
*/
export function ReasoningBubble({
text,
streaming,
hasBodyBelow,
embeddedInCluster = false,
onOpenFilePreview,
}: ReasoningBubbleProps) {
const { t } = useTranslation();
const [userToggled, setUserToggled] = useState(false);
const [openLocal, setOpenLocal] = useState(true);
const open = userToggled ? openLocal : streaming;
const onToggle = () => {
setUserToggled(true);
setOpenLocal((v) => (userToggled ? !v : !open));
};
useEffect(() => {
if (open && text.length > 0) {
preloadMarkdownText();
}
}, [open, text.length]);
return (
<div
<ReasoningRow
text={text}
streaming={streaming}
className={cn(
"w-full",
!embeddedInCluster && "animate-in fade-in-0 slide-in-from-top-1 duration-200",
"animate-in fade-in-0 slide-in-from-top-1 duration-200",
hasBodyBelow && "mb-2",
)}
>
<button
type="button"
onClick={onToggle}
className={cn(
"group flex w-full items-center gap-2 rounded-md px-2 py-1.5",
"text-xs text-muted-foreground transition-colors hover:bg-muted/45",
)}
aria-expanded={open}
aria-live={streaming ? "polite" : undefined}
>
<Sparkles
className={cn("h-3.5 w-3.5", streaming && "animate-pulse")}
aria-hidden
/>
<StreamingLabelSheen active={streaming} className="min-w-0 flex-1 text-left">
{streaming
? t("message.reasoningStreaming", { defaultValue: "Thinking…" })
: t("message.reasoning", { defaultValue: "Thinking" })}
</StreamingLabelSheen>
<ChevronRight
aria-hidden
className={cn(
"ml-auto h-3.5 w-3.5 transition-transform duration-200",
open && "rotate-90",
)}
/>
</button>
{open && text.length > 0 && (
<div
className={cn(
"mt-1 min-w-0 border-l border-muted-foreground/20 pl-3",
!embeddedInCluster && "animate-in fade-in-0 slide-in-from-top-1 duration-200",
)}
>
<MarkdownText
streaming={streaming}
onOpenFilePreview={onOpenFilePreview}
className={cn(
"text-[12.5px] italic text-muted-foreground/88",
"prose-p:my-1.5 prose-li:my-0.5",
"prose-headings:mt-2 prose-headings:mb-1 prose-headings:font-medium",
"prose-headings:text-muted-foreground/92 prose-strong:text-muted-foreground",
"prose-h1:text-[15px] prose-h2:text-[13.5px] prose-h3:text-[12.5px] prose-h4:text-[12px]",
"prose-a:text-blue-500 prose-a:underline hover:prose-a:text-blue-600 dark:prose-a:text-blue-300 dark:hover:prose-a:text-blue-200",
"prose-code:text-[0.92em]",
)}
>
{text}
</MarkdownText>
</div>
)}
</div>
/>
);
}
webui/src/components/Sidebar.tsx
+10 -1
View File
@@ -37,6 +37,7 @@ interface SidebarProps {
onOpenApps: () => void;
onOpenSkills: () => void;
onOpenAutomations: () => void;
onSettingsIntent?: () => void;
onOpenSearch: () => void;
activeUtility?: "apps" | "skills" | "automations" | null;
onToggleArchived: () => void;
@@ -156,6 +157,7 @@ export function Sidebar(props: SidebarProps) {
collapsed={collapsed}
label={t("sidebar.apps")}
onClick={props.onOpenApps}
onIntent={props.onSettingsIntent}
active={props.activeUtility === "apps"}
icon={<Blocks className="h-4 w-4" />}
/>
@@ -163,6 +165,7 @@ export function Sidebar(props: SidebarProps) {
collapsed={collapsed}
label={t("sidebar.skills.title")}
onClick={props.onOpenSkills}
onIntent={props.onSettingsIntent}
active={props.activeUtility === "skills"}
icon={<Brain className="h-4 w-4" />}
/>
@@ -170,6 +173,7 @@ export function Sidebar(props: SidebarProps) {
collapsed={collapsed}
label={t("sidebar.automations", { defaultValue: "Automations" })}
onClick={props.onOpenAutomations}
onIntent={props.onSettingsIntent}
active={props.activeUtility === "automations"}
icon={<CalendarClock className="h-4 w-4" />}
/>
@@ -231,6 +235,7 @@ export function Sidebar(props: SidebarProps) {
collapsed={collapsed}
label={t("sidebar.settings")}
onClick={props.onOpenSettings}
onIntent={props.onSettingsIntent}
className={collapsed ? undefined : "flex-1"}
icon={<Settings className="h-4 w-4" />}
/>
@@ -249,6 +254,7 @@ function SidebarActionButton({
className,
shortcut,
ariaKeyShortcuts,
onIntent,
}: {
collapsed: boolean;
label: string;
@@ -258,6 +264,7 @@ function SidebarActionButton({
className?: string;
shortcut?: string;
ariaKeyShortcuts?: string;
onIntent?: () => void;
}) {
const title = shortcut ? `${label} (${shortcut})` : collapsed ? label : undefined;
@@ -270,8 +277,10 @@ function SidebarActionButton({
aria-keyshortcuts={ariaKeyShortcuts}
title={title}
onClick={() => onClick()}
onFocus={onIntent}
onPointerEnter={onIntent}
className={cn(
"group h-8 min-w-0 gap-2 overflow-hidden rounded-full font-medium text-sidebar-foreground/85 hover:bg-sidebar-accent/75 hover:text-sidebar-foreground",
"touch-target group h-8 min-w-0 gap-2 overflow-hidden rounded-full font-medium text-sidebar-foreground/85 hover:bg-sidebar-accent/75 hover:text-sidebar-foreground",
"transition-[width,padding,border-radius,color,background-color] duration-300 ease-out",
collapsed
? "w-9 justify-center gap-0 rounded-xl px-0"
webui/src/components/settings/SettingsView.tsx
+65 -37
View File
@@ -143,7 +143,9 @@ import { notifyMcpPresetsChanged } from "@/lib/mcp-preset-events";
import { fmtDateTime, relativeTime } from "@/lib/format";
import { useLogoFallback } from "@/hooks/useLogoFallback";
import { useMediaQuery } from "@/hooks/useMediaQuery";
import { usePageVisibility } from "@/hooks/usePageVisibility";
import {
isGenericRepositoryLogoUrl,
logoFallbackUrls,
providerBrand,
providerDisplayLabel,
@@ -538,6 +540,7 @@ export function SettingsView({
}: SettingsViewProps) {
const { t } = useTranslation();
const { token } = useClient();
const pageVisible = usePageVisibility();
const [settings, setSettings] = useState<SettingsPayload | null>(() => initialSettings);
const [cliApps, setCliApps] = useState<CliAppsPayload | null>(null);
const [nanobotFeatures, setNanobotFeatures] = useState<NanobotFeaturesPayload | null>(null);
@@ -584,7 +587,7 @@ export function SettingsView({
const [cliAppsError, setCliAppsError] = useState<string | null>(null);
const [nanobotFeaturesError, setNanobotFeaturesError] = useState<string | null>(null);
const [cliAppsFocusName, setCliAppsFocusName] = useState<string | null>(null);
const [appsKindFilter, setAppsKindFilter] = useState<AppsKindFilter>("ready");
const [appsKindFilter, setAppsKindFilter] = useState<AppsKindFilter>("cli");
const [mcpMessage, setMcpMessage] = useState<string | null>(null);
const [mcpError, setMcpError] = useState<string | null>(null);
const [automationsError, setAutomationsError] = useState<string | null>(null);
@@ -685,7 +688,7 @@ export function SettingsView({
const hasSettings = settings !== null;
useEffect(() => {
if (activeSection !== "overview" || !hasSettings) return;
if (activeSection !== "overview" || !hasSettings || !pageVisible) return;
let cancelled = false;
const refresh = () => {
fetchSettingsUsage(token)
@@ -698,18 +701,13 @@ export function SettingsView({
void refresh();
const interval = window.setInterval(refresh, 5000);
const onFocus = () => refresh();
const onVisibilityChange = () => {
if (document.visibilityState === "visible") refresh();
};
window.addEventListener("focus", onFocus);
document.addEventListener("visibilitychange", onVisibilityChange);
return () => {
cancelled = true;
window.clearInterval(interval);
window.removeEventListener("focus", onFocus);
document.removeEventListener("visibilitychange", onVisibilityChange);
};
}, [activeSection, hasSettings, token]);
}, [activeSection, hasSettings, pageVisible, token]);
useEffect(() => {
if (activeSection !== "apps") return;
@@ -844,7 +842,7 @@ export function SettingsView({
);
useEffect(() => {
if (activeSection !== "automations") return;
if (activeSection !== "automations" || !pageVisible) return;
let cancelled = false;
const refresh = async (showLoading = false) => {
if (cancelled) return;
@@ -862,18 +860,14 @@ export function SettingsView({
};
void refresh(true);
const interval = window.setInterval(() => void refresh(false), 5000);
const refreshOnFocus = () => {
if (document.visibilityState !== "hidden") void refresh(false);
};
const refreshOnFocus = () => void refresh(false);
window.addEventListener("focus", refreshOnFocus);
document.addEventListener("visibilitychange", refreshOnFocus);
return () => {
cancelled = true;
window.clearInterval(interval);
window.removeEventListener("focus", refreshOnFocus);
document.removeEventListener("visibilitychange", refreshOnFocus);
};
}, [activeSection, token]);
}, [activeSection, pageVisible, token]);
useEffect(() => {
writeLocalPreferences(localPrefs);
@@ -1969,7 +1963,7 @@ export function SettingsView({
<button
type="button"
onClick={onBackToChat}
className="mb-4 inline-flex items-center gap-1.5 rounded-full px-2.5 py-1.5 text-[12px] font-medium text-muted-foreground transition-colors hover:bg-muted/70 hover:text-foreground lg:hidden"
className="touch-target mb-4 inline-flex items-center gap-1.5 rounded-full px-2.5 py-1.5 text-[12px] font-medium text-muted-foreground transition-colors hover:bg-muted/70 hover:text-foreground lg:hidden"
>
<ChevronLeft className="h-3.5 w-3.5" aria-hidden />
{t("settings.backToChat")}
@@ -2052,6 +2046,24 @@ function SettingsSidebar({
hostChromeInset?: boolean;
}) {
const { t } = useTranslation();
const navRef = useRef<HTMLElement>(null);
const activeItemRef = useRef<HTMLButtonElement>(null);
useEffect(() => {
const nav = navRef.current;
const activeItem = activeItemRef.current;
if (!nav || !activeItem || nav.scrollWidth <= nav.clientWidth) return;
const navRect = nav.getBoundingClientRect();
const itemRect = activeItem.getBoundingClientRect();
const itemCenter = itemRect.left - navRect.left + nav.scrollLeft + itemRect.width / 2;
const targetLeft = Math.max(
0,
Math.min(nav.scrollWidth - nav.clientWidth, itemCenter - nav.clientWidth / 2),
);
const reducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
nav.scrollTo({ left: targetLeft, behavior: reducedMotion ? "auto" : "smooth" });
}, [activeSection]);
return (
<aside
className={cn(
@@ -2062,7 +2074,7 @@ function SettingsSidebar({
<button
type="button"
onClick={onBackToChat}
className="mb-2 inline-flex w-fit items-center gap-1.5 rounded-full px-2.5 py-1.5 text-[12px] font-medium text-muted-foreground transition-colors hover:bg-muted/70 hover:text-foreground lg:mb-3"
className="touch-target mb-2 inline-flex w-fit items-center gap-1.5 rounded-full px-2.5 py-1.5 text-[12px] font-medium text-muted-foreground transition-colors hover:bg-muted/70 hover:text-foreground lg:mb-3"
>
<ChevronLeft className="h-3.5 w-3.5" aria-hidden />
{t("settings.backToChat")}
@@ -2074,19 +2086,21 @@ function SettingsSidebar({
</div>
<nav
ref={navRef}
aria-label={t("settings.sidebar.ariaLabel")}
className="-mx-1 flex snap-x gap-2 overflow-x-auto px-1 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden lg:mx-0 lg:block lg:space-y-1 lg:overflow-visible lg:px-0 lg:pb-0"
className="-mx-1 flex gap-2 overflow-x-auto px-1 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden lg:mx-0 lg:block lg:space-y-1 lg:overflow-visible lg:px-0 lg:pb-0"
>
{SETTINGS_NAV_ITEMS.map(({ key, icon: Icon, fallback }) => {
const active = key === activeSection;
return (
<button
ref={active ? activeItemRef : undefined}
key={key}
type="button"
aria-current={active ? "page" : undefined}
onClick={() => onSelectSection(key)}
className={cn(
"flex h-9 w-auto shrink-0 snap-start items-center gap-2 rounded-full px-3 text-left text-[13px] font-medium transition-colors lg:w-full lg:rounded-[10px] lg:px-2.5",
"touch-target flex h-9 w-auto shrink-0 items-center gap-2 rounded-full px-3 text-left text-[13px] font-medium transition-colors lg:w-full lg:rounded-[10px] lg:px-2.5",
active
? "bg-sidebar-accent text-foreground"
: "text-muted-foreground/78 hover:bg-muted/45 hover:text-foreground",
@@ -5833,7 +5847,7 @@ function CliAppsCatalogRow({
const description = app.description || app.requires || app.entry_point || app.name;
return (
<article className="group flex min-w-0 items-center gap-3 rounded-[14px] px-3 py-3 transition-colors hover:bg-muted/45">
<article className="apps-catalog-row group flex min-w-0 items-center gap-3 rounded-[14px] px-3 py-3 transition-colors hover:bg-muted/45">
<CliAppLogo app={app} showBrandLogos={showBrandLogos} />
<div className="min-w-0 flex-1">
<div className="flex min-w-0 items-baseline gap-2">
@@ -6624,9 +6638,11 @@ function CliAppReadyPanel({
}
function CliAppLogo({ app, showBrandLogos }: { app: CliAppInfo; showBrandLogos: boolean }) {
const bg = app.brand_color || "hsl(var(--muted))";
const logoUrls = useMemo(() => logoFallbackUrls(app.logo_url), [app.logo_url]);
const { logoUrl, onLogoError, onLogoLoad } = useLogoFallback(logoUrls);
const logoUrls = useMemo(
() => (isGenericRepositoryLogoUrl(app.logo_url) ? [] : logoFallbackUrls(app.logo_url)),
[app.logo_url],
);
const { logoUrl, logoLoaded, onLogoError, onLogoLoad } = useLogoFallback(logoUrls);
const initials = app.display_name
.split(/\s+/)
.filter(Boolean)
@@ -6634,30 +6650,41 @@ function CliAppLogo({ app, showBrandLogos }: { app: CliAppInfo; showBrandLogos:
.map((part) => part[0]?.toUpperCase())
.join("") || app.name.slice(0, 2).toUpperCase();
if (showBrandLogos && logoUrl) {
return (
const showRemoteLogo = showBrandLogos && Boolean(logoUrl);
return (
<span
className="relative grid h-11 w-11 shrink-0 place-items-center overflow-hidden rounded-[8px] border border-border/45 bg-muted text-[13px] font-semibold"
style={{
color: app.brand_color || "hsl(var(--muted-foreground))",
boxShadow: `inset 0 0 0 1px ${app.brand_color ?? "transparent"}18`,
}}
>
<span
className="grid h-11 w-11 shrink-0 place-items-center rounded-[8px] border border-border/45 bg-background"
style={{ boxShadow: `inset 0 0 0 1px ${app.brand_color ?? "transparent"}22` }}
aria-hidden
className={cn(
"transition-opacity duration-150 motion-reduce:transition-none",
showRemoteLogo && logoLoaded ? "opacity-0" : "opacity-100",
)}
>
{initials}
</span>
{showRemoteLogo ? (
<img
src={logoUrl}
alt=""
decoding="async"
loading="lazy"
className="h-6 w-6 object-contain"
referrerPolicy="no-referrer"
draggable={false}
className={cn(
"absolute h-6 w-6 object-contain transition-opacity duration-150 motion-reduce:transition-none",
logoLoaded ? "opacity-100" : "opacity-0",
)}
onLoad={onLogoLoad}
onError={onLogoError}
/>
</span>
);
}
return (
<span
className="grid h-11 w-11 shrink-0 place-items-center rounded-[8px] text-[13px] font-semibold text-white"
style={{ backgroundColor: bg }}
>
{initials}
) : null}
</span>
);
}
@@ -8494,6 +8521,7 @@ function SegmentedControl({
<button
key={option.value}
type="button"
aria-pressed={value === option.value}
onClick={() => onChange(option.value)}
className={cn(
"rounded-full px-3 py-1 transition-colors",
webui/src/components/settings/channels/ChannelQrConnectFlow.tsx
+4 -2
View File
@@ -4,6 +4,7 @@ import { Check, Loader2, Network, RotateCcw } from "lucide-react";
import { useTranslation } from "react-i18next";
import { Button } from "@/components/ui/button";
import { usePageVisibility } from "@/hooks/usePageVisibility";
import {
cancelChannelConnect,
pollChannelConnect,
@@ -52,6 +53,7 @@ export function ChannelQrConnectFlow({
labels: ChannelQrConnectLabels;
onFeaturesUpdate: (payload: NanobotFeaturesPayload) => void;
}) {
const pageVisible = usePageVisibility();
const { t } = useTranslation();
const tx = (key: string, fallback: string) => t(key, { defaultValue: fallback });
const [connect, setConnect] = useState<ChannelConnectPayload | null>(null);
@@ -92,7 +94,7 @@ export function ChannelQrConnectFlow({
}, [connect?.qr_url]);
useEffect(() => {
if (!connect?.session_id || connect.status !== "pending") return;
if (!connect?.session_id || connect.status !== "pending" || !pageVisible) return;
let cancelled = false;
const poll = async () => {
if (pollInFlight.current) return;
@@ -127,7 +129,7 @@ export function ChannelQrConnectFlow({
window.clearTimeout(initial);
window.clearInterval(interval);
};
}, [channelName, connect?.interval_ms, connect?.session_id, connect?.status, onFeaturesUpdate, token]);
}, [channelName, connect?.interval_ms, connect?.session_id, connect?.status, onFeaturesUpdate, pageVisible, token]);
const start = useCallback(async (force = false) => {
setBusy(true);
webui/src/components/thread/AgentActivityCluster.tsx
+275 -951
View File
File diff suppressed because it is too large Load Diff
webui/src/components/thread/AssistantSelectionAction.tsx
+163
View File
@@ -0,0 +1,163 @@
import { useEffect, useLayoutEffect, useRef, useState, type RefObject } from "react";
import { createPortal } from "react-dom";
import { MessageCircleMore } from "lucide-react";
import { useTranslation } from "react-i18next";
const MAX_QUOTED_CONTEXT_CHARS = 4_000;
interface SelectionActionState {
text: string;
left: number;
top: number;
above: boolean;
}
interface AssistantSelectionActionProps {
containerRef: RefObject<HTMLElement | null>;
onQuoteSelection?: (text: string) => void;
}
function selectableAncestor(node: Node | null, container: HTMLElement): HTMLElement | null {
const element = node instanceof Element ? node : node?.parentElement;
const selectable = element?.closest<HTMLElement>("[data-assistant-selectable='true']") ?? null;
return selectable && container.contains(selectable) ? selectable : null;
}
function selectedRangeRect(range: Range): DOMRect | null {
const rect = range.getBoundingClientRect();
if (rect.width > 0 || rect.height > 0) return rect;
return range.getClientRects()[0] ?? null;
}
function normalizedSelectionText(selection: Selection): string {
return selection
.toString()
.replace(/\u00a0/g, " ")
.replace(/\r\n?/g, "\n")
.trim()
.slice(0, MAX_QUOTED_CONTEXT_CHARS);
}
export function AssistantSelectionAction({
containerRef,
onQuoteSelection,
}: AssistantSelectionActionProps) {
const { t } = useTranslation();
const [action, setAction] = useState<SelectionActionState | null>(null);
const frameRef = useRef<number | null>(null);
const actionRef = useRef<HTMLButtonElement>(null);
useLayoutEffect(() => {
const element = actionRef.current;
if (!action || !element) return;
const viewport = window.visualViewport;
const viewportLeft = viewport?.offsetLeft ?? 0;
const viewportTop = viewport?.offsetTop ?? 0;
const viewportRight = viewportLeft + (viewport?.width ?? window.innerWidth);
const viewportBottom = viewportTop + (viewport?.height ?? window.innerHeight);
const rect = element.getBoundingClientRect();
const padding = 12;
const shiftX = rect.left < viewportLeft + padding
? viewportLeft + padding - rect.left
: rect.right > viewportRight - padding
? viewportRight - padding - rect.right
: 0;
const shiftY = rect.top < viewportTop + padding
? viewportTop + padding - rect.top
: rect.bottom > viewportBottom - padding
? viewportBottom - padding - rect.bottom
: 0;
element.style.translate = `${shiftX}px ${shiftY}px`;
}, [action]);
useEffect(() => {
if (!onQuoteSelection) return;
const updateFromSelection = () => {
if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
frameRef.current = requestAnimationFrame(() => {
frameRef.current = null;
const container = containerRef.current;
const selection = window.getSelection();
if (!container || !selection || selection.isCollapsed || selection.rangeCount === 0) {
setAction(null);
return;
}
const range = selection.getRangeAt(0);
const start = selectableAncestor(range.startContainer, container);
const end = selectableAncestor(range.endContainer, container);
const text = normalizedSelectionText(selection);
const rect = selectedRangeRect(range);
if (!start || start !== end || !text || !rect) {
setAction(null);
return;
}
const viewport = window.visualViewport;
const viewportTop = viewport?.offsetTop ?? 0;
const viewportBottom = viewportTop + (viewport?.height ?? window.innerHeight);
const above = rect.bottom + 52 > viewportBottom;
setAction({
text,
left: rect.left + rect.width / 2,
top: above ? rect.top - 8 : rect.bottom + 8,
above,
});
});
};
const dismiss = () => setAction(null);
const onPointerDown = (event: PointerEvent) => {
const target = event.target;
if (target instanceof Element && target.closest("[data-selection-follow-up='true']")) return;
dismiss();
};
const onKeyDown = (event: KeyboardEvent) => {
if (event.key === "Escape") dismiss();
};
document.addEventListener("selectionchange", updateFromSelection);
document.addEventListener("pointerdown", onPointerDown, true);
document.addEventListener("scroll", dismiss, true);
document.addEventListener("keydown", onKeyDown);
window.addEventListener("resize", dismiss);
window.visualViewport?.addEventListener("resize", dismiss);
window.visualViewport?.addEventListener("scroll", dismiss);
return () => {
if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
document.removeEventListener("selectionchange", updateFromSelection);
document.removeEventListener("pointerdown", onPointerDown, true);
document.removeEventListener("scroll", dismiss, true);
document.removeEventListener("keydown", onKeyDown);
window.removeEventListener("resize", dismiss);
window.visualViewport?.removeEventListener("resize", dismiss);
window.visualViewport?.removeEventListener("scroll", dismiss);
};
}, [containerRef, onQuoteSelection]);
if (!action || typeof document === "undefined") return null;
return createPortal(
<button
ref={actionRef}
type="button"
data-selection-follow-up="true"
className="fixed z-[80] inline-flex h-9 max-w-[calc(100vw-24px)] items-center gap-1.5 rounded-full border border-border/80 bg-popover px-3 text-[13px] font-medium text-popover-foreground shadow-lg shadow-black/10 transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring dark:shadow-black/35"
style={{
left: action.left,
top: action.top,
transform: action.above ? "translate(-50%, -100%)" : "translateX(-50%)",
}}
onPointerDown={(event) => event.preventDefault()}
onClick={() => {
onQuoteSelection?.(action.text);
window.getSelection()?.removeAllRanges();
setAction(null);
}}
>
<MessageCircleMore className="h-3.5 w-3.5" aria-hidden />
<span className="truncate">{t("message.askAboutSelection")}</span>
</button>,
document.body,
);
}
webui/src/components/thread/PromptRail.tsx
+38 -17
View File
@@ -49,6 +49,7 @@ export function PromptRail({
scrollRef,
}: PromptRailProps) {
const railRef = useRef<HTMLDivElement>(null);
const measuredPromptsRef = useRef<MeasuredPrompt[]>([]);
const promptAnchors = useMemo(() => userPromptAnchors(messages), [messages]);
const [markers, setMarkers] = useState<PromptMarker[]>([]);
const [activePromptId, setActivePromptId] = useState<string | null>(null);
@@ -59,6 +60,7 @@ export function PromptRail({
const nextRailHeight = railRef.current?.clientHeight ?? 0;
if (!scrollEl || promptAnchors.length < MIN_PROMPTS_FOR_RAIL) {
measuredPromptsRef.current = [];
setMarkers([]);
setActivePromptId(null);
return;
@@ -66,17 +68,26 @@ export function PromptRail({
const scrollRange = scrollEl.scrollHeight - scrollEl.clientHeight;
if (scrollRange < RAIL_MIN_SCROLL_RANGE_PX) {
measuredPromptsRef.current = [];
setMarkers([]);
setActivePromptId(null);
return;
}
const measured = measurePrompts(scrollEl, promptAnchors, scrollRange);
measuredPromptsRef.current = measured;
const grouped = groupPromptMarkers(measured, nextRailHeight);
setMarkers(distributeMarkerPositions(grouped, nextRailHeight));
setActivePromptId(activePromptForScroll(measured, scrollEl.scrollTop));
}, [promptAnchors, scrollRef]);
const updateActivePrompt = useCallback(() => {
const scrollEl = scrollRef.current;
if (!scrollEl) return;
const next = activePromptForScroll(measuredPromptsRef.current, scrollEl.scrollTop);
setActivePromptId((current) => current === next ? current : next);
}, [scrollRef]);
useEffect(() => {
let frame = 0;
let remainingFrames = MEASURE_RETRY_FRAMES;
@@ -95,20 +106,26 @@ export function PromptRail({
const scrollEl = scrollRef.current;
if (!scrollEl) return undefined;
let frame = 0;
const schedule = () => {
window.cancelAnimationFrame(frame);
frame = window.requestAnimationFrame(updateMarkers);
let scrollFrame = 0;
let resizeFrame = 0;
const scheduleActivePrompt = () => {
window.cancelAnimationFrame(scrollFrame);
scrollFrame = window.requestAnimationFrame(updateActivePrompt);
};
const scheduleMeasurement = () => {
window.cancelAnimationFrame(resizeFrame);
resizeFrame = window.requestAnimationFrame(updateMarkers);
};
scrollEl.addEventListener("scroll", schedule, { passive: true });
window.addEventListener("resize", schedule);
scrollEl.addEventListener("scroll", scheduleActivePrompt, { passive: true });
window.addEventListener("resize", scheduleMeasurement);
return () => {
window.cancelAnimationFrame(frame);
scrollEl.removeEventListener("scroll", schedule);
window.removeEventListener("resize", schedule);
window.cancelAnimationFrame(scrollFrame);
window.cancelAnimationFrame(resizeFrame);
scrollEl.removeEventListener("scroll", scheduleActivePrompt);
window.removeEventListener("resize", scheduleMeasurement);
};
}, [scrollRef, updateMarkers]);
}, [scrollRef, updateActivePrompt, updateMarkers]);
useEffect(() => {
const scrollEl = scrollRef.current;
@@ -309,16 +326,20 @@ function activePromptForScroll(
scrollTop: number,
): string | null {
if (measured.length === 0) return null;
let active = measured[0];
const cursor = scrollTop + 96;
for (const prompt of measured) {
if (prompt.top <= cursor) {
active = prompt;
continue;
let lower = 0;
let upper = measured.length - 1;
let activeIndex = 0;
while (lower <= upper) {
const middle = Math.floor((lower + upper) / 2);
if (measured[middle].top <= cursor) {
activeIndex = middle;
lower = middle + 1;
} else {
upper = middle - 1;
}
break;
}
return active.id;
return measured[activeIndex].id;
}
function groupedPromptLabel(count: number, latestLabel: string): string {
webui/src/components/thread/ThreadComposer.tsx
+92 -14
View File
@@ -35,6 +35,7 @@ import {
Loader2,
Mic,
Plus,
Quote,
RotateCw,
Shield,
Sparkles,
@@ -71,6 +72,7 @@ import {
import { useClipboardAndDrop } from "@/hooks/useClipboardAndDrop";
import { useLogoFallback } from "@/hooks/useLogoFallback";
import type { SendAttachment, SendOptions } from "@/hooks/useNanobotStream";
import { usePageVisibility } from "@/hooks/usePageVisibility";
import { useVoiceRecorder, type VoiceRecorderErrorKey } from "@/hooks/useVoiceRecorder";
import type {
CliAppInfo,
@@ -189,6 +191,9 @@ interface ThreadComposerProps {
pendingQueueKey?: string | null;
transcriptionProvider?: string | null;
ingressLimits?: WebUIIngressLimits | null;
quotedContext?: string | null;
focusRequest?: number;
onQuotedContextChange?: (text: string | null) => void;
}
const COMMAND_ICONS: Record<string, LucideIcon> = {
@@ -265,6 +270,7 @@ interface QueuedPrompt {
id: string;
text: string;
images?: QueuedPromptImage[];
quotedContext?: string;
}
interface QueuedPromptImage {
@@ -355,11 +361,19 @@ function normalizeQueuedPrompt(item: unknown, index: number): QueuedPrompt | nul
}];
}).slice(0, MAX_ATTACHMENTS_PER_MESSAGE)
: [];
const quotedContext = typeof record.quotedContext === "string"
? record.quotedContext.trim().slice(0, QUEUED_PROMPT_MAX_CHARS)
: "";
if (!text && images.length === 0) return null;
const id = typeof record.id === "string" && record.id.trim()
? record.id
: `queued-prompt-restored-${index}`;
return { id, text, ...(images.length > 0 ? { images } : {}) };
return {
id,
text,
...(images.length > 0 ? { images } : {}),
...(quotedContext ? { quotedContext } : {}),
};
}
function readQueuedPrompts(storageKey: string): QueuedPrompt[] {
@@ -391,6 +405,7 @@ function storeQueuedPrompts(storageKey: string, prompts: QueuedPrompt[]): void {
id: prompt.id,
text: prompt.text.slice(0, QUEUED_PROMPT_MAX_CHARS),
...(prompt.images?.length ? { images: prompt.images.slice(0, MAX_ATTACHMENTS_PER_MESSAGE) } : {}),
...(prompt.quotedContext ? { quotedContext: prompt.quotedContext } : {}),
})),
),
);
@@ -555,6 +570,7 @@ function RunElapsedStrip({
goalState?: GoalStateWsPayload;
}) {
const { t } = useTranslation();
const pageVisible = usePageVisibility();
const [goalPanelOpen, setGoalPanelOpen] = useState(false);
const showTimer = startedAt != null;
const stripLabel = goalStateStripPreview(goalState, t);
@@ -594,10 +610,11 @@ function RunElapsedStrip({
}, [active, renderStrip]);
useEffect(() => {
if (startedAt == null) return;
if (startedAt == null || !pageVisible) return;
setTick((n) => n + 1);
const id = window.setInterval(() => setTick((n) => n + 1), 1000);
return () => window.clearInterval(id);
}, [startedAt]);
}, [pageVisible, startedAt]);
const display = active
? { startedAt, goalState, stripLabel }
@@ -629,7 +646,7 @@ function RunElapsedStrip({
relayout();
preloadMarkdownText();
void preloadMarkdownText();
const ro =
typeof ResizeObserver !== "undefined"
? new ResizeObserver(() => relayout())
@@ -817,6 +834,9 @@ export function ThreadComposer({
pendingQueueKey = null,
transcriptionProvider = null,
ingressLimits = null,
quotedContext = null,
focusRequest = 0,
onQuotedContextChange,
}: ThreadComposerProps) {
const { t } = useTranslation();
const [value, setValue] = useState("");
@@ -938,6 +958,14 @@ export function ThreadComposer({
return () => cancelAnimationFrame(id);
}, [disabled]);
useEffect(() => {
if (!focusRequest || disabled) return;
const id = requestAnimationFrame(() => textareaRef.current?.focus());
return () => cancelAnimationFrame(id);
}, [disabled, focusRequest]);
const normalizedQuotedContext = quotedContext?.trim().slice(0, QUEUED_PROMPT_MAX_CHARS) || null;
const readyImages = useMemo(
() => images.filter((img): img is AttachedImage & { dataUrl: string } =>
img.status === "ready" && typeof img.dataUrl === "string",
@@ -1450,11 +1478,23 @@ export function ThreadComposer({
id,
text,
...(queuedImages.length > 0 ? { images: queuedImages } : {}),
...(normalizedQuotedContext ? { quotedContext: normalizedQuotedContext } : {}),
},
]);
clear();
clearComposerText();
}, [canQueueGuidance, clear, clearComposerText, maxTextBytes, readyImages, textTooLargeMessage, value]);
onQuotedContextChange?.(null);
}, [
canQueueGuidance,
clear,
clearComposerText,
maxTextBytes,
normalizedQuotedContext,
onQuotedContextChange,
readyImages,
textTooLargeMessage,
value,
]);
const removeQueuedPrompt = useCallback((id: string) => {
secondEnterPromptIdRef.current = null;
@@ -1470,6 +1510,7 @@ export function ThreadComposer({
setSlashMenuDismissed(false);
setCliAppMenuDismissed(false);
setCursorPosition(prompt.text.length);
onQuotedContextChange?.(prompt.quotedContext ?? null);
if (prompt.images?.length) {
restoreReadyImages(prompt.images as RestoredReadyImage[]);
} else {
@@ -1482,7 +1523,7 @@ export function ThreadComposer({
el.focus();
el.setSelectionRange(prompt.text.length, prompt.text.length);
});
}, [clear, resizeTextarea, restoreReadyImages]);
}, [clear, onQuotedContextChange, resizeTextarea, restoreReadyImages]);
const moveQueuedPrompt = useCallback((dragId: string, targetId: string) => {
if (dragId === targetId) return;
@@ -1505,12 +1546,17 @@ export function ThreadComposer({
const queuedImages = queuedImagesToSendImages(prompt.images);
setQueuedPrompts((items) => items.filter((item) => item.id !== prompt.id));
if (text || queuedImages?.length) {
if (queuedImages?.length) onSend(text, queuedImages);
else onSend(text);
const options: SendOptions | undefined = prompt.quotedContext || isStreaming
? {
...(prompt.quotedContext ? { quotedContext: prompt.quotedContext } : {}),
...(isStreaming ? { continueActiveTurn: true } : {}),
}
: undefined;
onSend(text, queuedImages, options);
}
requestAnimationFrame(() => textareaRef.current?.focus());
},
[onSend],
[isStreaming, onSend],
);
const sendNextQueuedPrompt = useCallback(() => {
@@ -1522,7 +1568,12 @@ export function ThreadComposer({
}
setQueuedPrompts((items) => items.filter((item) => item.id !== nextPrompt.id));
const queuedImages = queuedImagesToSendImages(nextPrompt.images);
if (queuedImages?.length) onSend(nextPrompt.text.trim(), queuedImages);
const options = nextPrompt.quotedContext
? { quotedContext: nextPrompt.quotedContext }
: undefined;
if (queuedImages?.length && options) onSend(nextPrompt.text.trim(), queuedImages, options);
else if (queuedImages?.length) onSend(nextPrompt.text.trim(), queuedImages);
else if (options) onSend(nextPrompt.text.trim(), undefined, options);
else onSend(nextPrompt.text.trim());
requestAnimationFrame(() => textareaRef.current?.focus());
}, [onSend, queuedPrompts]);
@@ -1576,10 +1627,11 @@ export function ThreadComposer({
const attachedCliApps = activeCliMentionApps.map(cliAppMentionPayload);
const attachedMcpPresets = activeMcpPresetMentions.map(mcpPresetMentionPayload);
const options: SendOptions | undefined =
attachedCliApps.length > 0 || attachedMcpPresets.length > 0
attachedCliApps.length > 0 || attachedMcpPresets.length > 0 || normalizedQuotedContext
? {
...(attachedCliApps.length > 0 ? { cliApps: attachedCliApps } : {}),
...(attachedMcpPresets.length > 0 ? { mcpPresets: attachedMcpPresets } : {}),
...(normalizedQuotedContext ? { quotedContext: normalizedQuotedContext } : {}),
}
: undefined;
const hasPlainTextCommandPayload =
@@ -1598,6 +1650,7 @@ export function ThreadComposer({
setQueuedPrompts([]);
clear();
clearComposerText();
onQuotedContextChange?.(null);
return;
}
const isSlashSideChannel = isSideChannelLifecycle(slashLifecycle);
@@ -1619,6 +1672,7 @@ export function ThreadComposer({
// preview here without affecting the rendered message.
clear();
clearComposerText();
onQuotedContextChange?.(null);
}, [
activeCliMentionApps,
activeMcpPresetMentions,
@@ -1632,6 +1686,8 @@ export function ThreadComposer({
onModelBadgeClick,
onSend,
onStop,
onQuotedContextChange,
normalizedQuotedContext,
readyImages,
slashCommands,
textTooLargeMessage,
@@ -1884,6 +1940,28 @@ export function ThreadComposer({
))}
</div>
) : null}
{normalizedQuotedContext ? (
<div
className="mx-3 mt-3 flex min-w-0 items-start gap-2 border-l-2 border-muted-foreground/25 pl-3 pr-1 text-muted-foreground"
aria-label={t("thread.composer.quotedContext")}
>
<Quote className="mt-0.5 h-3.5 w-3.5 shrink-0" aria-hidden />
<p className="line-clamp-2 min-w-0 flex-1 text-[13px]/[1.45]">
{normalizedQuotedContext}
</p>
<button
type="button"
className="touch-target -mr-1 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-muted/70 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
aria-label={t("thread.composer.removeQuotedContext")}
onClick={() => {
onQuotedContextChange?.(null);
requestAnimationFrame(() => textareaRef.current?.focus());
}}
>
<X className="h-3.5 w-3.5" aria-hidden />
</button>
</div>
) : null}
<RunElapsedStrip startedAt={runStartedAt} goalState={goalState} />
<div className="relative">
{hasMentionDecorations ? (
@@ -1962,7 +2040,7 @@ export function ThreadComposer({
aria-label={t("thread.composer.attachImage")}
onClick={() => fileInputRef.current?.click()}
className={cn(
"rounded-full text-muted-foreground hover:text-foreground",
"touch-target rounded-full text-muted-foreground hover:text-foreground",
isHero
? "h-8 w-8 border border-border/55 bg-card shadow-[0_2px_8px_rgba(15,23,42,0.05)] hover:bg-card"
: "h-9 w-9 border border-border/55 bg-card shadow-[0_2px_8px_rgba(15,23,42,0.05)] hover:bg-card",
@@ -2016,7 +2094,7 @@ export function ThreadComposer({
onPointerCancel={voiceRecorder.endPress}
onClick={voiceRecorder.handleClick}
className={cn(
"rounded-full border border-transparent text-muted-foreground hover:bg-muted/65 hover:text-foreground",
"touch-target rounded-full border border-transparent text-muted-foreground hover:bg-muted/65 hover:text-foreground",
isHero ? "h-8 w-8" : "h-9 w-9",
voiceRecorder.isRecording &&
"bg-red-500 text-white shadow-[0_8px_20px_rgba(239,68,68,0.22)] hover:bg-red-500 hover:text-white",
@@ -2059,7 +2137,7 @@ export function ThreadComposer({
}
onClick={showStopButton ? handleStop : modelNeedsSetup ? onModelBadgeClick : undefined}
className={cn(
"rounded-full transition-transform",
"touch-target rounded-full transition-transform",
showStopButton
? "border border-border/70 bg-card text-foreground/85 shadow-[0_3px_10px_rgba(15,23,42,0.08)] hover:bg-muted/65 hover:text-foreground disabled:text-muted-foreground/50"
: isHero
webui/src/components/thread/ThreadMessages.tsx
+141 -34
View File
@@ -1,7 +1,8 @@
import { Fragment, useMemo } from "react";
import { memo, useCallback, useMemo, useRef } from "react";
import { useTranslation } from "react-i18next";
import { MessageBubble } from "@/components/MessageBubble";
import { AgentActivityCluster } from "@/components/thread/AgentActivityCluster";
import { AssistantSelectionAction } from "@/components/thread/AssistantSelectionAction";
import { normalizeActivityTimeline, type TurnUnit } from "@/lib/activity-timeline";
import type { CliAppInfo, McpPresetInfo, SlashCommand, UIMessage } from "@/lib/types";
@@ -16,6 +17,7 @@ interface ThreadMessagesProps {
forkBoundaryMessageCount?: number | null;
onOpenFilePreview?: (path: string) => void;
onForkFromMessage?: (beforeUserIndex: number) => void;
onQuoteSelection?: (text: string) => void;
}
export type DisplayUnit = TurnUnit;
@@ -56,8 +58,10 @@ export function ThreadMessages({
forkBoundaryMessageCount = null,
onOpenFilePreview,
onForkFromMessage,
onQuoteSelection,
}: ThreadMessagesProps) {
const { t } = useTranslation();
const messageListRef = useRef<HTMLDivElement>(null);
const units = useMemo(() => buildDisplayUnits(messages, isStreaming), [isStreaming, messages]);
const forkBoundaryAfterUnitIndex = useMemo(
() => unitIndexAfterMessageCount(units, forkBoundaryMessageCount),
@@ -72,7 +76,11 @@ export function ThreadMessages({
let nextUserIndex = hiddenUserMessageCount;
return (
<div className="flex w-full flex-col">
<div ref={messageListRef} className="flex w-full flex-col">
<AssistantSelectionAction
containerRef={messageListRef}
onQuoteSelection={onQuoteSelection}
/>
{units.map((unit, index) => {
const prev = units[index - 1];
const marginTop =
@@ -96,44 +104,143 @@ export function ThreadMessages({
if (unit.type === "message" && unit.message.role === "user") nextUserIndex += 1;
return (
<Fragment key={unitKeys[index]}>
<div className={marginTop} data-user-prompt-id={userPromptId}>
{unit.type === "activity" ? (
<AgentActivityCluster
messages={unit.messages}
isTurnStreaming={liveActivityClusterIndices.has(index)}
hasBodyBelow={hasBodyBelow}
turnLatencyMs={unit.turnLatencyMs}
startedAtMs={unit.startedAtMs}
cliApps={cliApps}
mcpPresets={mcpPresets}
onOpenFilePreview={onOpenFilePreview}
/>
) : (
<MessageBubble
message={unit.message}
cliApps={cliApps}
mcpPresets={mcpPresets}
slashCommands={slashCommands}
onOpenFilePreview={onOpenFilePreview}
onForkFromHere={
onForkFromMessage && forkIndex !== undefined
? () => onForkFromMessage(forkIndex)
: undefined
}
/>
)}
</div>
{index === forkBoundaryAfterUnitIndex ? (
<ForkBoundaryDivider label={t("thread.forkedFromHistory")} />
) : null}
</Fragment>
<ThreadDisplayUnit
key={unitKeys[index]}
unit={unit}
marginTop={marginTop}
userPromptId={userPromptId}
hasBodyBelow={hasBodyBelow}
isTurnStreaming={liveActivityClusterIndices.has(index)}
forkIndex={forkIndex}
showForkBoundary={index === forkBoundaryAfterUnitIndex}
forkBoundaryLabel={t("thread.forkedFromHistory")}
cliApps={cliApps}
mcpPresets={mcpPresets}
slashCommands={slashCommands}
onOpenFilePreview={onOpenFilePreview}
onForkFromMessage={onForkFromMessage}
/>
);
})}
</div>
);
}
interface ThreadDisplayUnitProps {
unit: DisplayUnit;
marginTop: string;
userPromptId?: string;
hasBodyBelow: boolean;
isTurnStreaming: boolean;
forkIndex?: number;
showForkBoundary: boolean;
forkBoundaryLabel: string;
cliApps: CliAppInfo[];
mcpPresets: McpPresetInfo[];
slashCommands: SlashCommand[];
onOpenFilePreview?: (path: string) => void;
onForkFromMessage?: (beforeUserIndex: number) => void;
}
const ThreadDisplayUnit = memo(function ThreadDisplayUnit({
unit,
marginTop,
userPromptId,
hasBodyBelow,
isTurnStreaming,
forkIndex,
showForkBoundary,
forkBoundaryLabel,
cliApps,
mcpPresets,
slashCommands,
onOpenFilePreview,
onForkFromMessage,
}: ThreadDisplayUnitProps) {
const onForkFromHere = useCallback(() => {
if (forkIndex !== undefined) onForkFromMessage?.(forkIndex);
}, [forkIndex, onForkFromMessage]);
const deferOffscreenRender = unit.type === "activity"
? !isTurnStreaming
: unit.message.role === "assistant" && !unit.message.isStreaming;
return (
<>
<div
className={`${marginTop}${deferOffscreenRender ? " thread-render-unit" : ""}`}
data-user-prompt-id={userPromptId}
>
{unit.type === "activity" ? (
<AgentActivityCluster
messages={unit.messages}
isTurnStreaming={isTurnStreaming}
hasBodyBelow={hasBodyBelow}
turnLatencyMs={unit.turnLatencyMs}
startedAtMs={unit.startedAtMs}
cliApps={cliApps}
mcpPresets={mcpPresets}
onOpenFilePreview={onOpenFilePreview}
/>
) : (
<MessageBubble
message={unit.message}
cliApps={cliApps}
mcpPresets={mcpPresets}
slashCommands={slashCommands}
onOpenFilePreview={onOpenFilePreview}
onForkFromHere={forkIndex !== undefined ? onForkFromHere : undefined}
/>
)}
</div>
{showForkBoundary ? <ForkBoundaryDivider label={forkBoundaryLabel} /> : null}
</>
);
}, threadDisplayUnitPropsEqual);
function threadDisplayUnitPropsEqual(
previous: ThreadDisplayUnitProps,
next: ThreadDisplayUnitProps,
): boolean {
return (
displayUnitsEqual(previous.unit, next.unit)
&& previous.marginTop === next.marginTop
&& previous.userPromptId === next.userPromptId
&& previous.hasBodyBelow === next.hasBodyBelow
&& previous.isTurnStreaming === next.isTurnStreaming
&& previous.forkIndex === next.forkIndex
&& previous.showForkBoundary === next.showForkBoundary
&& previous.forkBoundaryLabel === next.forkBoundaryLabel
&& previous.cliApps === next.cliApps
&& previous.mcpPresets === next.mcpPresets
&& previous.slashCommands === next.slashCommands
&& previous.onOpenFilePreview === next.onOpenFilePreview
&& previous.onForkFromMessage === next.onForkFromMessage
);
}
function displayUnitsEqual(previous: DisplayUnit, next: DisplayUnit): boolean {
if (previous.type !== next.type) return false;
if (previous.type === "message" && next.type === "message") {
return shallowMessageEqual(previous.message, next.message);
}
if (previous.type !== "activity" || next.type !== "activity") return false;
return (
previous.turnLatencyMs === next.turnLatencyMs
&& previous.startedAtMs === next.startedAtMs
&& previous.messages.length === next.messages.length
&& previous.messages.every((message, index) =>
shallowMessageEqual(message, next.messages[index]))
);
}
function shallowMessageEqual(previous: UIMessage, next: UIMessage): boolean {
if (previous === next) return true;
const previousKeys = Object.keys(previous) as Array<keyof UIMessage>;
const nextKeys = Object.keys(next) as Array<keyof UIMessage>;
return previousKeys.length === nextKeys.length
&& previousKeys.every((key) => previous[key] === next[key]);
}
function unitIndexAfterMessageCount(
units: DisplayUnit[],
messageCount: number | null | undefined,
webui/src/components/thread/ThreadShell.tsx
+12
View File
@@ -344,6 +344,8 @@ export function ThreadShell({
const [filePreviewPath, setFilePreviewPath] = useState<string | null>(null);
const [filePreviewClosing, setFilePreviewClosing] = useState(false);
const [filePreviewWidth, setFilePreviewWidth] = useState(FILE_PREVIEW_DEFAULT_WIDTH);
const [quotedContext, setQuotedContext] = useState<string | null>(null);
const [composerFocusSignal, setComposerFocusSignal] = useState(0);
const shellRef = useRef<HTMLElement | null>(null);
const filePreviewWidthRef = useRef(FILE_PREVIEW_DEFAULT_WIDTH);
const filePreviewCloseTimerRef = useRef<number | null>(null);
@@ -395,8 +397,14 @@ export function ThreadShell({
}
setFilePreviewClosing(false);
setFilePreviewPath(null);
setQuotedContext(null);
}, [historyKey]);
const handleQuoteSelection = useCallback((text: string) => {
setQuotedContext(text);
setComposerFocusSignal((value) => value + 1);
}, []);
useEffect(() => {
return () => {
if (filePreviewCloseTimerRef.current !== null) {
@@ -806,6 +814,9 @@ export function ThreadShell({
pendingQueueKey={chatId}
transcriptionProvider={settingsSnapshot?.transcription?.provider}
ingressLimits={ingressLimits}
quotedContext={quotedContext}
focusRequest={composerFocusSignal}
onQuotedContextChange={setQuotedContext}
/>
) : (
<ThreadComposer
@@ -904,6 +915,7 @@ export function ThreadShell({
onLoadOlder={loadOlder}
onOpenFilePreview={historyKey ? handleOpenFilePreview : undefined}
onForkFromMessage={onForkChat ? handleForkFromMessage : undefined}
onQuoteSelection={session ? handleQuoteSelection : undefined}
/>
</FilePreviewAvailabilityProvider>
</div>
webui/src/components/thread/ThreadViewport.tsx
+4 -1
View File
@@ -48,6 +48,7 @@ interface ThreadViewportProps {
onLoadOlder?: () => Promise<void> | void;
onOpenFilePreview?: (path: string) => void;
onForkFromMessage?: (beforeUserIndex: number) => void;
onQuoteSelection?: (text: string) => void;
}
const NEAR_BOTTOM_PX = 48;
@@ -120,6 +121,7 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
onLoadOlder,
onOpenFilePreview,
onForkFromMessage,
onQuoteSelection,
}, ref) {
const { t } = useTranslation();
const scrollRef = useRef<HTMLDivElement>(null);
@@ -508,7 +510,7 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
const programmaticPromptTop = programmaticPromptScrollTopRef.current;
const programmatic =
programmaticPromptTop !== null && Math.abs(el.scrollTop - programmaticPromptTop) < 2;
setAtBottom(near);
setAtBottom((current) => current === near ? current : near);
if (programmatic) {
programmaticPromptScrollTopRef.current = null;
if (near) userReadingHistoryRef.current = false;
@@ -557,6 +559,7 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
forkBoundaryMessageCount={visibleForkBoundaryMessageCount}
onOpenFilePreview={onOpenFilePreview}
onForkFromMessage={onForkFromMessage}
onQuoteSelection={onQuoteSelection}
/>
</div>
</div>
webui/src/components/thread/WorkspaceControls.tsx
+1 -1
View File
@@ -254,7 +254,7 @@ export function WorkspaceAccessMenu({
variant="ghost"
aria-label={t("thread.composer.workspace.accessAria")}
className={cn(
"min-w-0 max-w-[min(7rem,30vw)] whitespace-nowrap rounded-[10px] border border-transparent font-semibold shadow-none sm:max-w-[min(12.5rem,42vw)]",
"touch-target min-w-0 max-w-[min(7rem,30vw)] whitespace-nowrap rounded-[10px] border border-transparent font-semibold shadow-none sm:max-w-[min(12.5rem,42vw)]",
isHero ? "h-8 px-2.5 text-[12px]" : "h-9 px-3 text-[12.5px]",
isFull
? "bg-transparent text-orange-600 hover:bg-orange-500/8 dark:text-orange-300 dark:hover:bg-orange-400/10"
webui/src/components/thread/activity/ActivityEvidencePreview.tsx
-35
View File
@@ -1,35 +0,0 @@
import { AttachmentTile } from "@/components/AttachmentTile";
import { cn } from "@/lib/utils";
import type { ActivityEvidence } from "@/lib/activity-timeline";
interface ActivityEvidencePreviewProps {
evidence: ActivityEvidence[];
className?: string;
}
export function ActivityEvidencePreview({ evidence, className }: ActivityEvidencePreviewProps) {
if (evidence.length === 0) return null;
return (
<div
data-testid="activity-evidence-preview"
className={cn(
"flex max-w-full flex-wrap items-start gap-2 pt-0.5",
"motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-top-1 motion-safe:duration-200",
className,
)}
>
{evidence.slice(0, 4).map((item) => (
<AttachmentTile
key={item.id}
attachment={item.attachment}
variant="compact"
className={cn(
item.attachment.kind === "image" || item.attachment.kind === "video"
? "max-w-[min(100%,20rem)]"
: "max-w-[14rem]",
)}
/>
))}
</div>
);
}
webui/src/components/thread/activity/ActivityGroup.tsx
-28
View File
@@ -1,28 +0,0 @@
import type { ReactNode } from "react";
import type { LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";
interface ActivityGroupProps {
title: string;
icon?: LucideIcon;
children: ReactNode;
className?: string;
}
export function ActivityGroup({ title, icon: Icon, children, className }: ActivityGroupProps) {
return (
<section
className={cn(
"min-w-0 py-1 motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-bottom-1 motion-safe:duration-200",
className,
)}
>
<div className="mb-1 flex min-w-0 items-center gap-1.5 pl-0.5 text-[12px] font-medium text-muted-foreground/70">
{Icon ? <Icon className="h-3.5 w-3.5 shrink-0" aria-hidden /> : null}
<span className="min-w-0 truncate">{title}</span>
</div>
<div className="min-w-0">{children}</div>
</section>
);
}
webui/src/components/thread/activity/ActivityStep.tsx
+17 -25
View File
@@ -7,51 +7,45 @@ import { cn } from "@/lib/utils";
export type ActivityStepTone = "neutral" | "active" | "success" | "error";
export interface ActivityStepProps {
as?: "div" | "li";
icon?: LucideIcon;
marker?: ReactNode;
label: ReactNode;
detail?: ReactNode;
aside?: ReactNode;
children?: ReactNode;
ariaLabel?: string;
active?: boolean;
tone?: ActivityStepTone;
title?: string;
className?: string;
contentClassName?: string;
labelClassName?: string;
markerClassName?: string;
style?: CSSProperties;
}
export function ActivityStep({
as: Component = "div",
icon: Icon,
marker,
label,
detail,
aside,
children,
ariaLabel,
active = false,
tone = active ? "active" : "neutral",
title,
className,
contentClassName,
labelClassName,
markerClassName,
style,
}: ActivityStepProps) {
return (
<Component
<div
data-testid="activity-step"
aria-label={ariaLabel}
className={cn(
"group/activity-step relative grid min-w-0 grid-cols-[1.125rem_minmax(0,1fr)] gap-2 py-0.5 text-[13px] leading-5",
"relative grid min-w-0 grid-cols-[1.125rem_minmax(0,1fr)] gap-2 py-0.5 text-[13px] leading-5",
className,
)}
title={title}
style={style}
>
<span
className={cn(
"relative flex h-5 w-[1.125rem] shrink-0 items-start justify-center pt-[3px]",
"after:absolute after:left-1/2 after:top-[1.25rem] after:h-[calc(100%+0.375rem)] after:w-px after:-translate-x-1/2 after:bg-muted-foreground/14 group-last/activity-step:after:hidden",
"flex h-5 w-[1.125rem] shrink-0 items-start justify-center pt-[3px]",
)}
aria-hidden
>
@@ -71,25 +65,23 @@ export function ActivityStep({
)}
</span>
<div className={cn("min-w-0", contentClassName)}>
<div className="flex min-w-0 items-baseline gap-1.5">
<div
data-testid="activity-line"
title={typeof label === "string" ? label : undefined}
className="flex min-w-0 items-center gap-1.5 overflow-hidden whitespace-nowrap"
>
<StreamingLabelSheen
active={active}
className={cn(
"min-w-0 shrink-0 font-medium",
"min-w-0 flex-1 truncate font-medium",
tone === "error" ? "text-destructive/78" : "text-muted-foreground/85",
labelClassName,
)}
>
{label}
</StreamingLabelSheen>
{detail ? (
<span className="min-w-0 break-words text-foreground/82">
{detail}
</span>
) : null}
{aside ? <span className="ml-auto shrink-0">{aside}</span> : null}
</div>
{children ? <div className="mt-1 min-w-0">{children}</div> : null}
</div>
</Component>
</div>
);
}
webui/src/components/thread/activity/FileEditRow.tsx
+33 -394
View File
@@ -1,47 +1,16 @@
import { useEffect, useMemo, useState } from "react";
import {
AlertCircle,
CheckCircle2,
ChevronDown,
ChevronRight,
ChevronUp,
CircleDashed,
ExternalLink,
} from "lucide-react";
import { useTranslation } from "react-i18next";
import { FileReferenceChip } from "@/components/FileReferenceChip";
import {
hasRenderableFileDiff,
parseRenderableFileDiff,
type RenderableFileDiff,
type RenderableFileDiffHunk,
} from "@/lib/file-diff";
import { codeLanguageFromPath } from "@/lib/code-language";
import type { FileEditDisplayMode } from "@/lib/local-preferences";
import type { UIFileDiff, UIFileEdit } from "@/lib/types";
import type { UIFileEdit } from "@/lib/types";
import { cn } from "@/lib/utils";
import { ActivityStep } from "./ActivityStep";
import { DiffPair } from "./DiffPair";
import { DiffSyntaxHighlight } from "./DiffSyntaxHighlight";
const INITIAL_VISIBLE_DIFF_LINES = 160;
const AUTO_COLLAPSE_DIFF_LINES = INITIAL_VISIBLE_DIFF_LINES;
type DiffFileEditDisplayMode = Exclude<FileEditDisplayMode, "summary">;
interface VisibleDiffHunk {
hunk: RenderableFileDiffHunk;
skippedBefore: number;
}
interface VisibleDiff {
hunks: VisibleDiffHunk[];
hiddenLineCount: number;
}
const EMPTY_VISIBLE_DIFF: VisibleDiff = { hunks: [], hiddenLineCount: 0 };
export interface FileEditSummary {
key: string;
@@ -55,102 +24,41 @@ export interface FileEditSummary {
operation?: UIFileEdit["operation"];
pending: boolean;
error?: string;
diff?: UIFileDiff;
}
export function FileEditGroup({
edits,
displayMode,
onOpenFilePreview,
density = "default",
}: {
edits: FileEditSummary[];
displayMode: FileEditDisplayMode;
onOpenFilePreview?: (path: string) => void;
density?: "default" | "diff-only";
}) {
if (edits.length === 0) return null;
return (
<ul className="space-y-1">
{edits.map((edit) => {
if (density === "diff-only" && canRenderDiff(edit, displayMode)) {
return (
<FileEditDiffOnly
key={edit.key}
edit={edit}
displayMode={displayMode}
onOpenFilePreview={onOpenFilePreview}
/>
);
}
return (
<FileEditRow
key={edit.key}
edit={edit}
displayMode={displayMode}
onOpenFilePreview={onOpenFilePreview}
/>
);
})}
</ul>
);
}
function canRenderDiff(
edit: FileEditSummary,
displayMode: FileEditDisplayMode,
): displayMode is DiffFileEditDisplayMode {
return (
displayMode !== "summary"
&& edit.status !== "editing"
&& edit.status !== "error"
&& hasRenderableFileDiff(edit.diff)
);
}
function FileEditDiffOnly({
edit,
displayMode,
onOpenFilePreview,
}: {
edit: FileEditSummary;
displayMode: DiffFileEditDisplayMode;
onOpenFilePreview?: (path: string) => void;
}) {
return (
<li className="min-w-0 py-0.5">
<FileUnifiedDiff
diff={edit.diff!}
collapsed={displayMode === "collapsed_diff"}
added={edit.added}
deleted={edit.deleted}
showCollapsedStats={false}
previewPath={edit.absolute_path || edit.path}
onOpenFilePreview={onOpenFilePreview}
/>
</li>
<>
{edits.map((edit) => (
<FileEditRow
key={edit.key}
edit={edit}
onOpenFilePreview={onOpenFilePreview}
/>
))}
</>
);
}
function FileEditRow({
edit,
displayMode,
onOpenFilePreview,
}: {
edit: FileEditSummary;
displayMode: FileEditDisplayMode;
onOpenFilePreview?: (path: string) => void;
}) {
const { t } = useTranslation();
const editing = edit.status === "editing";
const failed = edit.status === "error";
const action = fileEditAction(edit, editing, failed);
const hasCountedDiff = !failed && !edit.binary && hasVisibleDiffStats(edit);
const showDiff = canRenderDiff(edit, displayMode);
const rawFailureDetail = failed ? cleanFileEditError(edit.error) : "";
const failureDetail = failed
? formatFileEditError(edit.error)
|| t("message.fileEditFailedFallback", { defaultValue: "File change was not applied." })
: "";
const statusIcon = failed ? (
<AlertCircle className="h-3 w-3" aria-hidden />
) : editing ? (
@@ -158,9 +66,9 @@ function FileEditRow({
) : (
<CheckCircle2 className="h-3 w-3" aria-hidden />
);
return (
<ActivityStep
as="li"
marker={(
<span
className={cn(
@@ -176,42 +84,26 @@ function FileEditRow({
active={editing}
tone={failed ? "error" : editing ? "active" : "success"}
className="text-xs"
contentClassName={failed || showDiff ? "min-w-0" : "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3"}
title={rawFailureDetail || edit.absolute_path || edit.path}
ariaLabel={edit.path ? `${action} ${edit.path}` : action}
label={edit.pending && !edit.path
? t("message.fileEditPreparing", { defaultValue: "Preparing file edit…" })
: (
<FileReferenceChip
path={edit.path}
tooltipPath={edit.absolute_path}
previewPath={edit.absolute_path || edit.path}
onOpen={onOpenFilePreview}
display="path"
active={editing}
className="min-w-0"
textClassName="text-[12px]"
testId="activity-file-reference"
/>
<span className="flex min-w-0 items-center gap-1.5 overflow-hidden whitespace-nowrap">
<span className="shrink-0">{action}</span>
<FileReferenceChip
path={edit.path}
previewPath={edit.absolute_path || edit.path}
onOpen={onOpenFilePreview}
display="path"
active={editing}
className="min-w-0"
textClassName="truncate text-[12px]"
testId="activity-file-reference"
/>
{hasCountedDiff ? <DiffPair added={edit.added} deleted={edit.deleted} /> : null}
</span>
)}
detail={null}
aside={hasCountedDiff ? <DiffPair added={edit.added} deleted={edit.deleted} /> : null}
>
{failed ? (
<span className="block max-w-[42rem] truncate text-[11px] leading-4 text-destructive/75">
{failureDetail}
</span>
) : null}
{showDiff ? (
<FileUnifiedDiff
diff={edit.diff!}
collapsed={displayMode === "collapsed_diff"}
added={edit.added}
deleted={edit.deleted}
previewPath={edit.absolute_path || edit.path}
onOpenFilePreview={onOpenFilePreview}
/>
) : null}
</ActivityStep>
/>
);
}
@@ -219,262 +111,9 @@ export function hasVisibleDiffStats(edit: Pick<FileEditSummary, "added" | "delet
return edit.added > 0 || edit.deleted > 0;
}
function cleanFileEditError(error?: string): string {
const firstLine = (error || "").replace(/\s+/g, " ").trim();
if (!firstLine) return "";
return firstLine
.replace(/^Error applying patch:\s*/i, "")
.replace(/^Error writing file:\s*/i, "")
.replace(/^Error editing file:\s*/i, "")
.replace(/^Error:\s*/i, "");
}
function formatFileEditError(error?: string): string {
const cleaned = cleanFileEditError(error);
if (!cleaned) return "";
if (/\bpermission denied\b/i.test(cleaned) || /\boperation not permitted\b/i.test(cleaned)) {
return "No permission to change this location.";
}
return cleaned
.replace(/^old_text not found in (.+)$/i, "Target text was not found in $1.")
.replace(/^old_text appears multiple times in (.+)$/i, "Target text matched multiple places in $1.")
.replace(/^file to (?:update|delete) does not exist: (.+)$/i, "File does not exist: $1.")
.replace(/^path to (?:update|delete) is not a file: (.+)$/i, "Path is not a file: $1.")
.slice(0, 180);
}
function FileUnifiedDiff({
diff,
collapsed,
added,
deleted,
showCollapsedStats = true,
previewPath,
onOpenFilePreview,
}: {
diff: UIFileDiff;
collapsed: boolean;
added: number;
deleted: number;
showCollapsedStats?: boolean;
previewPath?: string;
onOpenFilePreview?: (path: string) => void;
}) {
const { t } = useTranslation();
const tx = (key: string, fallback: string) => t(key, { defaultValue: fallback });
const [open, setOpen] = useState(false);
const [expandedLines, setExpandedLines] = useState(false);
const renderableDiff = useMemo(() => parseRenderableFileDiff(diff), [diff]);
const language = useMemo(() => codeLanguageFromPath(previewPath), [previewPath]);
const totalLineCount = useMemo(() => countDiffLines(renderableDiff), [renderableDiff]);
const shouldAutoCollapse = totalLineCount > AUTO_COLLAPSE_DIFF_LINES || !!diff.truncated;
const startsCollapsed = collapsed || shouldAutoCollapse;
const shouldRenderBody = !startsCollapsed || open;
const shouldLimitLines = totalLineCount > INITIAL_VISIBLE_DIFF_LINES;
const lineLimit = expandedLines || !shouldLimitLines
? totalLineCount
: INITIAL_VISIBLE_DIFF_LINES;
const visibleDiff = useMemo(
() => shouldRenderBody
? selectVisibleDiffLines(renderableDiff, lineLimit, totalLineCount)
: EMPTY_VISIBLE_DIFF,
[lineLimit, renderableDiff, shouldRenderBody, totalLineCount],
);
const lineCountLabel = t("message.fileEditDiffLineCount", {
count: diff.truncated ? `${totalLineCount}+` : totalLineCount,
defaultValue: "{{count}} lines",
});
const viewDiffLabel = shouldAutoCollapse
? tx("message.fileEditViewLargeDiff", "View large diff")
: tx("message.fileEditViewDiff", "View diff");
useEffect(() => {
setOpen(false);
setExpandedLines(false);
}, [diff]);
const handleToggleOpen = () => {
if (open) setExpandedLines(false);
setOpen(!open);
};
if (totalLineCount === 0) return null;
const renderBody = () => (
<div
className="mt-1 overflow-hidden rounded-md border border-border/55 bg-background/80 shadow-[0_1px_0_rgba(15,23,42,0.03)]"
data-testid="file-edit-diff"
>
{visibleDiff.hunks.map(({ hunk, skippedBefore }, index) => (
<div
key={`${hunk.old_start}-${hunk.new_start}-${index}`}
className={cn("min-w-0", index > 0 && "border-t border-border/45")}
>
{skippedBefore > 0 ? <DiffHunkGap lineCount={skippedBefore} /> : null}
<div className="overflow-x-auto">
<DiffSyntaxHighlight language={language} lines={hunk.lines} />
</div>
</div>
))}
{visibleDiff.hiddenLineCount > 0 ? (
<div className="border-t border-border/45 bg-muted/30 px-2 py-1">
<button
type="button"
className={cn(
"inline-flex items-center gap-1 rounded px-1 py-0.5 text-[11px] font-medium",
"text-muted-foreground transition-colors hover:bg-muted/65 hover:text-foreground",
)}
data-testid="file-edit-diff-expand-lines"
onClick={() => setExpandedLines(true)}
>
<ChevronDown className="h-3 w-3" aria-hidden />
{t("message.fileEditShowMoreLines", {
count: visibleDiff.hiddenLineCount,
defaultValue: "Show {{count}} more lines",
})}
</button>
</div>
) : expandedLines && shouldLimitLines ? (
<div className="border-t border-border/45 bg-muted/30 px-2 py-1">
<button
type="button"
className={cn(
"inline-flex items-center gap-1 rounded px-1 py-0.5 text-[11px] font-medium",
"text-muted-foreground transition-colors hover:bg-muted/65 hover:text-foreground",
)}
data-testid="file-edit-diff-collapse-lines"
onClick={() => setExpandedLines(false)}
>
<ChevronUp className="h-3 w-3" aria-hidden />
{tx("message.fileEditShowFewerLines", "Show fewer lines")}
</button>
</div>
) : null}
{diff.truncated ? (
<div
className="flex flex-wrap items-center gap-x-2 gap-y-1 border-t border-border/45 bg-muted/35 px-2 py-1 text-[11px] text-muted-foreground"
data-testid="file-edit-diff-truncated"
>
<span>
{tx("message.fileEditDiffTruncated", "Diff truncated. Open the file for the full change.")}
</span>
{previewPath && onOpenFilePreview ? (
<button
type="button"
className={cn(
"inline-flex items-center gap-1 rounded px-1 py-0.5 font-medium",
"text-muted-foreground transition-colors hover:bg-muted/65 hover:text-foreground",
)}
data-testid="file-edit-diff-open-file"
onClick={() => onOpenFilePreview(previewPath)}
>
<ExternalLink className="h-3 w-3" aria-hidden />
{tx("message.fileEditOpenFile", "Open file")}
</button>
) : null}
</div>
) : null}
</div>
);
if (!startsCollapsed) return renderBody();
return (
<div className="mt-1">
<button
type="button"
aria-expanded={open}
data-testid="file-edit-diff-toggle"
onClick={handleToggleOpen}
className={cn(
"flex w-full cursor-pointer items-center gap-2 rounded-md border border-border/45 bg-muted/35 px-2 py-1 text-left",
"text-[11px] font-medium text-muted-foreground transition-colors hover:bg-muted/50",
)}
>
<ChevronRight
className={cn("h-3 w-3 shrink-0 transition-transform", open && "rotate-90")}
aria-hidden
/>
<span className="min-w-0 flex-1">{viewDiffLabel}</span>
<span className="shrink-0 text-muted-foreground/65">{lineCountLabel}</span>
{showCollapsedStats ? <DiffPair added={added} deleted={deleted} /> : null}
</button>
{open ? renderBody() : null}
</div>
);
}
function countDiffLines(diff: RenderableFileDiff): number {
return diff.hunks.reduce((total, hunk) => total + hunk.lines.length, 0);
}
function selectVisibleDiffLines(
diff: RenderableFileDiff,
lineLimit: number,
totalLineCount: number,
): VisibleDiff {
if (lineLimit >= totalLineCount) {
return {
hunks: diff.hunks.map((hunk, index) => ({
hunk,
skippedBefore: index > 0 ? countSkippedUnchangedLines(diff.hunks[index - 1], hunk) : 0,
})),
hiddenLineCount: 0,
};
}
let remaining = Math.max(0, lineLimit);
const hunks: VisibleDiffHunk[] = [];
let previousHunk: RenderableFileDiffHunk | null = null;
for (const hunk of diff.hunks) {
if (remaining <= 0) break;
const skippedBefore = previousHunk ? countSkippedUnchangedLines(previousHunk, hunk) : 0;
if (hunk.lines.length <= remaining) {
hunks.push({ hunk, skippedBefore });
remaining -= hunk.lines.length;
previousHunk = hunk;
continue;
}
hunks.push({ hunk: { ...hunk, lines: hunk.lines.slice(0, remaining) }, skippedBefore });
remaining = 0;
previousHunk = hunk;
}
return {
hunks,
hiddenLineCount: Math.max(0, totalLineCount - lineLimit),
};
}
function countSkippedUnchangedLines(
previous: RenderableFileDiffHunk,
current: RenderableFileDiffHunk,
): number {
const oldGap = current.old_start - (previous.old_start + previous.old_lines);
const newGap = current.new_start - (previous.new_start + previous.new_lines);
return Math.max(0, oldGap, newGap);
}
function DiffHunkGap({ lineCount }: { lineCount: number }) {
const { t } = useTranslation();
return (
<div
className="flex items-center gap-2 bg-muted/35 px-2 py-1 text-[11px] text-muted-foreground"
data-testid="file-edit-diff-hunk-gap"
>
<span
className="select-none rounded border border-border/45 bg-background/70 px-1 font-mono text-muted-foreground/70"
aria-hidden
>
...
</span>
<span>
{t("message.fileEditUnchangedLinesHidden", {
count: lineCount,
defaultValue: "{{count}} unchanged lines hidden",
})}
</span>
</div>
);
function fileEditAction(edit: FileEditSummary, editing: boolean, failed: boolean): string {
const deleting = edit.operation === "delete";
if (failed) return deleting ? "Could not delete" : "Could not edit";
if (editing) return deleting ? "Deleting" : "Editing";
return deleting ? "Deleted" : "Edited";
}
webui/src/components/thread/activity/GenericToolRun.tsx
+58
View File
@@ -0,0 +1,58 @@
import {
AlertCircle,
FileSearch,
FolderOpen,
ListTree,
MemoryStick,
Play,
type LucideIcon,
} from "lucide-react";
import { useMemo } from "react";
import { ActivityStep } from "@/components/thread/activity/ActivityStep";
import {
describeGenericToolRun,
type GenericToolRunItem,
type GenericToolStatus,
type ToolFamily,
} from "@/components/thread/activity/generic-tool-model";
interface GenericToolRunModel {
status: GenericToolStatus;
label: string;
detail: string;
aside: string;
icon: LucideIcon;
}
export function GenericToolRun({ items }: { items: GenericToolRunItem[] }) {
const model = useMemo(() => buildModel(items), [items]);
const action = [model.label, model.detail].filter(Boolean).join(" ");
const label = model.aside ? `${action} · ${model.aside}` : action;
return (
<ActivityStep
icon={model.status === "error" ? AlertCircle : model.icon}
active={model.status === "running"}
tone={model.status === "error" ? "error" : model.status === "done" ? "success" : "active"}
label={label}
/>
);
}
function buildModel(items: GenericToolRunItem[]): GenericToolRunModel {
const family = items[0]?.trace.family ?? "generic";
const presentation = describeGenericToolRun(items);
return {
...presentation,
icon: activityIcon(family),
};
}
function activityIcon(family: ToolFamily): LucideIcon {
if (family === "content-search" || family === "file-search") return FileSearch;
if (family === "list") return ListTree;
if (family === "read") return FolderOpen;
if (family === "memory") return MemoryStick;
return Play;
}
webui/src/components/thread/activity/ReasoningRow.tsx
+12 -28
View File
@@ -2,51 +2,35 @@ import { useEffect, useRef, useState } from "react";
import { Check, CircleDashed } from "lucide-react";
import { useTranslation } from "react-i18next";
import { MarkdownText, preloadMarkdownText } from "@/components/MarkdownText";
import { cn } from "@/lib/utils";
import { ActivityStep } from "./ActivityStep";
import { compactReasoningPreview } from "./reasoning-preview";
export function ReasoningRow({
text,
streaming,
onOpenFilePreview,
className,
}: {
text: string;
streaming: boolean;
onOpenFilePreview?: (path: string) => void;
className?: string;
}) {
const { t } = useTranslation();
useEffect(() => {
if (text.length > 0) preloadMarkdownText();
}, [text.length]);
const fallback = streaming
? t("message.reasoningStreaming", { defaultValue: "Thinking…" })
: t("message.reasoning", { defaultValue: "Thinking" });
const preview = compactReasoningPreview(text) || fallback;
return (
<ActivityStep
marker={<ReasoningMarker streaming={streaming} />}
active={streaming}
tone={streaming ? "active" : "success"}
label={streaming
? t("message.reasoningStreaming", { defaultValue: "Thinking…" })
: t("message.reasoning", { defaultValue: "Thinking" })}
>
{text.trim() ? (
<MarkdownText
streaming={streaming}
onOpenFilePreview={onOpenFilePreview}
className={cn(
"min-w-0 text-[12.5px] italic text-muted-foreground/78",
"prose-p:my-1 prose-li:my-0.5",
"prose-headings:mt-2 prose-headings:mb-1 prose-headings:font-medium",
"prose-headings:text-muted-foreground/88 prose-strong:text-muted-foreground",
"prose-h1:text-[15px] prose-h2:text-[13.5px] prose-h3:text-[12.5px] prose-h4:text-[12px]",
"prose-a:text-blue-500 prose-a:underline hover:prose-a:text-blue-600 dark:prose-a:text-blue-300 dark:hover:prose-a:text-blue-200",
"prose-code:text-[0.92em]",
)}
>
{text}
</MarkdownText>
) : null}
</ActivityStep>
label={preview}
labelClassName="italic text-muted-foreground/78"
contentClassName="overflow-hidden"
className={className}
/>
);
}
webui/src/components/thread/activity/ThinkingReasoningShell.tsx
+83
View File
@@ -0,0 +1,83 @@
import { ChevronDown } from "lucide-react";
import type { ReactNode, Ref } from "react";
import { cn } from "@/lib/utils";
interface ThinkingReasoningShellProps {
active: boolean;
expanded: boolean;
label: string;
children: ReactNode;
viewportRef: Ref<HTMLDivElement>;
contentRef: Ref<HTMLDivElement>;
onToggle: () => void;
onScroll: () => void;
}
export function ThinkingReasoningShell({
active,
expanded,
label,
children,
viewportRef,
contentRef,
onToggle,
onScroll,
}: ThinkingReasoningShellProps) {
return (
<div
className="flex w-full max-w-[45rem] animate-in flex-col fade-in duration-300 motion-reduce:animate-none"
data-state={active ? "thinking" : "done"}
>
<button
type="button"
className="group inline-flex min-h-5 items-center self-start gap-1.5 bg-transparent p-0"
onClick={onToggle}
aria-expanded={expanded}
aria-label={label}
aria-live={active ? "polite" : undefined}
>
<span
className={cn(
"min-w-0 truncate text-[13px] font-medium leading-[18px] text-muted-foreground/70",
active && "animate-pulse motion-reduce:animate-none",
)}
>
{label}
</span>
<ChevronDown
className={cn(
"h-3 w-3 shrink-0 text-muted-foreground/60 transition-[transform,color] duration-200",
"group-hover:text-muted-foreground motion-reduce:transition-none",
expanded && "rotate-180",
)}
strokeWidth={1.8}
aria-hidden
/>
</button>
<div
className={cn(
"grid transition-[grid-template-rows,opacity] duration-300 motion-reduce:transition-none",
expanded
? "grid-rows-[1fr] opacity-100"
: "pointer-events-none grid-rows-[0fr] opacity-0",
)}
>
<div className="min-h-0 overflow-hidden">
<div
ref={viewportRef}
data-testid={expanded ? "agent-activity-scroll" : undefined}
onScroll={onScroll}
className="mt-1.5 max-h-[180px] overflow-y-auto pr-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
aria-hidden={!expanded}
>
<div ref={contentRef} className="flex flex-col gap-0.5">
{children}
</div>
</div>
</div>
</div>
</div>
);
}
webui/src/components/thread/activity/WebActivityRow.tsx
+74
View File
@@ -0,0 +1,74 @@
import { Globe2 } from "lucide-react";
import { useMemo } from "react";
import { ActivityStep, type ActivityStepTone } from "@/components/thread/activity/ActivityStep";
import { useLogoFallback } from "@/hooks/useLogoFallback";
import { browserSafeFaviconUrls } from "@/lib/provider-brand";
interface WebActivityRowProps {
title: string;
href: string;
host: string;
displayUrl: string;
active?: boolean;
tone?: ActivityStepTone;
}
export function WebActivityRow({
title,
href,
host,
displayUrl,
active = false,
tone = active ? "active" : "neutral",
}: WebActivityRowProps) {
return (
<ActivityStep
marker={<WebFavicon host={host} active={active} />}
active={active}
tone={tone}
label={(
<a
href={href}
target="_blank"
rel="noreferrer noopener"
aria-label={`${title} · ${displayUrl}`}
className="flex min-w-0 items-center gap-2 overflow-hidden text-foreground/82 hover:text-foreground"
>
<span className="min-w-0 truncate font-medium">{title}</span>
<span
className="max-w-[9rem] shrink truncate rounded-full bg-muted/65 px-2 py-0.5 font-mono text-[10px] leading-4 text-muted-foreground/72 sm:max-w-[18rem]"
data-testid="activity-web-url"
>
{displayUrl}
</span>
</a>
)}
contentClassName="overflow-hidden"
/>
);
}
function WebFavicon({ host, active }: { host: string; active: boolean }) {
const candidates = useMemo(() => browserSafeFaviconUrls(host), [host]);
const { logoUrl, onLogoError, onLogoLoad } = useLogoFallback(candidates);
if (!logoUrl) {
return <Globe2 className="h-4 w-4 shrink-0 text-muted-foreground/52" aria-hidden />;
}
return (
<img
src={logoUrl}
alt=""
className={`h-4 w-4 shrink-0 rounded-[3px] object-contain${active ? " animate-pulse" : ""}`}
decoding="async"
loading="lazy"
referrerPolicy="no-referrer"
draggable={false}
onLoad={onLogoLoad}
onError={onLogoError}
data-testid={`activity-web-favicon-${host}`}
/>
);
}
webui/src/components/thread/activity/WebSearchRun.tsx
+34
View File
@@ -0,0 +1,34 @@
import { AlertCircle, Search } from "lucide-react";
import { ActivityStep } from "@/components/thread/activity/ActivityStep";
import { WebActivityRow } from "@/components/thread/activity/WebActivityRow";
import {
presentWebSearchAction,
type WebSearchRunModel,
} from "@/components/thread/activity/web-search-model";
export function WebSearchRun({ run, turnActive }: { run: WebSearchRunModel; turnActive: boolean }) {
const active = run.status === "running" && turnActive;
const status = run.status === "running" && !turnActive ? "done" : run.status;
const label = presentWebSearchAction(run.query, status);
return (
<>
<ActivityStep
icon={status === "error" ? AlertCircle : Search}
active={active}
tone={status === "error" ? "error" : status === "done" ? "success" : "active"}
label={label}
/>
{run.sources.map((source) => (
<WebActivityRow
key={source.href}
title={source.title}
href={source.href}
host={source.host}
displayUrl={source.displayUrl}
/>
))}
</>
);
}
webui/src/components/thread/activity/activity-message-model.ts
+114
View File
@@ -0,0 +1,114 @@
import {
canonicalToolTrace,
mergeToolProgressEvents,
mergeUniqueToolTraceLines,
} from "@/lib/tool-traces";
import type { UIMediaAttachment, UIMessage } from "@/lib/types";
/**
* Live tool progress is already folded into one trace message. Persisted
* transcripts can contain the same progress as adjacent start/end rows, so
* normalize both paths before rendering the activity timeline.
*/
export function coalesceActivityMessages(messages: UIMessage[]): UIMessage[] {
const normalized: UIMessage[] = [];
for (const message of messages) {
const targetIndex = findMergeTarget(normalized, message);
if (targetIndex < 0) {
normalized.push(message);
continue;
}
normalized[targetIndex] = mergeTraceMessages(normalized[targetIndex], message);
}
return normalized;
}
function findMergeTarget(messages: UIMessage[], incoming: UIMessage): number {
if (incoming.kind !== "trace") return -1;
for (let index = messages.length - 1; index >= 0; index -= 1) {
const previous = messages[index];
if (previous.kind !== "trace") continue;
if (hasSharedToolCall(previous, incoming) && sameTurn(previous, incoming)) return index;
}
const adjacentIndex = messages.length - 1;
const adjacent = messages[adjacentIndex];
return canMergeAdjacentProgress(adjacent, incoming) ? adjacentIndex : -1;
}
function canMergeAdjacentProgress(
previous: UIMessage | undefined,
incoming: UIMessage,
): previous is UIMessage {
if (!previous || previous.kind !== "trace") return false;
if (!sameTurn(previous, incoming)) return false;
if (
previous.activitySegmentId
&& incoming.activitySegmentId
&& previous.activitySegmentId === incoming.activitySegmentId
) {
return true;
}
return hasSharedTrace(previous, incoming) && completesPreviousProgress(previous, incoming);
}
function mergeTraceMessages(previous: UIMessage, incoming: UIMessage): UIMessage {
const traces = mergeUniqueToolTraceLines(messageTraces(previous), messageTraces(incoming)).traces;
const toolEvents = mergeToolProgressEvents(previous.toolEvents, incoming.toolEvents ?? []);
const fileEdits = [...(previous.fileEdits ?? []), ...(incoming.fileEdits ?? [])];
const media = uniqueMedia([...(previous.media ?? []), ...(incoming.media ?? [])]);
return {
...previous,
content: traces[traces.length - 1] ?? incoming.content ?? previous.content,
traces,
...(toolEvents.length ? { toolEvents } : { toolEvents: undefined }),
...(fileEdits.length ? { fileEdits } : { fileEdits: undefined }),
...(media.length ? { media } : { media: undefined }),
isStreaming: incoming.isStreaming,
turnPhase: incoming.turnPhase ?? previous.turnPhase,
turnSeq: incoming.turnSeq ?? previous.turnSeq,
};
}
function messageTraces(message: UIMessage): string[] {
if (message.traces?.length) return message.traces;
return message.content.trim() ? [message.content] : [];
}
function hasSharedToolCall(previous: UIMessage, incoming: UIMessage): boolean {
const previousCallIds = new Set(
(previous.toolEvents ?? []).map((event) => event.call_id).filter(Boolean),
);
return (incoming.toolEvents ?? []).some((event) => (
!!event.call_id && previousCallIds.has(event.call_id)
));
}
function hasSharedTrace(previous: UIMessage, incoming: UIMessage): boolean {
const previousTraces = new Set(messageTraces(previous).map(canonicalToolTrace));
return messageTraces(incoming).some((trace) => previousTraces.has(canonicalToolTrace(trace)));
}
function completesPreviousProgress(previous: UIMessage, incoming: UIMessage): boolean {
const previousPhases = new Set((previous.toolEvents ?? []).map((event) => event.phase));
const incomingPhases = new Set((incoming.toolEvents ?? []).map((event) => event.phase));
return previousPhases.has("start") && (incomingPhases.has("end") || incomingPhases.has("error"));
}
function sameTurn(previous: UIMessage, incoming: UIMessage): boolean {
return !previous.turnId || !incoming.turnId || previous.turnId === incoming.turnId;
}
function uniqueMedia(media: UIMediaAttachment[]): UIMediaAttachment[] {
const seen = new Set<string>();
return media.filter((item) => {
const key = `${item.kind}:${item.url ?? ""}:${item.name ?? ""}`;
if (seen.has(key)) return false;
seen.add(key);
return true;
});
}
webui/src/components/thread/activity/activity-text.ts
+68
View File
@@ -0,0 +1,68 @@
export function redactActivityText(value: string): string {
return value
.replace(/(https?:\/\/)[^/@\s]+@/gi, "$1<redacted>@")
.replace(/\b(Bearer)\s+[A-Za-z0-9._~+/=-]+/gi, "$1 <redacted>")
.replace(
/(^|[\s;])((?:[A-Z0-9_]*)(?:API[_-]?KEY|TOKEN|SECRET|PASSWORD|PASS|AUTH)(?:[A-Z0-9_]*))=(?:"[^"]*"|'[^']*'|[^\s]+)/gim,
"$1$2=<redacted>",
)
.replace(
/(--(?:api-?key|access-?token|token|secret|password)(?:=|\s+))(?:"[^"]*"|'[^']*'|[^\s]+)/gi,
"$1<redacted>",
)
.replace(/([?&](?:api_?key|access_?token|token|secret|password)=)[^&\s]+/gi, "$1<redacted>")
.replace(
/(["']?authorization["']?\s*[:=]\s*["']?)[^"'\r\n,;}]+/gi,
"$1<redacted>",
)
.replace(
/(["']?(?:api[_-]?key|access[_-]?token|token|secret|password)["']?\s*[:=]\s*)["']?[^"'\s,&;}]+["']?/gi,
"$1<redacted>",
)
.replace(/\b(?:sk(?:-proj)?|xox[baprs]?|xapp)[-_][A-Za-z0-9._-]{8,}\b/gi, "<redacted>")
.replace(/\bgh[pousr]_[A-Za-z0-9]{12,}\b/g, "<redacted>")
.replace(/\bAKIA[A-Z0-9]{16}\b/g, "<redacted>")
.replace(/\b\d{6,12}:[A-Za-z0-9_-]{20,}\b/g, "<redacted>");
}
export function redactShellCommand(command: string): string {
return redactActivityText(command).replaceAll("<redacted>", "••••");
}
export function compactActivityPath(value: string): string {
return value
.replace(/\/Users\/[^/\s"']+/g, "~")
.replace(/\/home\/[^/\s"']+/g, "~")
.replace(/\/private\/tmp\/[^\s"']+/g, "/tmp/…")
.replace(/\/var\/folders\/[^\s"']+/g, "/var/folders/…");
}
export function safeActivityDetail(value: string, maxLength = 96): string {
return truncateMiddle(
compactActivityPath(redactActivityText(value))
.replace(/\/\.nanobot\/tool-results\/[^\s"']+/g, "/.nanobot/tool-results/…")
.replace(/\s+/g, " ")
.replace(/^["']|["']$/g, "")
.trim(),
maxLength,
);
}
export function summarizeShellCommand(command: string): string {
const lines = redactShellCommand(command.replace(/\r\n/g, "\n"))
.split("\n")
.map((line) => line.trim())
.filter(Boolean);
const firstLine = compactActivityPath(lines[0] || "command");
const firstPreview = truncateMiddle(firstLine, 92);
return lines.length <= 1
? firstPreview
: `${firstPreview} · script, ${lines.length} lines`;
}
function truncateMiddle(value: string, maxLength: number): string {
if (value.length <= maxLength) return value;
const head = Math.ceil((maxLength - 1) * 0.62);
const tail = Math.floor((maxLength - 1) * 0.38);
return `${value.slice(0, head)}…${value.slice(-tail)}`;
}
webui/src/components/thread/activity/generic-tool-model.ts
+367
View File
@@ -0,0 +1,367 @@
import { compactActivityPath, redactActivityText } from "./activity-text";
export type GenericToolStatus = "running" | "done" | "error";
export type ToolFamily = "content-search" | "file-search" | "list" | "read" | "memory" | "generic";
export interface ToolField {
key:
| "query"
| "pattern"
| "glob"
| "path"
| "file_path"
| "url"
| "action"
| "key"
| "label"
| "name"
| "channel"
| "chat_id"
| "session_id"
| "ui_summary";
value: string;
}
export interface GenericToolTrace {
name: string;
family: ToolFamily;
groupKey: string;
fields: ToolField[];
collectedSource: boolean;
}
export interface GenericToolRunItem {
trace: GenericToolTrace;
status: GenericToolStatus;
error?: string;
}
export interface GenericToolPresentation {
status: GenericToolStatus;
label: string;
detail: string;
aside: string;
}
const CONTENT_SEARCH_TOOLS = new Set([
"grep",
"rg",
"ripgrep",
"search_code",
"search_content",
"search_files_content",
"find_text",
]);
const FILE_SEARCH_TOOLS = new Set([
"find",
"find_file",
"find_files",
"glob",
"search_files",
]);
const LIST_TOOLS = new Set(["list_dir", "list_directory", "list_files", "ls"]);
const READ_TOOLS = new Set(["read", "read_file", "read_text_file"]);
const MEMORY_TOOLS = new Set(["memory_search", "search_memory", "recall_memory"]);
const EXCLUDED_TOOL_PREFIXES = ["mcp_"];
const EXCLUDED_TOOLS = new Set([
"apply_patch",
"cli_anything_run",
"edit_file",
"exec",
"exec_command",
"execute_command",
"run_cli_app",
"run_command",
"run_shell",
"shell",
"terminal",
"web_fetch",
"web_search",
"write_file",
]);
export function parseGenericToolTrace(line: string): GenericToolTrace | null {
const call = parseCall(line);
if (!call || isExcludedTool(call.name)) return null;
const family = toolFamily(call.name);
const fields = safeFields(call.args);
const collectedSource = fields.some((field) => isCollectedSourcePath(field.value));
return {
name: call.name,
family,
groupKey: family === "generic"
? `${family}:${call.name}`
: `${family}:${collectedSource ? "collected" : "workspace"}`,
fields,
collectedSource,
};
}
export function canGroupGenericToolRuns(previous: GenericToolRunItem, next: GenericToolRunItem): boolean {
return previous.trace.groupKey === next.trace.groupKey;
}
function compactGenericToolPath(value: string): string {
const normalized = redactActivityText(value).replace(/\\/g, "/");
if (isCollectedSourcePath(normalized)) {
return truncateMiddle(normalized.split("/").pop() || "collected source", 64);
}
return compactActivityPath(normalized);
}
export function describeGenericToolRun(items: GenericToolRunItem[]): GenericToolPresentation {
const status = aggregateStatus(items);
const family = items[0]?.trace.family ?? "generic";
const name = items[0]?.trace.name ?? "tool";
const collected = items.length > 0 && items.every((item) => item.trace.collectedSource);
return {
status,
label: activityLabel(family, status, collected, name, items),
detail: activityDetail(items, family, name),
aside: activityAside(items, family),
};
}
function parseCall(line: string): { name: string; args: unknown } | null {
const match = /^([a-zA-Z0-9_.-]+)\((.*)\)$/.exec(line.trim());
if (!match) return null;
const name = compactToolName(match[1]);
let args: unknown;
try {
args = match[2].trim() ? JSON.parse(match[2]) : {};
} catch {
args = {};
}
return { name, args };
}
function compactToolName(name: string): string {
return name.toLowerCase().split(".").pop() || name.toLowerCase();
}
function isExcludedTool(name: string): boolean {
return EXCLUDED_TOOLS.has(name) || EXCLUDED_TOOL_PREFIXES.some((prefix) => name.startsWith(prefix));
}
function toolFamily(name: string): ToolFamily {
if (CONTENT_SEARCH_TOOLS.has(name)) return "content-search";
if (FILE_SEARCH_TOOLS.has(name)) return "file-search";
if (LIST_TOOLS.has(name)) return "list";
if (READ_TOOLS.has(name)) return "read";
if (MEMORY_TOOLS.has(name)) return "memory";
return "generic";
}
function safeFields(args: unknown): ToolField[] {
if (!args || typeof args !== "object" || Array.isArray(args)) return [];
const record = args as Record<string, unknown>;
const fields: ToolField[] = [];
for (const key of [
"query",
"pattern",
"glob",
"path",
"file_path",
"url",
"action",
"key",
"label",
"name",
"channel",
"chat_id",
"session_id",
"ui_summary",
] as const) {
const value = record[key];
if (typeof value === "string" && value.trim()) {
fields.push({ key, value: value.trim() });
}
}
return fields;
}
function aggregateStatus(items: GenericToolRunItem[]): GenericToolStatus {
if (items.some((item) => item.status === "error")) return "error";
if (items.some((item) => item.status === "running")) return "running";
return "done";
}
function activityLabel(
family: ToolFamily,
status: GenericToolStatus,
collected: boolean,
name: string,
items: GenericToolRunItem[],
): string {
if (family === "content-search") {
return statusCopy(
status,
collected ? "Reviewing sources" : "Searching files",
collected ? "Reviewed sources" : "Searched files",
collected ? "Could not review sources" : "Could not search files",
);
}
if (family === "file-search") {
return statusCopy(status, "Finding files", "Found files", "Could not find files");
}
if (family === "list") {
return statusCopy(status, "Listing files", "Listed files", "Could not list files");
}
if (family === "read") {
return statusCopy(
status,
collected ? "Reading source" : "Reading file",
collected ? "Read source" : "Read file",
collected ? "Could not read source" : "Could not read file",
);
}
if (family === "memory") {
return statusCopy(status, "Searching memory", "Searched memory", "Could not search memory");
}
const action = fieldValue(items[0]?.trace, "action").toLowerCase();
switch (name) {
case "generate_image":
return statusCopy(status, "Generating image", "Generated image", "Could not generate image");
case "spawn":
return statusCopy(status, "Delegating task", "Delegated task", "Could not delegate task");
case "message":
return statusCopy(status, "Sending message", "Sent message", "Could not send message");
case "my":
return action === "set" || action === "modify"
? statusCopy(status, "Updating agent settings", "Updated agent settings", "Could not update agent settings")
: statusCopy(status, "Checking agent settings", "Checked agent settings", "Could not check agent settings");
case "cron":
if (action === "add") return statusCopy(status, "Scheduling automation", "Scheduled automation", "Could not schedule automation");
if (action === "remove") return statusCopy(status, "Removing automation", "Removed automation", "Could not remove automation");
return statusCopy(status, "Checking automations", "Checked automations", "Could not check automations");
case "create_goal":
return statusCopy(status, "Starting long task", "Started long task", "Could not start long task");
case "update_goal":
return statusCopy(status, "Updating long task", "Updated long task", "Could not update long task");
case "write_stdin":
return statusCopy(status, "Continuing command", "Continued command", "Could not continue command");
case "list_exec_sessions":
return statusCopy(status, "Checking running commands", "Checked running commands", "Could not check running commands");
case "screenshot":
case "capture_screenshot":
return statusCopy(status, "Capturing screenshot", "Captured screenshot", "Could not capture screenshot");
default: {
const humanName = humanizeToolName(name);
return statusCopy(
status,
`Running ${humanName}`,
`Completed ${humanName}`,
`Could not complete ${humanName}`,
);
}
}
}
function activityDetail(items: GenericToolRunItem[], family: ToolFamily, name: string): string {
if (items.length !== 1) return "";
const trace = items[0].trace;
if (family === "content-search") {
return quote(fieldValue(trace, "query") || fieldValue(trace, "pattern"));
}
if (family === "file-search") {
return compactDetail(
fieldValue(trace, "glob")
|| fieldValue(trace, "query")
|| fieldValue(trace, "pattern")
|| fieldValue(trace, "path"),
);
}
if (family === "list" || family === "read") {
return compactDetail(fieldValue(trace, "path") || fieldValue(trace, "file_path"));
}
if (family === "memory") return quote(fieldValue(trace, "query"));
switch (name) {
case "spawn":
return safeText(fieldValue(trace, "label"));
case "message":
return safeText(fieldValue(trace, "channel"));
case "my":
return safeText(fieldValue(trace, "key"));
case "cron":
return safeText(fieldValue(trace, "name"));
case "create_goal":
return safeText(fieldValue(trace, "ui_summary"));
case "update_goal":
return safeText(fieldValue(trace, "action"));
case "write_stdin":
return compactIdentifier(fieldValue(trace, "session_id"));
case "screenshot":
case "capture_screenshot":
return "";
default:
return "";
}
}
function activityAside(items: GenericToolRunItem[], family: ToolFamily): string {
const pathCount = uniqueValues(items, ["path", "file_path"]).length;
if (pathCount > 1) return `${pathCount} files`;
if (items.length <= 1) return "";
if (family === "content-search" || family === "file-search" || family === "memory") {
return `${items.length} searches`;
}
return `${items.length} actions`;
}
function fieldValue(trace: GenericToolTrace | undefined, key: ToolField["key"]): string {
return trace?.fields.find((field) => field.key === key)?.value ?? "";
}
function uniqueValues(items: GenericToolRunItem[], keys: ToolField["key"][]): string[] {
const values = items.flatMap((item) => item.trace.fields)
.filter((field) => keys.includes(field.key))
.map((field) => field.value);
return [...new Set(values)];
}
function statusCopy(status: GenericToolStatus, running: string, done: string, failed: string): string {
return status === "running" ? running : status === "error" ? failed : done;
}
function compactDetail(value: string): string {
return value ? truncateMiddle(compactGenericToolPath(value), 88) : "";
}
function safeText(value: string): string {
return value ? truncateMiddle(redactActivityText(value).replace(/\s+/g, " ").trim(), 88) : "";
}
function quote(value: string): string {
const safe = safeText(value);
return safe ? `“${safe}”` : "";
}
function compactIdentifier(value: string): string {
const safe = safeText(value);
if (safe.length <= 16) return safe;
return `${safe.slice(0, 7)}…${safe.slice(-5)}`;
}
function humanizeToolName(name: string): string {
const words = name
.replace(/([a-z0-9])([A-Z])/g, "$1 $2")
.replace(/[._-]+/g, " ")
.replace(/\s+/g, " ")
.trim()
.toLowerCase();
return words ? `${words[0].toUpperCase()}${words.slice(1)}` : "tool action";
}
function isCollectedSourcePath(value: string): boolean {
const normalized = value.replace(/\\/g, "/");
return normalized.includes("/.nanobot/tool-results/") || normalized.includes("/nanobot/tool-results/");
}
function truncateMiddle(value: string, maxLength: number): string {
if (value.length <= maxLength) return value;
const head = Math.ceil((maxLength - 1) * 0.62);
const tail = Math.floor((maxLength - 1) * 0.38);
return `${value.slice(0, head)}…${value.slice(-tail)}`;
}
webui/src/components/thread/activity/mcp-activity-model.ts
+104
View File
@@ -0,0 +1,104 @@
import { safeActivityDetail } from "./activity-text";
import { formatCompactWebUrl, parseSafeActivityHttpUrl } from "./web-url";
export type McpActivityStatus = "running" | "done" | "error";
export interface McpActivityDescription {
action: string;
target?: string;
}
export function describeMcpActivity(
toolName: string,
args: unknown,
status: McpActivityStatus,
): McpActivityDescription {
const name = toolName.toLowerCase();
if (matches(name, "navigate", "goto", "open_url", "visit")) {
return describe(status, "Opening", "Opened", "Could not open", value(args, ["url"]));
}
if (matches(name, "click", "tap")) {
return describe(status, "Clicking", "Clicked", "Could not click", elementTarget(args));
}
if (matches(name, "type", "fill", "enter_text", "insert_text")) {
const target = value(args, ["element", "selector", "ref", "name"]);
return describe(status, "Entering text", "Entered text", "Could not enter text", target && `in ${target}`);
}
if (matches(name, "press_key", "keypress")) {
return describe(status, "Pressing", "Pressed", "Could not press", value(args, ["key"]));
}
if (matches(name, "hover")) {
return describe(status, "Hovering over", "Hovered over", "Could not hover over", elementTarget(args));
}
if (matches(name, "select", "select_option")) {
return describe(status, "Selecting", "Selected", "Could not select", elementTarget(args));
}
if (matches(name, "snapshot", "inspect", "get_page_content", "page_content")) {
return describe(status, "Inspecting page", "Inspected page", "Could not inspect page");
}
if (matches(name, "screenshot", "capture_screenshot")) {
return describe(status, "Capturing screenshot", "Captured screenshot", "Could not capture screenshot");
}
if (matches(name, "wait", "wait_for")) {
return describe(status, "Waiting for page", "Waited for page", "Page did not become ready");
}
if (matches(name, "search", "web_search")) {
return describe(status, "Searching", "Searched", "Could not search", value(args, ["query", "q"]));
}
const action = humanizeToolName(toolName);
if (status === "running") return { action: `Running ${action}` };
if (status === "error") return { action: `${action} failed` };
return { action: `${action} completed` };
}
function describe(
status: McpActivityStatus,
running: string,
done: string,
failed: string,
target?: string,
): McpActivityDescription {
return {
action: status === "running" ? running : status === "error" ? failed : done,
target: target ? compactUrl(target) : undefined,
};
}
function matches(name: string, ...actions: string[]): boolean {
return actions.some((action) => name === action || name.endsWith(`_${action}`));
}
function elementTarget(args: unknown): string | undefined {
return value(args, ["element", "selector", "ref", "name", "text"]);
}
function value(args: unknown, keys: string[]): string | undefined {
if (!args || typeof args !== "object" || Array.isArray(args)) return undefined;
const record = args as Record<string, unknown>;
for (const key of keys) {
const candidate = record[key];
if (typeof candidate === "string" && candidate.trim()) return candidate.trim();
if (typeof candidate === "number" || typeof candidate === "boolean") return String(candidate);
}
return undefined;
}
function compactUrl(value: string): string {
const url = parseSafeActivityHttpUrl(value);
if (url) return formatCompactWebUrl(url);
if (/^https?:\/\//i.test(value.trim())) return "Private address";
return safeActivityDetail(value, 80);
}
function humanizeToolName(value: string): string {
const words = value
.replace(/^(?:browser|page|playwright)[_.-]+/i, "")
.replace(/([a-z0-9])([A-Z])/g, "$1 $2")
.replace(/[_.-]+/g, " ")
.replace(/\s+/g, " ")
.trim()
.toLowerCase();
return words ? `${words[0].toUpperCase()}${words.slice(1)}` : "Tool call";
}
webui/src/components/thread/activity/reasoning-preview.ts
+7
View File
@@ -0,0 +1,7 @@
export function compactReasoningPreview(value: string): string {
return value
.replace(/\[([^\]]+)]\([^)]+\)/g, "$1")
.replace(/[*_#`~]+/g, "")
.replace(/\s+/g, " ")
.trim();
}
webui/src/components/thread/activity/trace-activity-model.ts
+236
View File
@@ -0,0 +1,236 @@
import type { GenericToolStatus } from "./generic-tool-model";
import { safeActivityDetail, summarizeShellCommand } from "./activity-text";
import { presentWebSearchAction } from "./web-search-model";
import { displayWebHost, formatCompactWebUrl, parseSafeActivityHttpUrl } from "./web-url";
export interface TraceDescription {
kind: "search" | "tool" | "done" | "trace";
label: string;
detail: string;
icon?: "clock";
url?: string;
host?: string;
}
export function describeTraceLine(
line: string,
status: GenericToolStatus,
result?: unknown,
): TraceDescription {
const trimmed = line.trim();
const functionMatch = /^([a-zA-Z0-9_.-]+)\((.*)\)$/.exec(trimmed);
const name = (functionMatch?.[1] ?? "").toLowerCase().split(".").pop() || "";
const args = functionMatch?.[2] ?? "";
const parsedUrl = traceUrlFromArgs(args, trimmed);
const webDetail = parsedUrl ? formatCompactWebUrl(parsedUrl) : "";
const plainWebReadTrace =
!!parsedUrl && /\b(fetch(?:ing|ed)?|read(?:ing)?|opened?|opening)\b/i.test(trimmed);
if (/search/i.test(name)) {
const query = traceFieldFromArgs(args, ["query", "q", "text"]) || args || trimmed;
return {
kind: "search",
label: presentWebSearchAction(query, status),
detail: "",
};
}
if (/fetch|read|open/i.test(name) || plainWebReadTrace) {
const rawTarget = traceFieldFromArgs(args, ["path", "file_path", "url"]) || args || trimmed;
const pageTitle = parsedUrl ? webPageTitle(result) : "";
return {
kind: "tool",
label: pageTitle || statusCopy(status, "Reading", "Read", "Could not read"),
detail: webDetail || (/^https?:\/\//i.test(rawTarget.trim())
? "Private address"
: safeActivityDetail(rawTarget)),
url: parsedUrl?.href,
host: parsedUrl ? displayWebHost(parsedUrl.hostname) : undefined,
};
}
if (isShellTraceName(name)) return describeShellTrace(args, trimmed, status);
if (name === "write_file") {
return describeFileMutationTrace(args, status, "Writing file", "Wrote file", "Could not write file");
}
if (name === "edit_file" || name === "apply_patch") {
return describeFileMutationTrace(args, status, "Editing file", "Edited file", "Could not edit file");
}
if (name) {
const action = humanizeTraceToolName(name);
return {
kind: "tool",
label: statusCopy(
status,
`Running ${action}`,
`Completed ${action}`,
`Could not complete ${action}`,
),
detail: "",
};
}
if (/done|complete|success/i.test(trimmed)) {
return { kind: "done", label: "Completed step", detail: safeActivityDetail(trimmed) };
}
return {
kind: status === "done" ? "done" : "trace",
label: statusCopy(status, "Working", "Completed step", "Step failed"),
detail: safeActivityDetail(trimmed),
};
}
function webPageTitle(result: unknown): string {
if (result && typeof result === "object" && !Array.isArray(result)) {
const title = (result as Record<string, unknown>).title;
if (typeof title === "string") return safeActivityDetail(title);
}
if (typeof result !== "string") return "";
const heading = result.match(/^#\s+(.+)$/m)?.[1]?.trim();
return heading ? safeActivityDetail(heading) : "";
}
function describeShellTrace(
args: string,
fallback: string,
status: GenericToolStatus,
): TraceDescription {
const command = shellCommandFromArgs(args) || fallback;
if (/^(?:\/(?:usr\/)?bin\/)?date(?:\s|$)/i.test(command.trim())) {
return {
kind: "tool",
label: statusCopy(
status,
"Checking current time",
"Checked current time",
"Could not check current time",
),
detail: "",
icon: "clock",
};
}
return {
kind: "tool",
label: statusCopy(status, "Running command", "Ran command", "Command failed"),
detail: summarizeShellCommand(command),
};
}
function describeFileMutationTrace(
args: string,
status: GenericToolStatus,
running: string,
done: string,
failed: string,
): TraceDescription {
const path = traceFieldFromArgs(args, ["path", "file_path"]);
return {
kind: "tool",
label: statusCopy(status, running, done, failed),
detail: path ? safeActivityDetail(path) : "",
};
}
function statusCopy(
status: GenericToolStatus,
running: string,
done: string,
failed: string,
): string {
return status === "running" ? running : status === "error" ? failed : done;
}
function traceFieldFromArgs(args: string, keys: string[]): string {
const compactArgs = args.trim();
if (!compactArgs) return "";
try {
const parsed = JSON.parse(compactArgs) as unknown;
if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return "";
const record = parsed as Record<string, unknown>;
for (const key of keys) {
const value = record[key];
if (typeof value === "string" && value.trim()) return value.trim();
}
} catch {
return "";
}
return "";
}
function isShellTraceName(name: string): boolean {
return [
"exec",
"exec_command",
"execute_command",
"run_command",
"run_shell",
"shell",
"terminal",
"bash",
"sh",
].includes(name.toLowerCase().split(".").pop() || name.toLowerCase());
}
function shellCommandFromArgs(args: string): string {
const compactArgs = args.trim();
if (!compactArgs) return "";
try {
const parsed = JSON.parse(compactArgs) as unknown;
if (typeof parsed === "string") return parsed;
if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return "";
const record = parsed as Record<string, unknown>;
for (const key of ["command", "cmd", "script", "input"]) {
const value = record[key];
if (typeof value === "string" && value.trim()) return value;
}
} catch {
return compactArgs.replace(/^["']|["']$/g, "");
}
return "";
}
function humanizeTraceToolName(name: string): string {
const words = name
.replace(/([a-z0-9])([A-Z])/g, "$1 $2")
.replace(/[._-]+/g, " ")
.replace(/\s+/g, " ")
.trim()
.toLowerCase();
return words ? `${words[0].toUpperCase()}${words.slice(1)}` : "tool action";
}
function traceUrlFromArgs(args: string, fallback: string): URL | null {
const candidates: string[] = [];
const compactArgs = args.trim();
if (compactArgs) {
try {
collectUrlCandidates(JSON.parse(compactArgs), candidates);
} catch {
candidates.push(compactArgs.replace(/^["']|["']$/g, ""));
}
}
candidates.push(fallback);
for (const candidate of candidates) {
const url = parseSafeActivityHttpUrl(candidate);
if (url) return url;
const embedded = candidate.match(/https?:\/\/[^\s"'<>),]+/i)?.[0];
if (embedded) {
const embeddedUrl = parseSafeActivityHttpUrl(embedded);
if (embeddedUrl) return embeddedUrl;
}
}
return null;
}
function collectUrlCandidates(value: unknown, candidates: string[]) {
if (typeof value === "string") {
candidates.push(value);
return;
}
if (!value || typeof value !== "object") return;
if (Array.isArray(value)) {
for (const item of value.slice(0, 6)) collectUrlCandidates(item, candidates);
return;
}
const record = value as Record<string, unknown>;
for (const key of ["url", "uri", "href", "link"]) {
if (typeof record[key] === "string") candidates.push(record[key]);
}
}
webui/src/components/thread/activity/web-search-model.ts
+279
View File
@@ -0,0 +1,279 @@
import { canonicalToolTrace, formatToolCallTrace } from "@/lib/tool-traces";
import type { ToolProgressEvent } from "@/lib/types";
import { redactActivityText, safeActivityDetail } from "./activity-text";
import { displayWebHost, formatCompactWebUrl, parseSafeActivityHttpUrl } from "./web-url";
export type WebSearchStatus = "running" | "done" | "error";
export interface WebSearchSource {
title: string;
href: string;
host: string;
displayUrl: string;
}
export interface WebSearchRunModel {
key: string;
query: string;
status: WebSearchStatus;
sources: WebSearchSource[];
error?: string;
}
interface WebSearchQueryPresentation {
query: string;
scope?: string;
}
const WEB_SEARCH_STATUS_RANK: Record<WebSearchStatus, number> = {
running: 1,
done: 2,
error: 3,
};
const MAX_VISIBLE_SOURCES = 8;
export function webSearchRunsByTraceLine(
events: ToolProgressEvent[],
): Map<string, WebSearchRunModel> {
const runs = new Map<string, WebSearchRunModel>();
for (const event of events) {
const run = webSearchRunFromEvent(event);
const line = run ? formatToolCallTrace(event) : null;
if (!run || !line) continue;
const key = canonicalToolTrace(line);
runs.set(key, mergeWebSearchRun(runs.get(key), run));
}
return runs;
}
function webSearchRunFromEvent(event: ToolProgressEvent): WebSearchRunModel | null {
const name = compactToolName(toolEventName(event));
if (name !== "web_search") return null;
const args = toolEventArguments(event);
const query = stringField(args, ["query", "q", "text"]);
const status: WebSearchStatus = event.phase === "error"
? "error"
: event.phase === "end"
? "done"
: "running";
return {
key: event.call_id ? `call:${event.call_id}` : formatToolCallTrace(event) ?? `web_search:${query}`,
query,
status,
sources: status === "done" ? webSearchSources(event.result) : [],
error: status === "error" ? readableError(event.error) : undefined,
};
}
function presentWebSearchQuery(query: string): WebSearchQueryPresentation {
const scopes: string[] = [];
const safeQuery = redactActivityText(query);
const cleanQuery = safeQuery
.replace(/(?:^|\s)site:([^\s]+)/gi, (_match, rawSite: string) => {
const scope = webSearchScope(rawSite);
if (scope && !scopes.includes(scope)) scopes.push(scope);
return " ";
})
.replace(/\s+/g, " ")
.trim();
return {
query: cleanQuery || safeQuery.trim(),
...(scopes.length === 1 ? { scope: scopes[0] } : {}),
};
}
export function presentWebSearchAction(
query: string,
status: WebSearchStatus,
): string {
const presentation = presentWebSearchQuery(query);
const verb = status === "error"
? "Could not search"
: status === "running"
? "Searching"
: "Searched";
const target = [presentation.scope, presentation.query].filter(Boolean).join(" · ");
return target ? `${verb} ${target}` : verb;
}
function mergeWebSearchRun(
existing: WebSearchRunModel | undefined,
incoming: WebSearchRunModel,
): WebSearchRunModel {
if (!existing) return incoming;
if (WEB_SEARCH_STATUS_RANK[incoming.status] < WEB_SEARCH_STATUS_RANK[existing.status]) {
return existing;
}
return {
...existing,
...incoming,
query: incoming.query || existing.query,
sources: incoming.sources.length ? incoming.sources : existing.sources,
};
}
function webSearchSources(result: unknown): WebSearchSource[] {
const candidates = structuredCandidates(result);
if (typeof result === "string") candidates.push(...textCandidates(result));
if (result && typeof result === "object" && !Array.isArray(result)) {
const record = result as Record<string, unknown>;
for (const key of ["content", "text", "result"]) {
if (typeof record[key] === "string") candidates.push(...textCandidates(record[key]));
}
}
const seen = new Set<string>();
const sources: WebSearchSource[] = [];
for (const candidate of candidates) {
const url = parseSafeActivityHttpUrl(candidate.url);
if (!url || seen.has(url.href)) continue;
seen.add(url.href);
sources.push({
title: cleanTitle(candidate.title) || displayWebHost(url.hostname),
href: url.href,
host: displayWebHost(url.hostname),
displayUrl: formatCompactWebUrl(url),
});
if (sources.length >= MAX_VISIBLE_SOURCES) break;
}
return sources;
}
function structuredCandidates(value: unknown): Array<{ title: string; url: string }> {
const items: unknown[] = [];
if (Array.isArray(value)) items.push(...value);
if (value && typeof value === "object" && !Array.isArray(value)) {
const record = value as Record<string, unknown>;
for (const key of ["results", "items", "sources", "data"]) {
if (Array.isArray(record[key])) items.push(...record[key]);
}
}
return items.flatMap((item) => {
if (!item || typeof item !== "object" || Array.isArray(item)) return [];
const record = item as Record<string, unknown>;
const title = stringField(record, ["title", "name", "label"]);
const url = stringField(record, ["url", "href", "link", "uri"]);
return url ? [{ title, url }] : [];
});
}
function textCandidates(text: string): Array<{ title: string; url: string }> {
const lines = text.split(/\r?\n/).map((line) => line.trim());
const candidates: Array<{ title: string; url: string }> = [];
for (let index = 0; index < lines.length; index += 1) {
const line = lines[index];
if (!line) continue;
const markdownLink = /^\s*(?:\d+[.)]\s*)?\[([^\]]+)]\((https?:\/\/[^)]+)\)\s*$/.exec(line);
if (markdownLink) {
candidates.push({ title: markdownLink[1], url: markdownLink[2] });
continue;
}
const numberedTitle = /^\d+[.)]\s+(.+)$/.exec(line);
if (!numberedTitle) continue;
const inlineUrl = firstHttpUrl(numberedTitle[1]);
if (inlineUrl) {
candidates.push({
title: numberedTitle[1].replace(inlineUrl, "").replace(/[\s:|\-–—]+$/, ""),
url: inlineUrl,
});
continue;
}
for (let next = index + 1; next < lines.length; next += 1) {
if (/^\d+[.)]\s+/.test(lines[next])) break;
const url = firstHttpUrl(lines[next]);
if (!url) continue;
candidates.push({ title: numberedTitle[1], url });
break;
}
}
return candidates;
}
function firstHttpUrl(value: string): string {
return value.match(/https?:\/\/[^\s<>"']+/i)?.[0]?.replace(/[),.;\]}]+$/, "") ?? "";
}
function cleanTitle(value: string): string {
return redactActivityText(value)
.replace(/^#+\s*/, "")
.replace(/^\*\*(.*)\*\*$/, "$1")
.replace(/^__(.*)__$/, "$1")
.trim();
}
function compactToolName(name: string): string {
return name.toLowerCase().split(".").pop() || name.toLowerCase();
}
function webSearchScope(rawSite: string): string | undefined {
const candidate = rawSite.replace(/^https?:\/\//i, "").replace(/^www\./i, "");
let host = candidate.split("/")[0]?.toLowerCase();
if (!host) return undefined;
if (host.startsWith("www.")) host = host.slice(4);
const knownScope = WEB_SEARCH_SCOPE_NAMES[host];
return knownScope ?? displayWebHost(host);
}
const WEB_SEARCH_SCOPE_NAMES: Record<string, string> = {
"anthropic.com": "Anthropic",
"crunchbase.com": "Crunchbase",
"github.com": "GitHub",
"linkedin.com": "LinkedIn",
"openai.com": "OpenAI",
"reddit.com": "Reddit",
"x.com": "X",
"youtube.com": "YouTube",
};
function toolEventName(event: ToolProgressEvent): string {
const functionName = (event as { function?: { name?: unknown } }).function?.name;
if (typeof functionName === "string") return functionName;
return typeof event.name === "string" ? event.name : "";
}
function toolEventArguments(event: ToolProgressEvent): unknown {
const functionArgs = (event as { function?: { arguments?: unknown } }).function?.arguments;
const raw = functionArgs ?? event.arguments;
if (typeof raw !== "string") return raw ?? {};
try {
return raw.trim() ? JSON.parse(raw) : {};
} catch {
return {};
}
}
function stringField(value: unknown, keys: string[]): string {
if (!value || typeof value !== "object" || Array.isArray(value)) return "";
const record = value as Record<string, unknown>;
for (const key of keys) {
const field = record[key];
if (typeof field === "string" && field.trim()) return field.trim();
}
return "";
}
function readableError(error: unknown): string | undefined {
if (typeof error === "string" && error.trim()) return safeErrorText(error);
if (!error) return undefined;
try {
return safeErrorText(JSON.stringify(error));
} catch {
return "Web search failed";
}
}
function safeErrorText(value: string): string {
return safeActivityDetail(value, 240);
}
webui/src/components/thread/activity/web-url.ts
+72
View File
@@ -0,0 +1,72 @@
export function parsePublicHttpUrl(value: string): URL | null {
try {
const url = new URL(value);
if (url.protocol !== "http:" && url.protocol !== "https:") return null;
if (url.username || url.password) return null;
if (isPrivateHostname(url.hostname)) return null;
return url;
} catch {
return null;
}
}
/** Public URL normalized for timeline display, with credentials and request-specific noise removed. */
export function parseSafeActivityHttpUrl(value: string): URL | null {
try {
const url = new URL(value);
if (url.protocol !== "http:" && url.protocol !== "https:") return null;
if (isPrivateHostname(url.hostname)) return null;
url.username = "";
url.password = "";
url.search = "";
url.hash = "";
return url;
} catch {
return null;
}
}
export function displayWebHost(hostname: string): string {
return hostname.replace(/^www\./i, "").toLowerCase();
}
export function formatCompactWebUrl(url: URL): string {
const host = displayWebHost(url.hostname);
const path = url.pathname && url.pathname !== "/" ? url.pathname.replace(/\/$/, "") : "";
return `${host}${path}`;
}
function isPrivateHostname(hostname: string): boolean {
const host = hostname.replace(/^\[|\]$/g, "").toLowerCase();
if (
!host
|| host === "localhost"
|| [".local", ".localhost", ".internal", ".home", ".lan"].some((suffix) => host.endsWith(suffix))
) return true;
if (!host.includes(".") && !host.includes(":")) return true;
const ipv4 = /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/.exec(host);
if (ipv4) {
const [, aText, bText] = ipv4;
const a = Number(aText);
const b = Number(bText);
return (
a === 0 ||
a === 10 ||
a === 127 ||
(a === 100 && b >= 64 && b <= 127) ||
(a === 169 && b === 254) ||
(a === 172 && b >= 16 && b <= 31) ||
(a === 192 && b === 168)
);
}
return (
host === "::"
|| host === "::1"
|| host.startsWith("::ffff:")
|| host.startsWith("fc")
|| host.startsWith("fd")
|| host.startsWith("fe80:")
);
}
webui/src/globals.css
+54 -1
View File
@@ -2,6 +2,13 @@
@tailwind components;
@tailwind utilities;
@supports (content-visibility: auto) {
.apps-catalog-row {
content-visibility: auto;
contain-intrinsic-size: auto 4.25rem;
}
}
/* Design tokens — HSL form, sourced from shadcn/ui's "neutral" palette. */
@layer base {
:root {
@@ -196,7 +203,7 @@
box-shadow: inset -9px 0 6px -1px rgb(0 0 0 / 0.02);
}
/* Markdown body styles, ported from agent-chat-ui's markdown-styles.css. */
/* Keep the outer document rhythm clean at message boundaries. */
.markdown-content > :first-child {
@apply mt-0;
}
@@ -211,6 +218,7 @@
--tw-prose-headings: hsl(var(--foreground));
--tw-prose-bold: hsl(var(--foreground));
--tw-prose-lead: hsl(var(--foreground));
line-height: var(--cjk-line-height);
}
.markdown-content .contains-task-list {
@@ -221,6 +229,33 @@
@apply list-none pl-0;
}
/* Show a caret only while the full markdown renderer is still loading. */
@keyframes streaming-caret-blink {
0%, 45% { opacity: 1; }
55%, 100% { opacity: 0; }
}
.streaming-text-fallback::after {
content: "";
display: inline-block;
width: 1.5px;
height: 1em;
margin-left: 3px;
vertical-align: -0.12em;
border-radius: 1px;
background: hsl(var(--foreground) / 0.8);
animation: streaming-caret-blink 1s step-end infinite;
}
@media (prefers-reduced-motion: reduce) {
[data-sd-animate] {
animation: none !important;
}
.streaming-text-fallback::after {
animation: none;
}
}
/* CJK-friendly line-height: prose paragraphs default to 1.625 which is
tight for Chinese/Japanese/Korean characters. Bump to 1.8 for better
readability when the browser detects a CJK primary font. */
@@ -294,6 +329,10 @@
animation: none;
content: "";
}
.markdown-content-streaming > :last-child::after,
.streaming-text-fallback::after {
animation: none;
}
}
@keyframes composer-status-strip-enter {
@@ -571,6 +610,13 @@
container-type: inline-size;
}
@supports (content-visibility: auto) {
.thread-render-unit {
content-visibility: auto;
contain-intrinsic-size: auto 12rem;
}
}
.thread-prompt-rail {
display: none;
left: 1.75rem;
@@ -588,3 +634,10 @@
}
}
}
@media (pointer: coarse) {
.touch-target {
min-width: 2.75rem;
min-height: 2.75rem;
}
}
webui/src/hooks/useLogoFallback.ts
+10 -1
View File
@@ -47,16 +47,24 @@ export function useLogoFallback(urls: readonly string[] | undefined) {
const safeUrls = useMemo(() => logoUrlsFromKey(cacheKey), [cacheKey]);
const [logoIndex, setLogoIndex] = useState(() => firstUsableLogoIndex(safeUrls));
const logoUrl = logoIndex >= 0 ? safeUrls[logoIndex] : undefined;
const [logoLoaded, setLogoLoaded] = useState(
() => Boolean(logoUrl && loadedLogoUrls.has(logoUrl)),
);
useEffect(() => {
setLogoIndex(firstUsableLogoIndex(safeUrls));
}, [cacheKey, safeUrls]);
useEffect(() => {
setLogoLoaded(Boolean(logoUrl && loadedLogoUrls.has(logoUrl)));
}, [logoUrl]);
const onLogoLoad = useCallback(() => {
if (!logoUrl || logoIndex < 0) return;
loadedLogoUrls.add(logoUrl);
failedLogoUrls.delete(logoUrl);
resolvedLogoIndexByKey.set(cacheKey, logoIndex);
setLogoLoaded(true);
}, [cacheKey, logoIndex, logoUrl]);
const onLogoError = useCallback(() => {
@@ -65,10 +73,11 @@ export function useLogoFallback(urls: readonly string[] | undefined) {
if (resolvedLogoIndexByKey.get(cacheKey) === logoIndex) {
resolvedLogoIndexByKey.delete(cacheKey);
}
setLogoLoaded(false);
setLogoIndex(nextLogoIndex(safeUrls, logoIndex));
}, [cacheKey, logoIndex, logoUrl, safeUrls]);
return { logoUrl, onLogoLoad, onLogoError };
return { logoUrl, logoLoaded, onLogoLoad, onLogoError };
}
export function __clearLogoFallbackCacheForTests(): void {
webui/src/hooks/useNanobotStream.ts
+69 -23
View File
@@ -42,6 +42,7 @@ type UIMessageTurnFields = Pick<UIMessage, "turnId" | "turnPhase" | "turnSeq">;
const FILE_EDIT_TOOL_NAMES = new Set(["write_file", "edit_file", "apply_patch"]);
const STREAM_END_IDLE_DELAY_MS = 1000;
const BACKGROUND_STREAM_FLUSH_INTERVAL_MS = 1_000;
function turnFieldsFromEvent(
ev: { turn_id?: string; turn_phase?: UITurnPhase; turn_seq?: number },
@@ -478,9 +479,12 @@ export interface SendAttachment {
export interface SendOptions {
cliApps?: OutboundCliAppMention[];
mcpPresets?: OutboundMcpPresetMention[];
quotedContext?: string;
workspaceScope?: WorkspaceScopePayload | null;
sideChannel?: boolean;
finalizeActiveTurn?: boolean;
/** Append guidance to the running turn without detaching its active answer segment. */
continueActiveTurn?: boolean;
}
function eventExtendsModelActivity(ev: InboundEvent): boolean {
@@ -548,6 +552,7 @@ export function useNanobotStream(
const activitySegmentCounterRef = useRef(0);
const pendingStreamEventsRef = useRef<PendingStreamEvent[]>([]);
const streamFrameRef = useRef<number | null>(null);
const streamTimerRef = useRef<number | null>(null);
const suppressStreamUntilTurnEndRef = useRef(false);
const sideChannelTurnIdsRef = useRef<Set<string>>(new Set());
/** Timer that defers ``isStreaming = false`` after ``stream_end``.
@@ -570,6 +575,10 @@ export function useNanobotStream(
window.cancelAnimationFrame(streamFrameRef.current);
streamFrameRef.current = null;
}
if (streamTimerRef.current !== null) {
window.clearTimeout(streamTimerRef.current);
streamTimerRef.current = null;
}
pendingStreamEventsRef.current = [];
}, []);
@@ -734,6 +743,10 @@ export function useNanobotStream(
window.cancelAnimationFrame(streamFrameRef.current);
streamFrameRef.current = null;
}
if (streamTimerRef.current !== null) {
window.clearTimeout(streamTimerRef.current);
streamTimerRef.current = null;
}
const events = pendingStreamEventsRef.current;
const finalAnswerText = options?.finalAnswerText;
const turn = options?.turn ?? {};
@@ -748,37 +761,47 @@ export function useNanobotStream(
const targetIndex =
resolveActiveAssistantIndex(next, turn)
?? findStreamingAssistantIndex(next, closedAssistantStreamIdsRef.current, turn);
if (targetIndex !== null) {
const target = next[targetIndex];
next = replaceMessageAt(next, targetIndex, {
...target,
if (targetIndex !== null) {
const target = next[targetIndex];
next = replaceMessageAt(next, targetIndex, {
...target,
content: finalAnswerText,
isStreaming: true,
...turn,
});
} else {
const id = crypto.randomUUID();
closedAssistantStreamIdsRef.current.add(id);
next = [
...next,
{
id,
role: "assistant",
content: finalAnswerText,
isStreaming: true,
...turn,
});
} else {
const id = crypto.randomUUID();
closedAssistantStreamIdsRef.current.add(id);
next = [
...next,
{
id,
role: "assistant",
content: finalAnswerText,
isStreaming: true,
...turn,
createdAt: Date.now(),
},
];
}
createdAt: Date.now(),
},
];
}
}
if (options?.closeAnswerSegment) closeActiveAssistantStream();
return next;
});
}, [applyPendingStreamEvents, closeActiveAssistantStream, resolveActiveAssistantIndex]);
const schedulePendingStreamFlush = useCallback(() => {
if (streamFrameRef.current !== null) return;
if (streamFrameRef.current !== null || streamTimerRef.current !== null) return;
if (document.visibilityState === "hidden") {
streamTimerRef.current = window.setTimeout(() => {
streamTimerRef.current = null;
const events = pendingStreamEventsRef.current;
if (events.length === 0) return;
pendingStreamEventsRef.current = [];
setMessages((prev) => applyPendingStreamEvents(prev, events));
}, BACKGROUND_STREAM_FLUSH_INTERVAL_MS);
return;
}
streamFrameRef.current = window.requestAnimationFrame(() => {
streamFrameRef.current = null;
const events = pendingStreamEventsRef.current;
@@ -788,6 +811,16 @@ export function useNanobotStream(
});
}, [applyPendingStreamEvents]);
useEffect(() => {
const flushOnReturn = () => {
if (document.visibilityState !== "visible") return;
if (pendingStreamEventsRef.current.length === 0) return;
flushPendingStreamEvents();
};
document.addEventListener("visibilitychange", flushOnReturn);
return () => document.removeEventListener("visibilitychange", flushOnReturn);
}, [flushPendingStreamEvents]);
// Reset local state when switching chats. Do not reset on every
// ``initialMessages`` update: a brand-new chat can receive an empty/404
// history response after the optimistic first message has already rendered.
@@ -863,6 +896,12 @@ export function useNanobotStream(
turn,
});
if (suppressStreamUntilTurnEndRef.current) return;
if (ev.resuming) {
cancelStreamEndTimer();
setIsStreaming(true);
setMessages((prev) => finalizeStreamedTurn(prev, turn));
return;
}
scheduleStreamEndTimer(turn);
return;
}
@@ -1144,6 +1183,7 @@ export function useNanobotStream(
const sideChannel = options?.sideChannel === true;
const finalizeActiveTurn = options?.finalizeActiveTurn === true;
const continueActiveTurn = options?.continueActiveTurn === true;
flushPendingStreamEvents();
if (finalizeActiveTurn) {
cancelStreamEndTimer();
@@ -1153,16 +1193,21 @@ export function useNanobotStream(
if (sideChannel) sideChannelTurnIdsRef.current.add(turnId);
const previews = hasAttachments ? images!.map((i) => i.preview) : undefined;
setMessages((prev) => {
if (!sideChannel || finalizeActiveTurn) {
if ((!sideChannel && !continueActiveTurn) || finalizeActiveTurn) {
buffer.current = null;
activeAssistantRef.current = null;
closedAssistantStreamIdsRef.current.clear();
clearActivitySegment();
suppressStreamUntilTurnEndRef.current = false;
} else if (continueActiveTurn) {
// Guidance belongs to the active backend turn. Preserve the answer
// cursor so its resuming stream_end can finalize the text already
// shown before the new user row, while starting fresh activity after it.
clearActivitySegment();
}
const base = finalizeActiveTurn ? finalizeStreamedTurn(prev) : prev;
return [
...(sideChannel ? base : pruneReasoningOnlyPlaceholders(base)),
...(sideChannel || continueActiveTurn ? base : pruneReasoningOnlyPlaceholders(base)),
{
id: crypto.randomUUID(),
role: "user",
@@ -1182,6 +1227,7 @@ export function useNanobotStream(
const wireOptions = { ...options, turnId };
delete wireOptions.sideChannel;
delete wireOptions.finalizeActiveTurn;
delete wireOptions.continueActiveTurn;
client.sendMessage(chatId, content, wireMedia, wireOptions);
},
[cancelStreamEndTimer, chatId, clearActivitySegment, client, flushPendingStreamEvents],
webui/src/hooks/usePageVisibility.ts
+18
View File
@@ -0,0 +1,18 @@
import { useEffect, useState } from "react";
function pageIsVisible(): boolean {
return typeof document === "undefined" || document.visibilityState !== "hidden";
}
/** Keep background tabs quiet while resuming work immediately on return. */
export function usePageVisibility(): boolean {
const [visible, setVisible] = useState(pageIsVisible);
useEffect(() => {
const update = () => setVisible(pageIsVisible());
document.addEventListener("visibilitychange", update);
return () => document.removeEventListener("visibilitychange", update);
}, []);
return visible;
}
webui/src/hooks/useSessionAutomationJobs.ts
+7 -9
View File
@@ -1,18 +1,20 @@
import { useEffect, useState } from "react";
import { usePageVisibility } from "@/hooks/usePageVisibility";
import { fetchSessionAutomations } from "@/lib/api";
import type { SessionAutomationJob } from "@/lib/types";
const AUTOMATIONS_REFRESH_MS = 3000;
export function useSessionAutomationJobs(open: boolean, token: string, sessionKey: string) {
const pageVisible = usePageVisibility();
const [jobs, setJobs] = useState<SessionAutomationJob[]>([]);
const [loading, setLoading] = useState(false);
const [loadFailed, setLoadFailed] = useState(false);
const [now, setNow] = useState(() => Date.now());
useEffect(() => {
if (!open) return;
if (!open || !pageVisible) return;
let cancelled = false;
let loadedOnce = false;
@@ -37,25 +39,21 @@ export function useSessionAutomationJobs(open: boolean, token: string, sessionKe
void refresh(true);
const refreshId = window.setInterval(() => void refresh(false), AUTOMATIONS_REFRESH_MS);
const refreshOnFocus = () => {
if (document.visibilityState !== "hidden") void refresh(false);
};
const refreshOnFocus = () => void refresh(false);
window.addEventListener("focus", refreshOnFocus);
document.addEventListener("visibilitychange", refreshOnFocus);
return () => {
cancelled = true;
window.clearInterval(refreshId);
window.removeEventListener("focus", refreshOnFocus);
document.removeEventListener("visibilitychange", refreshOnFocus);
};
}, [open, sessionKey, token]);
}, [open, pageVisible, sessionKey, token]);
useEffect(() => {
if (!open) return;
if (!open || !pageVisible) return;
setNow(Date.now());
const tickId = window.setInterval(() => setNow(Date.now()), 1000);
return () => window.clearInterval(tickId);
}, [open]);
}, [open, pageVisible]);
return { jobs, loading, loadFailed, now };
}
webui/src/i18n/locales/en/common.json
+7 -4
View File
@@ -198,7 +198,7 @@
"imageGeneration": "Expose generate_image in chats when a configured image provider is available.",
"imageProvider": "Choose the registry provider used by generate_image.",
"imageProviderStatus": "Image generation reuses provider credentials from Providers.",
"imageModel": "Model name sent to the selected image provider.",
"imageModel": "Choose a model supported by the selected image provider.",
"defaultAspectRatio": "Used when the prompt does not choose an aspect ratio.",
"defaultImageSize": "Size hint sent to providers that support it.",
"maxImagesPerTurn": "Upper bound for one generate_image request.",
@@ -938,6 +938,8 @@
"goalStateCloseAria": "Close goal",
"send": "Send message",
"stop": "Stop response",
"quotedContext": "Quoted context",
"removeQuotedContext": "Remove quoted context",
"modelNotConfigured": "Model not configured",
"configureModel": "Configure model",
"queued": {
@@ -1127,9 +1129,9 @@
"activityWorkingFor": "Working for {{duration}}",
"activityWorked": "Worked",
"activityWorkedFor": "Worked for {{duration}}",
"cliActivityRunningOne": "Using @{{name}}",
"cliActivityRanOne": "Used @{{name}}",
"cliActivityFailedOne": "Failed @{{name}}",
"cliActivityRunningOne": "Using {{name}}",
"cliActivityRanOne": "Used {{name}}",
"cliActivityFailedOne": "{{name}} failed",
"cliActivityRunningMany": "Using {{count}} CLI apps",
"cliActivityRanMany": "Used {{count}} CLI apps",
"cliActivityFailedMany": "{{count}} CLI apps failed",
@@ -1139,6 +1141,7 @@
"imageAttachment": "Image attachment",
"automationSourceFallback": "Automation",
"automationTriggered": "Triggered automatically",
"askAboutSelection": "Ask about this",
"forkFromHere": "Fork",
"copyReply": "Copy",
"copiedReply": "Copied",
webui/src/i18n/locales/es/common.json
+6 -3
View File
@@ -925,6 +925,8 @@
"goalStateCloseAria": "Cerrar objetivo",
"send": "Enviar mensaje",
"stop": "Detener respuesta",
"quotedContext": "Contexto citado",
"removeQuotedContext": "Quitar contexto citado",
"modelNotConfigured": "Modelo no configurado",
"configureModel": "Configurar modelo",
"queued": {
@@ -1109,6 +1111,7 @@
"agentActivityLiveSummary": "En curso… · {{reasoning}} pasos · {{tools}} llamadas a herramientas",
"agentActivityLiveToolsOnly": "En curso… · {{tools}} llamadas a herramientas",
"imageAttachment": "Imagen adjunta",
"askAboutSelection": "Preguntar sobre esto",
"forkFromHere": "Bifurcar",
"copyReply": "Copiar",
"copiedReply": "Copiado",
@@ -1127,9 +1130,9 @@
"activityWorkingFor": "Trabajando durante {{duration}}",
"activityWorked": "Trabajo completado",
"activityWorkedFor": "Trabajó durante {{duration}}",
"cliActivityRunningOne": "Usando @{{name}}",
"cliActivityRanOne": "Usó @{{name}}",
"cliActivityFailedOne": "Falló @{{name}}",
"cliActivityRunningOne": "Usando {{name}}",
"cliActivityRanOne": "Usó {{name}}",
"cliActivityFailedOne": "Falló {{name}}",
"cliActivityRunningMany": "Usando {{count}} apps CLI",
"cliActivityRanMany": "Usó {{count}} apps CLI",
"cliActivityFailedMany": "Fallaron {{count}} apps CLI",
webui/src/i18n/locales/fr/common.json
+6 -3
View File
@@ -924,6 +924,8 @@
"goalStateCloseAria": "Fermer l’objectif",
"send": "Envoyer le message",
"stop": "Arrêter la réponse",
"quotedContext": "Contexte cité",
"removeQuotedContext": "Supprimer le contexte cité",
"modelNotConfigured": "Modèle non configuré",
"configureModel": "Configurer le modèle",
"queued": {
@@ -1108,6 +1110,7 @@
"agentActivityLiveSummary": "En cours… · {{reasoning}} étapes · {{tools}} appels d’outils",
"agentActivityLiveToolsOnly": "En cours… · {{tools}} appels d’outils",
"imageAttachment": "Pièce jointe image",
"askAboutSelection": "Poser une question à ce sujet",
"forkFromHere": "Bifurquer",
"copyReply": "Copier",
"copiedReply": "Copié",
@@ -1126,9 +1129,9 @@
"activityWorkingFor": "Travail en cours depuis {{duration}}",
"activityWorked": "Travail terminé",
"activityWorkedFor": "Travail terminé en {{duration}}",
"cliActivityRunningOne": "Utilisation de @{{name}}",
"cliActivityRanOne": "@{{name}} utilisé",
"cliActivityFailedOne": "Échec de @{{name}}",
"cliActivityRunningOne": "Utilisation de {{name}}",
"cliActivityRanOne": "{{name}} utilisé",
"cliActivityFailedOne": "Échec de {{name}}",
"cliActivityRunningMany": "Utilisation de {{count}} apps CLI",
"cliActivityRanMany": "{{count}} apps CLI utilisées",
"cliActivityFailedMany": "Échec de {{count}} apps CLI",
webui/src/i18n/locales/id/common.json
+6 -3
View File
@@ -924,6 +924,8 @@
"goalStateCloseAria": "Tutup tujuan",
"send": "Kirim pesan",
"stop": "Hentikan respons",
"quotedContext": "Konteks kutipan",
"removeQuotedContext": "Hapus konteks kutipan",
"modelNotConfigured": "Model belum dikonfigurasi",
"configureModel": "Konfigurasi model",
"queued": {
@@ -1108,6 +1110,7 @@
"agentActivityLiveSummary": "Berjalan… · {{reasoning}} langkah · {{tools}} panggilan alat",
"agentActivityLiveToolsOnly": "Berjalan… · {{tools}} panggilan alat",
"imageAttachment": "Lampiran gambar",
"askAboutSelection": "Tanyakan tentang ini",
"forkFromHere": "Fork",
"copyReply": "Salin",
"copiedReply": "Disalin",
@@ -1126,9 +1129,9 @@
"activityWorkingFor": "Memproses selama {{duration}}",
"activityWorked": "Selesai memproses",
"activityWorkedFor": "Diproses selama {{duration}}",
"cliActivityRunningOne": "Menggunakan @{{name}}",
"cliActivityRanOne": "Menggunakan @{{name}} selesai",
"cliActivityFailedOne": "@{{name}} gagal",
"cliActivityRunningOne": "Menggunakan {{name}}",
"cliActivityRanOne": "Menggunakan {{name}} selesai",
"cliActivityFailedOne": "{{name}} gagal",
"cliActivityRunningMany": "Menggunakan {{count}} aplikasi CLI",
"cliActivityRanMany": "{{count}} aplikasi CLI digunakan",
"cliActivityFailedMany": "{{count}} aplikasi CLI gagal",
webui/src/i18n/locales/ja/common.json
+6 -3
View File
@@ -924,6 +924,8 @@
"goalStateCloseAria": "目標を閉じる",
"send": "メッセージを送信",
"stop": "応答を停止",
"quotedContext": "引用したコンテキスト",
"removeQuotedContext": "引用したコンテキストを削除",
"modelNotConfigured": "モデルが未設定です",
"configureModel": "モデルを設定",
"queued": {
@@ -1108,6 +1110,7 @@
"agentActivityLiveSummary": "実行中… · {{reasoning}} ステップ · ツール呼び出し {{tools}} 回",
"agentActivityLiveToolsOnly": "実行中… · ツール呼び出し {{tools}} 回",
"imageAttachment": "画像の添付",
"askAboutSelection": "この内容について質問",
"forkFromHere": "分岐",
"copyReply": "コピー",
"copiedReply": "コピー済み",
@@ -1126,9 +1129,9 @@
"activityWorkingFor": "{{duration}}作業中",
"activityWorked": "作業しました",
"activityWorkedFor": "{{duration}}作業しました",
"cliActivityRunningOne": "@{{name}} を使用中",
"cliActivityRanOne": "@{{name}} を使用しました",
"cliActivityFailedOne": "@{{name}} が失敗しました",
"cliActivityRunningOne": "{{name}} を使用中",
"cliActivityRanOne": "{{name}} を使用しました",
"cliActivityFailedOne": "{{name}} が失敗しました",
"cliActivityRunningMany": "{{count}} 個の CLI アプリを使用中",
"cliActivityRanMany": "{{count}} 個の CLI アプリを使用しました",
"cliActivityFailedMany": "{{count}} 個の CLI アプリが失敗しました",
webui/src/i18n/locales/ko/common.json
+6 -3
View File
@@ -924,6 +924,8 @@
"goalStateCloseAria": "목표 닫기",
"send": "메시지 보내기",
"stop": "응답 중지",
"quotedContext": "인용한 문맥",
"removeQuotedContext": "인용한 문맥 제거",
"modelNotConfigured": "모델이 설정되지 않음",
"configureModel": "모델 설정",
"queued": {
@@ -1108,6 +1110,7 @@
"agentActivityLiveSummary": "진행 중… · {{reasoning}}단계 · 도구 호출 {{tools}}회",
"agentActivityLiveToolsOnly": "진행 중… · 도구 호출 {{tools}}회",
"imageAttachment": "이미지 첨부",
"askAboutSelection": "이 내용에 대해 질문하기",
"forkFromHere": "분기",
"copyReply": "복사",
"copiedReply": "복사됨",
@@ -1126,9 +1129,9 @@
"activityWorkingFor": "{{duration}} 동안 작업 중",
"activityWorked": "작업함",
"activityWorkedFor": "{{duration}} 동안 작업함",
"cliActivityRunningOne": "@{{name}} 사용 중",
"cliActivityRanOne": "@{{name}} 사용함",
"cliActivityFailedOne": "@{{name}} 실패",
"cliActivityRunningOne": "{{name}} 사용 중",
"cliActivityRanOne": "{{name}} 사용함",
"cliActivityFailedOne": "{{name}} 실패",
"cliActivityRunningMany": "CLI 앱 {{count}}개 사용 중",
"cliActivityRanMany": "CLI 앱 {{count}}개 사용함",
"cliActivityFailedMany": "CLI 앱 {{count}}개 실패",
webui/src/i18n/locales/pt-BR/common.json
+6 -3
View File
@@ -938,6 +938,8 @@
"goalStateCloseAria": "Fechar objetivo",
"send": "Enviar mensagem",
"stop": "Parar resposta",
"quotedContext": "Contexto citado",
"removeQuotedContext": "Remover contexto citado",
"modelNotConfigured": "Modelo não configurado",
"configureModel": "Configurar modelo",
"queued": {
@@ -1127,9 +1129,9 @@
"activityWorkingFor": "Trabalhando por {{duration}}",
"activityWorked": "Trabalhou",
"activityWorkedFor": "Trabalhou por {{duration}}",
"cliActivityRunningOne": "Usando @{{name}}",
"cliActivityRanOne": "Usou @{{name}}",
"cliActivityFailedOne": "Falhou em @{{name}}",
"cliActivityRunningOne": "Usando {{name}}",
"cliActivityRanOne": "Usou {{name}}",
"cliActivityFailedOne": "Falhou em {{name}}",
"cliActivityRunningMany": "Usando {{count}} apps CLI",
"cliActivityRanMany": "Usou {{count}} apps CLI",
"cliActivityFailedMany": "{{count}} apps CLI falharam",
@@ -1139,6 +1141,7 @@
"imageAttachment": "Anexo de imagem",
"automationSourceFallback": "Automação",
"automationTriggered": "Acionada automaticamente",
"askAboutSelection": "Perguntar sobre isto",
"forkFromHere": "Fazer fork",
"copyReply": "Copiar",
"copiedReply": "Copiado",
webui/src/i18n/locales/vi/common.json
+6 -3
View File
@@ -924,6 +924,8 @@
"goalStateCloseAria": "Đóng mục tiêu",
"send": "Gửi tin nhắn",
"stop": "Dừng phản hồi",
"quotedContext": "Ngữ cảnh được trích dẫn",
"removeQuotedContext": "Xóa ngữ cảnh được trích dẫn",
"modelNotConfigured": "Chưa cấu hình mô hình",
"configureModel": "Cấu hình mô hình",
"queued": {
@@ -1108,6 +1110,7 @@
"agentActivityLiveSummary": "Đang chạy… · {{reasoning}} bước · {{tools}} lần gọi công cụ",
"agentActivityLiveToolsOnly": "Đang chạy… · {{tools}} lần gọi công cụ",
"imageAttachment": "Tệp hình ảnh đính kèm",
"askAboutSelection": "Hỏi về nội dung này",
"forkFromHere": "Tách nhánh",
"copyReply": "Sao chép",
"copiedReply": "Đã sao chép",
@@ -1126,9 +1129,9 @@
"activityWorkingFor": "Đang xử lý trong {{duration}}",
"activityWorked": "Đã xử lý",
"activityWorkedFor": "Đã xử lý trong {{duration}}",
"cliActivityRunningOne": "Đang dùng @{{name}}",
"cliActivityRanOne": "Đã dùng @{{name}}",
"cliActivityFailedOne": "@{{name}} thất bại",
"cliActivityRunningOne": "Đang dùng {{name}}",
"cliActivityRanOne": "Đã dùng {{name}}",
"cliActivityFailedOne": "{{name}} thất bại",
"cliActivityRunningMany": "Đang dùng {{count}} ứng dụng CLI",
"cliActivityRanMany": "Đã dùng {{count}} ứng dụng CLI",
"cliActivityFailedMany": "{{count}} ứng dụng CLI thất bại",
webui/src/i18n/locales/zh-CN/common.json
+7 -4
View File
@@ -198,7 +198,7 @@
"imageGeneration": "配置图片提供商后，在聊天中开放 generate_image。",
"imageProvider": "选择 generate_image 使用的注册提供商。",
"imageProviderStatus": "图片生成会复用「提供商」里的凭据。",
"imageModel": "发送给所选图片提供商的模型名称。",
"imageModel": "选择当前图片提供商支持的模型。",
"defaultAspectRatio": "当提示词没有指定比例时使用。",
"defaultImageSize": "发送给支持此选项的提供商的尺寸提示。",
"maxImagesPerTurn": "单次 generate_image 请求可生成的图片上限。",
@@ -937,6 +937,8 @@
"goalStateSheetTitle": "目标",
"send": "发送消息",
"stop": "停止响应",
"quotedContext": "引用内容",
"removeQuotedContext": "移除引用内容",
"modelNotConfigured": "模型未配置",
"configureModel": "配置模型",
"queued": {
@@ -1127,9 +1129,9 @@
"activityWorkingFor": "处理中 {{duration}}",
"activityWorked": "已处理",
"activityWorkedFor": "处理了 {{duration}}",
"cliActivityRunningOne": "正在使用 @{{name}}",
"cliActivityRanOne": "已使用 @{{name}}",
"cliActivityFailedOne": "使用 @{{name}} 失败",
"cliActivityRunningOne": "正在使用 {{name}}",
"cliActivityRanOne": "已使用 {{name}}",
"cliActivityFailedOne": "使用 {{name}} 失败",
"cliActivityRunningMany": "正在使用 {{count}} 个 CLI 应用",
"cliActivityRanMany": "已使用 {{count}} 个 CLI 应用",
"cliActivityFailedMany": "{{count}} 个 CLI 应用失败",
@@ -1139,6 +1141,7 @@
"imageAttachment": "图片附件",
"automationSourceFallback": "自动化",
"automationTriggered": "自动触发",
"askAboutSelection": "继续提问",
"forkFromHere": "分叉",
"copyReply": "复制",
"copiedReply": "已复制",
webui/src/i18n/locales/zh-TW/common.json
+4 -1
View File
@@ -924,6 +924,8 @@
"goalStateCloseAria": "關閉目標",
"send": "送出訊息",
"stop": "停止回覆",
"quotedContext": "引用內容",
"removeQuotedContext": "移除引用內容",
"modelNotConfigured": "尚未設定模型",
"configureModel": "設定模型",
"queued": {
@@ -1136,7 +1138,8 @@
"cliRunRan": "已使用",
"cliRunFailed": "失敗",
"automationSourceFallback": "自動化",
"automationTriggered": "已自動觸發"
"automationTriggered": "已自動觸發",
"askAboutSelection": "繼續提問"
},
"lightbox": {
"title": "圖片預覽",
webui/src/lib/activity-timeline.ts
+1 -159
View File
@@ -1,44 +1,9 @@
import { toMediaAttachment } from "@/lib/media";
import type { ToolProgressEvent, UIMediaAttachment, UIMessage } from "@/lib/types";
export type ActivityItemType = "reasoning" | "tool" | "cli" | "mcp" | "file_edit" | "media";
export type ActivityStepStatus = "pending" | "running" | "done" | "error";
export type ActivityStepSource = "reasoning" | "tool" | "web" | "browser" | "shell" | "mcp" | "file" | "media";
export interface ActivityItem {
type: ActivityItemType;
message: UIMessage;
}
export interface ActivityEvidence {
id: string;
attachment: UIMediaAttachment;
caption?: string;
source: ActivityStepSource;
}
export interface ActivityStepItem {
id: string;
label: string;
detail?: string;
status: ActivityStepStatus;
source: ActivityStepSource;
preview?: ActivityEvidence[];
error?: string;
}
export interface ActivityGroup {
id: string;
title: string;
source: ActivityStepSource;
steps: ActivityStepItem[];
}
import type { UIMessage } from "@/lib/types";
export type TurnUnit =
| {
type: "activity";
messages: UIMessage[];
items: ActivityItem[];
turnLatencyMs?: number;
startedAtMs?: number;
}
@@ -243,7 +208,6 @@ function pushActivityUnits(
units.push({
type: "activity",
messages: runMessages,
items: runMessages.flatMap(activityItemsForMessage),
turnLatencyMs: activityTurnLatencyMs(runMessages, visibleMessages),
startedAtMs,
});
@@ -306,35 +270,6 @@ function stripInlineReasoning(message: UIMessage): UIMessage {
return next;
}
function activityItemsForMessage(message: UIMessage): ActivityItem[] {
if (isReasoningOnlyAssistant(message)) {
return [{ type: "reasoning", message }];
}
if (message.kind !== "trace") return [];
const items: ActivityItem[] = [];
if (message.fileEdits?.length) {
items.push({ type: "file_edit", message });
}
for (const event of message.toolEvents ?? []) {
const name = String(event.name ?? "").toLowerCase();
if (name === "run_cli_app") {
items.push({ type: "cli", message });
} else if (name === "mcp") {
items.push({ type: "mcp", message });
} else {
items.push({ type: "tool", message });
}
}
if (items.length === 0 && (message.traces?.length || message.content.trim())) {
items.push({ type: "tool", message });
}
if (message.media?.length) {
items.push({ type: "media", message });
}
return items;
}
function activityTurnLatencyMs(activityMessages: UIMessage[], visibleMessages: UIMessage[]): number | undefined {
for (let i = visibleMessages.length - 1; i >= 0; i -= 1) {
const latency = visibleMessages[i].latencyMs;
@@ -350,96 +285,3 @@ function activityTurnLatencyMs(activityMessages: UIMessage[], visibleMessages: U
function isValidLatency(value: unknown): value is number {
return typeof value === "number" && Number.isFinite(value) && value >= 0;
}
export function activityEvidenceFromToolEvent(event: ToolProgressEvent): ActivityEvidence[] {
const source = activitySourceFromToolName(toolEventName(event));
const evidence: ActivityEvidence[] = [];
const extras = [
...unknownList((event as { embeds?: unknown }).embeds),
...unknownList((event as { files?: unknown }).files),
];
extras.forEach((value, index) => {
const attachment = mediaAttachmentFromUnknown(value);
if (!attachment) return;
evidence.push({
id: `${event.call_id || toolEventName(event) || "tool"}:${index}:${attachment.url || attachment.name || attachment.kind}`,
attachment,
caption: attachment.name,
source,
});
});
return evidence;
}
export function activityEvidenceFromMessageMedia(message: UIMessage): ActivityEvidence[] {
return (message.media ?? []).map((attachment, index) => ({
id: `${message.id}:media:${index}:${attachment.url || attachment.name || attachment.kind}`,
attachment,
caption: attachment.name,
source: "media",
}));
}
function unknownList(value: unknown): unknown[] {
return Array.isArray(value) ? value : [];
}
function toolEventName(event: ToolProgressEvent): string {
return typeof (event as { function?: { name?: unknown } }).function?.name === "string"
? String((event as { function?: { name?: unknown } }).function?.name)
: typeof event.name === "string"
? event.name
: "";
}
function activitySourceFromToolName(name: string): ActivityStepSource {
const compact = name.toLowerCase();
if (compact.includes("browser") || compact.includes("screenshot")) return "browser";
if (compact.includes("web") || compact.includes("search") || compact.includes("fetch") || compact.includes("read")) return "web";
if (compact.includes("exec") || compact.includes("shell") || compact.includes("cli")) return "shell";
if (compact.startsWith("mcp_") || compact === "mcp") return "mcp";
if (compact.includes("file") || compact.includes("patch")) return "file";
if (compact.includes("image") || compact.includes("video") || compact.includes("media")) return "media";
return "tool";
}
function mediaAttachmentFromUnknown(value: unknown): UIMediaAttachment | null {
if (typeof value === "string") {
const text = value.trim();
if (!text) return null;
return toMediaAttachment({ url: looksLikeUrl(text) ? text : undefined, name: baseName(text) });
}
if (!value || typeof value !== "object" || Array.isArray(value)) return null;
const record = value as Record<string, unknown>;
const url = stringField(record, ["url", "href", "src", "uri", "signed_url", "thumbnail_url"]);
const path = stringField(record, ["path", "absolute_path", "file", "filename"]);
const name = stringField(record, ["name", "filename", "title", "label"]) ?? baseName(url ?? path ?? "");
const kind = mediaKindFromRecord(record, url, name);
return toMediaAttachment({ url, name, kind });
}
function stringField(record: Record<string, unknown>, keys: string[]): string | undefined {
for (const key of keys) {
const value = record[key];
if (typeof value === "string" && value.trim()) return value.trim();
}
return undefined;
}
function mediaKindFromRecord(record: Record<string, unknown>, url?: string, name?: string): UIMediaAttachment["kind"] | undefined {
const raw = stringField(record, ["kind", "type", "mime", "mime_type", "content_type"])?.toLowerCase() ?? "";
if (raw.includes("image") || raw.includes("screenshot")) return "image";
if (raw.includes("video") || raw.includes("mp4") || raw.includes("quicktime")) return "video";
if (raw.includes("file") || raw.includes("document")) return "file";
return toMediaAttachment({ url, name }).kind;
}
function looksLikeUrl(value: string): boolean {
return /^(https?:|data:|\/api\/|blob:)/i.test(value);
}
function baseName(value: string): string | undefined {
const clean = value.split(/[?#]/, 1)[0] ?? "";
const last = clean.split(/[\\/]/).filter(Boolean).pop();
return last || undefined;
}
webui/src/lib/nanobot-client.ts
+2
View File
@@ -386,6 +386,7 @@ export class NanobotClient {
options?: {
cliApps?: OutboundCliAppMention[];
mcpPresets?: OutboundMcpPresetMention[];
quotedContext?: string;
workspaceScope?: WorkspaceScopePayload | null;
turnId?: string;
},
@@ -398,6 +399,7 @@ export class NanobotClient {
...(media && media.length > 0 ? { media } : {}),
...(options?.cliApps?.length ? { cli_apps: options.cliApps } : {}),
...(options?.mcpPresets?.length ? { mcp_presets: options.mcpPresets } : {}),
...(options?.quotedContext?.trim() ? { quoted_context: options.quotedContext.trim() } : {}),
...(options?.workspaceScope ? { workspace_scope: options.workspaceScope } : {}),
...(options?.turnId ? { turn_id: options.turnId } : {}),
webui: true,
webui/src/lib/provider-brand.ts
+36 -1
View File
@@ -17,6 +17,10 @@ function googleFaviconUrl(domain: string): string {
return `https://www.google.com/s2/favicons?domain=${encodeURIComponent(domain)}&sz=64`;
}
function faviconImUrl(domain: string): string {
return `https://favicon.im/${encodeURIComponent(domain)}?larger=true`;
}
export function faviconUrls(domain: string): string[] {
const faviconDomain = faviconDomainFromValue(domain);
return [
@@ -26,6 +30,22 @@ export function faviconUrls(domain: string): string[] {
];
}
/**
* Cross-origin page favicons commonly opt into same-origin resource policy.
* Prefer image proxies for arbitrary links while retaining the official icon
* as a final fallback. Explicit first-party brand assets remain first when a
* provider supplies them.
*/
export function browserSafeFaviconUrls(domain: string): string[] {
const faviconDomain = faviconDomainFromValue(domain);
return [
faviconImUrl(faviconDomain),
googleFaviconUrl(domain),
duckDuckGoFaviconUrl(faviconDomain),
officialFaviconUrl(faviconDomain),
];
}
function brand(
domain: string,
color: string,
@@ -33,7 +53,7 @@ function brand(
logoOverrides: string[] = [],
): ProviderBrand {
const logoUrls = [...logoOverrides];
faviconUrls(domain).forEach((url) => addUniqueLogoUrl(logoUrls, url));
browserSafeFaviconUrls(domain).forEach((url) => addUniqueLogoUrl(logoUrls, url));
return {
logoUrl: logoUrls[0],
logoUrls,
@@ -60,12 +80,27 @@ function domainFromLogoUrl(url: string): string | null {
const match = parsed.pathname.match(/^\/ip3\/(.+)\.ico$/);
return match ? decodeURIComponent(match[1]) : null;
}
if (host === "favicon.im") {
return decodeURIComponent(parsed.pathname.replace(/^\//, "")) || null;
}
return host.replace(/^www\./, "");
} catch {
return null;
}
}
/**
* A repository favicon identifies the hosting service, not the app itself.
* Apps backed by GitHub repositories should keep their distinct initials
* instead of appearing to share one GitHub identity.
*/
export function isGenericRepositoryLogoUrl(logoUrl: string | null | undefined): boolean {
const value = logoUrl?.trim();
if (!value) return false;
const domain = domainFromLogoUrl(value)?.toLowerCase();
return domain === "github.com" || domain?.startsWith("github.com/") === true;
}
function faviconDomainFromValue(value: string): string {
const host = value.split("/")[0]?.trim();
return host || value;
webui/src/lib/tool-traces.ts
+17 -3
View File
@@ -20,6 +20,19 @@ export function formatToolCallTrace(call: unknown): string | null {
return `${name}()`;
}
export function canonicalToolTrace(line: string): string {
const trimmed = line.trim();
const match = /^([a-zA-Z0-9_.-]+)\((.*)\)$/.exec(trimmed);
if (!match) return trimmed;
const args = match[2].trim();
if (!args) return `${match[1]}()`;
try {
return `${match[1]}(${JSON.stringify(JSON.parse(args))})`;
} catch {
return trimmed;
}
}
const VALID_PHASES = new Set(["start", "end", "error"]);
const PHASE_RANK: Record<string, number> = { start: 1, end: 2, error: 3 };
@@ -91,12 +104,13 @@ export function mergeUniqueToolTraceLines(
previousTraces: string[],
lines: string[],
): { traces: string[]; added: boolean } {
const seen = new Set(previousTraces);
const seen = new Set(previousTraces.map(canonicalToolTrace));
const traces = [...previousTraces];
let added = false;
for (const line of lines) {
if (seen.has(line)) continue;
seen.add(line);
const key = canonicalToolTrace(line);
if (seen.has(key)) continue;
seen.add(key);
traces.push(line);
added = true;
}
webui/src/lib/types.ts
+3
View File
@@ -1044,6 +1044,8 @@ export type InboundEvent =
chat_id: string;
stream_id?: string;
text?: string;
/** This answer segment ended, but the active agent turn will continue. */
resuming?: boolean;
} & InboundTurnMetadata)
| ({
event: "reasoning_delta";
@@ -1171,6 +1173,7 @@ export type Outbound =
media?: OutboundMedia[];
cli_apps?: OutboundCliAppMention[];
mcp_presets?: OutboundMcpPresetMention[];
quoted_context?: string;
workspace_scope?: WorkspaceScopePayload;
turn_id?: string;
/** Marks messages sent by the embedded WebUI, without changing the
webui/src/tests/activity-message-model.test.ts
+39
View File
@@ -0,0 +1,39 @@
import { describe, expect, it } from "vitest";
import { coalesceActivityMessages } from "@/components/thread/activity/activity-message-model";
import type { UIMessage } from "@/lib/types";
const trace = 'web_search({"query":"same query"})';
function progressMessage(id: string, phase: "start" | "end" | "error"): UIMessage {
return {
id,
role: "tool",
kind: "trace",
content: trace,
traces: [trace],
toolEvents: [{ phase, name: "web_search", arguments: { query: "same query" } }],
createdAt: 1,
};
}
describe("activity message coalescing", () => {
it("folds persisted start and terminal progress into one activity", () => {
const result = coalesceActivityMessages([
progressMessage("start", "start"),
progressMessage("end", "end"),
]);
expect(result).toHaveLength(1);
expect(result[0].toolEvents?.[0]?.phase).toBe("end");
});
it("keeps repeated completed calls as separate activities", () => {
const result = coalesceActivityMessages([
progressMessage("first", "end"),
progressMessage("second", "end"),
]);
expect(result).toHaveLength(2);
});
});
webui/src/tests/agent-activity-cluster.test.tsx
+590 -135
View File
@@ -340,7 +340,7 @@ describe("AgentActivityCluster", () => {
vi.advanceTimersByTime(901);
});
expect(screen.queryByTestId("agent-activity-scroll")).not.toBeInTheDocument();
expect(screen.getByRole("button", { name: /1 steps/i })).toHaveAttribute(
expect(screen.getByRole("button", { name: "Thought" })).toHaveAttribute(
"aria-expanded",
"false",
);
@@ -401,7 +401,7 @@ describe("AgentActivityCluster", () => {
expect(screen.queryByText("Thought for 0s")).not.toBeInTheDocument();
});
it("renders file edit totals and a compact expanded file list", async () => {
it("renders file edits as one-line activity rows", async () => {
const restoreMotion = installReducedMotion();
try {
render(
@@ -430,33 +430,25 @@ describe("AgentActivityCluster", () => {
/>,
);
expect(screen.getByRole("button", { name: /edited app\.tsx/i })).toBeInTheDocument();
expect(screen.getByTestId("activity-header-file-reference")).toHaveTextContent("app.tsx");
expect(screen.getByTestId("activity-header-file-reference")).toHaveAttribute(
"aria-label",
"/Users/renxubin/project/src/app.tsx",
);
fireEvent.click(screen.getByRole("button", { name: /edited app\.tsx/i }));
expect(screen.queryByText("Edited files")).not.toBeInTheDocument();
const fileRef = screen.getByTestId("activity-file-reference");
expect(fileRef).toHaveTextContent("src/app.tsx");
expect(fileRef).toHaveAttribute("aria-label", "/Users/renxubin/project/src/app.tsx");
expect(fileRef).toHaveAttribute("aria-label", "src/app.tsx");
expect(screen.queryByTestId("activity-header-file-reference")).not.toBeInTheDocument();
expect(screen.queryByTestId("file-edit-diff")).not.toBeInTheDocument();
for (const diffPair of screen.getAllByTestId("activity-diff-pair")) {
expect(diffPair).toHaveClass("items-baseline");
expect(diffPair).toHaveClass("leading-[inherit]");
expect(diffPair.className).not.toContain("translate-y");
}
await waitFor(() => {
expect(screen.getAllByText("+12").length).toBeGreaterThan(0);
expect(screen.getAllByText("-3").length).toBeGreaterThan(0);
});
expect(screen.getByText("+12")).toBeInTheDocument();
expect(screen.getByText("-3")).toBeInTheDocument();
} finally {
restoreMotion();
}
});
it("renders GitHub-like file edit diffs when the local preference is enabled", () => {
it("keeps file edits flat even when the legacy diff preference is enabled", () => {
localStorage.setItem(
"nanobot-webui.settings-preferences",
JSON.stringify({ fileEditDisplayMode: "diff" }),
@@ -496,20 +488,17 @@ describe("AgentActivityCluster", () => {
/>,
);
expect(screen.getByTestId("file-edit-diff")).toBeInTheDocument();
expect(screen.queryByText("@@ -10,2 +10,2 @@")).not.toBeInTheDocument();
expect(screen.getByText("return <Old />;")).toBeInTheDocument();
expect(screen.getByText("return <New />;")).toBeInTheDocument();
expect(screen.getAllByText("11").length).toBeGreaterThanOrEqual(2);
expect(screen.getAllByTestId("activity-header-file-reference")).toHaveLength(1);
expect(screen.queryByTestId("activity-file-reference")).not.toBeInTheDocument();
expect(screen.queryByTestId("file-edit-diff")).not.toBeInTheDocument();
expect(screen.queryByText("return <Old />;")).not.toBeInTheDocument();
expect(screen.queryByText("return <New />;")).not.toBeInTheDocument();
expect(screen.getByTestId("activity-file-reference")).toHaveTextContent("src/app.tsx");
expect(screen.getAllByTestId("activity-diff-pair")).toHaveLength(1);
} finally {
localStorage.removeItem("nanobot-webui.settings-preferences");
}
});
it("renders folded separators between separated file edit hunks", () => {
it("does not render diff hunks inside the activity list", () => {
localStorage.setItem(
"nanobot-webui.settings-preferences",
JSON.stringify({ fileEditDisplayMode: "diff" }),
@@ -555,17 +544,16 @@ describe("AgentActivityCluster", () => {
/>,
);
expect(screen.getByTestId("file-edit-diff-hunk-gap")).toHaveTextContent(
"21 unchanged lines hidden",
);
expect(screen.queryByTestId("file-edit-diff-hunk-gap")).not.toBeInTheDocument();
expect(screen.queryByText("@@ -25,3 +25,3 @@")).not.toBeInTheDocument();
expect(screen.getByText("return newSecond;")).toBeInTheDocument();
expect(screen.queryByText("return newSecond;")).not.toBeInTheDocument();
expect(screen.getByTestId("activity-file-reference")).toHaveTextContent("src/app.tsx");
} finally {
localStorage.removeItem("nanobot-webui.settings-preferences");
}
});
it("keeps long file edit diffs collapsed until opened", () => {
it("summarizes long file edit diffs without an expansion control", () => {
localStorage.setItem(
"nanobot-webui.settings-preferences",
JSON.stringify({ fileEditDisplayMode: "diff" }),
@@ -604,40 +592,16 @@ describe("AgentActivityCluster", () => {
/>,
);
const toggle = screen.getByTestId("file-edit-diff-toggle");
expect(toggle).toHaveAttribute("aria-expanded", "false");
expect(toggle).toHaveTextContent("View large diff");
expect(toggle).toHaveTextContent("165 lines");
expect(screen.queryByTestId("file-edit-diff-toggle")).not.toBeInTheDocument();
expect(screen.queryByTestId("file-edit-diff")).not.toBeInTheDocument();
expect(screen.queryByText("line-1")).not.toBeInTheDocument();
fireEvent.click(toggle);
expect(toggle).toHaveAttribute("aria-expanded", "true");
expect(screen.getByText("line-160")).toBeInTheDocument();
expect(screen.queryByText("line-161")).not.toBeInTheDocument();
expect(screen.getByTestId("file-edit-diff-expand-lines")).toHaveTextContent("Show 5 more lines");
fireEvent.click(screen.getByTestId("file-edit-diff-expand-lines"));
expect(screen.getByText("line-165")).toBeInTheDocument();
expect(screen.getByTestId("file-edit-diff-collapse-lines")).toHaveTextContent("Show fewer lines");
fireEvent.click(screen.getByTestId("file-edit-diff-collapse-lines"));
expect(screen.queryByText("line-165")).not.toBeInTheDocument();
expect(screen.getByTestId("file-edit-diff-expand-lines")).toHaveTextContent("Show 5 more lines");
fireEvent.click(toggle);
expect(toggle).toHaveAttribute("aria-expanded", "false");
expect(screen.queryByTestId("file-edit-diff")).not.toBeInTheDocument();
expect(screen.getByText("+165")).toBeInTheDocument();
} finally {
localStorage.removeItem("nanobot-webui.settings-preferences");
}
});
it("does not mount collapsed file edit diff rows until opened", () => {
it("ignores the legacy collapsed diff mode in the activity list", () => {
localStorage.setItem(
"nanobot-webui.settings-preferences",
JSON.stringify({ fileEditDisplayMode: "collapsed_diff" }),
@@ -677,24 +641,16 @@ describe("AgentActivityCluster", () => {
/>,
);
const toggle = screen.getByTestId("file-edit-diff-toggle");
expect(toggle).toHaveAttribute("aria-expanded", "false");
expect(toggle).toHaveTextContent("View diff");
expect(toggle).toHaveTextContent("3 lines");
expect(screen.queryByTestId("file-edit-diff-toggle")).not.toBeInTheDocument();
expect(screen.queryByTestId("file-edit-diff")).not.toBeInTheDocument();
expect(screen.queryByText("return <New />;")).not.toBeInTheDocument();
fireEvent.click(toggle);
expect(toggle).toHaveAttribute("aria-expanded", "true");
expect(screen.getByTestId("file-edit-diff")).toBeInTheDocument();
expect(screen.getByText("return <New />;")).toBeInTheDocument();
expect(screen.getByTestId("activity-file-reference")).toHaveTextContent("src/app.tsx");
} finally {
localStorage.removeItem("nanobot-webui.settings-preferences");
}
});
it("offers the file preview entry point when a diff payload is truncated", () => {
it("opens the edited file directly instead of expanding a truncated diff", () => {
localStorage.setItem(
"nanobot-webui.settings-preferences",
JSON.stringify({ fileEditDisplayMode: "diff" }),
@@ -735,15 +691,9 @@ describe("AgentActivityCluster", () => {
/>,
);
const toggle = screen.getByTestId("file-edit-diff-toggle");
expect(toggle).toHaveAttribute("aria-expanded", "false");
expect(toggle).toHaveTextContent("View large diff");
expect(screen.queryByTestId("file-edit-diff-toggle")).not.toBeInTheDocument();
expect(screen.queryByTestId("file-edit-diff-truncated")).not.toBeInTheDocument();
fireEvent.click(toggle);
expect(screen.getByTestId("file-edit-diff-truncated")).toHaveTextContent("Diff truncated");
fireEvent.click(screen.getByTestId("file-edit-diff-open-file"));
fireEvent.click(screen.getByTestId("activity-file-reference"));
expect(onOpenFilePreview).toHaveBeenCalledWith("/repo/src/app.tsx");
} finally {
@@ -778,8 +728,8 @@ describe("AgentActivityCluster", () => {
/>,
);
expect(screen.getByRole("button", { name: /deleted angry-birds\.html/i })).toBeInTheDocument();
expect(screen.queryByRole("button", { name: /edited angry-birds\.html/i })).not.toBeInTheDocument();
expect(screen.getByText("Deleted")).toBeInTheDocument();
expect(screen.queryByText("Edited")).not.toBeInTheDocument();
});
it("renders file-only edits without a redundant disclosure", () => {
@@ -812,7 +762,8 @@ describe("AgentActivityCluster", () => {
expect(screen.queryByRole("button", { name: /edited app\.tsx/i })).not.toBeInTheDocument();
expect(screen.queryByTestId("agent-activity-scroll")).not.toBeInTheDocument();
expect(screen.getByText("Edited")).toBeInTheDocument();
expect(screen.getByTestId("activity-header-file-reference")).toHaveTextContent("app.tsx");
expect(screen.queryByTestId("activity-header-file-reference")).not.toBeInTheDocument();
expect(screen.getByTestId("activity-file-reference")).toHaveTextContent("src/app.tsx");
expect(screen.getByText("+12")).toBeInTheDocument();
expect(screen.getByText("-3")).toBeInTheDocument();
});
@@ -879,10 +830,7 @@ describe("AgentActivityCluster", () => {
/>,
);
const cliRuns = screen.getByTestId("activity-cli-runs");
expect(cliRuns).toHaveTextContent("Using");
expect(cliRuns).toHaveTextContent("@blender");
expect(cliRuns).toHaveTextContent("--json --background scene.blend");
expect(screen.getByText("Using Blender · --json --background scene.blend")).toBeInTheDocument();
expect(screen.getByTestId("activity-cli-logo-blender")).toBeInTheDocument();
expect(screen.queryByText(/run_cli_app/)).not.toBeInTheDocument();
});
@@ -930,9 +878,9 @@ describe("AgentActivityCluster", () => {
/>,
);
const searchRow = screen.getByText("Searching").closest("li");
const cliRow = screen.getByText("@blender").closest("li");
const fetchRow = screen.getByText("Reading").closest("li");
const searchRow = screen.getByText("Searched nanobot architecture").closest('[data-testid="activity-step"]');
const cliRow = screen.getByText("Used Blender · --json project new").closest('[data-testid="activity-step"]');
const fetchRow = screen.getByText("example.com/diagram").closest('[data-testid="activity-step"]');
expect(searchRow).not.toBeNull();
expect(cliRow).not.toBeNull();
@@ -941,6 +889,181 @@ describe("AgentActivityCluster", () => {
expect(cliRow!.compareDocumentPosition(fetchRow!) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
});
it("renders web search results as lightweight branded source rows", () => {
const line = 'web_search({"query":"agent frameworks"})';
render(
<AgentActivityCluster
messages={[{
id: "t-web-search-results",
role: "tool",
kind: "trace",
content: line,
traces: [line],
toolEvents: [{
phase: "end",
call_id: "call-web-search",
name: "web_search",
arguments: { query: "agent frameworks" },
result: [
"Results for: agent frameworks",
"",
"1. OpenAI Agents SDK",
" https://openai.com/index/new-tools-for-building-agents/?utm_source=test",
" Build and deploy agentic applications.",
"2. Building effective agents",
" https://www.anthropic.com/engineering/building-effective-agents",
" Practical patterns for reliable agents.",
"3. Internal dashboard",
" http://localhost:3000/search",
].join("\n"),
}],
createdAt: 1,
}]}
isTurnStreaming
hasBodyBelow={false}
/>,
);
expect(screen.getByText("Searched agent frameworks")).toBeInTheDocument();
expect(screen.queryByText("2 sources")).not.toBeInTheDocument();
const openAiLink = screen.getByText("OpenAI Agents SDK").closest("a");
const anthropicLink = screen.getByText("Building effective agents").closest("a");
expect(openAiLink).toHaveAttribute(
"href",
"https://openai.com/index/new-tools-for-building-agents/",
);
expect(openAiLink).not.toHaveAttribute("title");
expect(anthropicLink).toHaveAttribute(
"href",
"https://www.anthropic.com/engineering/building-effective-agents",
);
expect(screen.getByText("openai.com/index/new-tools-for-building-agents")).toBeInTheDocument();
expect(screen.getByText("anthropic.com/engineering/building-effective-agents")).toBeInTheDocument();
expect(screen.getByTestId("activity-web-favicon-openai.com")).toBeInTheDocument();
expect(screen.getByTestId("activity-web-favicon-anthropic.com")).toBeInTheDocument();
expect(screen.queryByText("Internal dashboard")).not.toBeInTheDocument();
expect(screen.queryByText("Build and deploy agentic applications.")).not.toBeInTheDocument();
const searchStep = screen.getByText("Searched agent frameworks").closest(
'[data-testid="activity-step"]',
);
const openAiStep = openAiLink!.closest('[data-testid="activity-step"]');
const anthropicStep = anthropicLink!.closest('[data-testid="activity-step"]');
expect(openAiStep).toContainElement(
screen.getByText("openai.com/index/new-tools-for-building-agents"),
);
expect(anthropicStep).toContainElement(
screen.getByText("anthropic.com/engineering/building-effective-agents"),
);
expect(searchStep?.parentElement).toBe(openAiStep?.parentElement);
expect(searchStep?.parentElement).toBe(anthropicStep?.parentElement);
expect(searchStep?.parentElement?.querySelector("ul, li, section")).toBeNull();
expect(screen.getAllByTestId("activity-step")).toHaveLength(3);
});
it("redacts credentials from web search queries, titles, and links", () => {
const query = "release notes access_token=signed-secret";
const line = `web_search(${JSON.stringify({ query })})`;
render(
<AgentActivityCluster
messages={[{
id: "t-web-search-secret",
role: "tool",
kind: "trace",
content: line,
traces: [line],
toolEvents: [{
phase: "end",
call_id: "call-web-search-secret",
name: "web_search",
arguments: { query },
result: [
"1. Release sk-proj-secret1234",
" https://example.com/release?api_key=url-secret#details",
].join("\n"),
}],
createdAt: 1,
}]}
isTurnStreaming={false}
hasBodyBelow={false}
/>,
);
expect(screen.queryByText(/signed-secret|secret1234|url-secret/)).not.toBeInTheDocument();
expect(screen.getByText("Searched release notes access_token=<redacted>")).toBeInTheDocument();
expect(screen.getByText("Release <redacted>")).toBeInTheDocument();
expect(screen.getByText("Release <redacted>").closest("a")).toHaveAttribute(
"href",
"https://example.com/release",
);
});
it("renders persisted search progress as one human-readable action", () => {
const line = 'web_search({"query":"site:linkedin.com/company Evomap startup"})';
render(
<AgentActivityCluster
messages={[
{
id: "search-start",
role: "tool",
kind: "trace",
content: line,
traces: [line],
toolEvents: [{
phase: "start",
name: "web_search",
arguments: { query: "site:linkedin.com/company Evomap startup" },
}],
createdAt: 1,
},
{
id: "search-end",
role: "tool",
kind: "trace",
content: line,
traces: [line],
toolEvents: [{
phase: "error",
name: "web_search",
arguments: { query: "site:linkedin.com/company Evomap startup" },
error: "Search provider rate limited the request",
}],
createdAt: 2,
},
]}
isTurnStreaming
hasBodyBelow={false}
/>,
);
expect(screen.getAllByTestId("activity-step")).toHaveLength(1);
expect(screen.getByText("Could not search LinkedIn · Evomap startup")).toBeInTheDocument();
expect(screen.queryByText(/site:linkedin/i)).not.toBeInTheDocument();
expect(screen.queryByText("Web research")).not.toBeInTheDocument();
});
it("renders reasoning as a single flat activity row", () => {
render(
<AgentActivityCluster
messages={[{
id: "r-flat",
role: "assistant",
content: "",
reasoning: "**Planning** a focused search\nfor official sources",
reasoningStreaming: true,
isStreaming: true,
createdAt: 1,
}]}
isTurnStreaming
hasBodyBelow={false}
/>,
);
expect(screen.getByText("Planning a focused search for official sources")).toBeInTheDocument();
expect(screen.queryByText("Thinking…")).not.toBeInTheDocument();
expect(screen.queryByText("Thinking")).not.toBeInTheDocument();
});
it("labels rejected CLI app calls as failed instead of ran", () => {
render(
<AgentActivityCluster
@@ -966,11 +1089,14 @@ describe("AgentActivityCluster", () => {
/>,
);
fireEvent.click(screen.getByRole("button", { name: /failed @github/i }));
fireEvent.click(screen.getByRole("button", { name: "Worked" }));
expect(screen.getByTestId("activity-cli-runs")).toHaveTextContent("Failed");
expect(screen.getByTestId("activity-cli-runs")).toHaveTextContent("@github");
expect(screen.getByTestId("activity-cli-runs")).toHaveTextContent("Error: CLI app 'github' not found");
const row = screen.getByText("Could not use GitHub · --json repo view").closest(
'[data-testid="activity-step"]',
);
expect(row).toBeInTheDocument();
expect(row).not.toHaveAttribute("title");
expect(screen.queryByText("Error: CLI app 'github' not found")).not.toBeInTheDocument();
expect(screen.queryByText("Ran CLI")).not.toBeInTheDocument();
});
@@ -999,11 +1125,9 @@ describe("AgentActivityCluster", () => {
/>,
);
const mcpRuns = screen.getByTestId("activity-mcp-runs");
expect(mcpRuns).toHaveTextContent("Using");
expect(mcpRuns).toHaveTextContent("Browserbase");
expect(mcpRuns).toHaveTextContent("browser_navigate");
expect(mcpRuns).toHaveTextContent("url: https://example.com");
expect(screen.getByText("Opening example.com · Browserbase")).toBeInTheDocument();
expect(screen.queryByText("Using")).not.toBeInTheDocument();
expect(screen.queryByText(/browser_navigate/)).not.toBeInTheDocument();
expect(screen.getByTestId("activity-mcp-logo-browserbase")).toBeInTheDocument();
expect(screen.queryByText(/mcp_browserbase_browser_navigate/)).not.toBeInTheDocument();
});
@@ -1025,9 +1149,11 @@ describe("AgentActivityCluster", () => {
);
const favicon = screen.getByTestId("activity-web-favicon-auth0.com");
expect(favicon.querySelector("img")?.getAttribute("src")).toContain("auth0.com");
expect(screen.getByText("Reading")).toBeInTheDocument();
expect(screen.getByText("auth0.com/blog/jwt-security-best-practices")).toBeInTheDocument();
expect(favicon).toHaveAttribute("src", expect.stringContaining("auth0.com"));
const row = screen.getByText("auth0.com/blog/jwt-security-best-practices").closest(
'[data-testid="activity-step"]',
);
expect(row).toHaveTextContent("Reading");
});
it("renders plain-text fetch progress with the site favicon", () => {
@@ -1047,8 +1173,42 @@ describe("AgentActivityCluster", () => {
);
expect(screen.getByTestId("activity-web-favicon-auth0.com")).toBeInTheDocument();
expect(screen.getByText("Reading")).toBeInTheDocument();
expect(screen.getByText("auth0.com/blog/jwt-security-best-practices")).toBeInTheDocument();
const row = screen.getByText("auth0.com/blog/jwt-security-best-practices").closest(
'[data-testid="activity-step"]',
);
expect(row).toHaveTextContent("Reading");
});
it("renders a completed fetch as one linked title and URL row", () => {
const line = 'web_fetch({"url":"https://example.com/docs"})';
render(
<AgentActivityCluster
messages={[{
id: "t-web-fetch-title",
role: "tool",
kind: "trace",
content: line,
traces: [line],
toolEvents: [{
phase: "end",
call_id: "fetch-title",
name: "web_fetch",
arguments: { url: "https://example.com/docs" },
result: "# Example documentation\n\nPage body",
}],
createdAt: 1,
}]}
isTurnStreaming={false}
hasBodyBelow={false}
/>,
);
const title = screen.getByText("Example documentation");
const url = screen.getByText("example.com/docs");
const row = title.closest('[data-testid="activity-step"]');
expect(row).toContainElement(url);
expect(title.closest("a")).toHaveAttribute("href", "https://example.com/docs");
expect(screen.getAllByTestId("activity-step")).toHaveLength(1);
});
it("does not request favicons for private web fetch targets", () => {
@@ -1068,10 +1228,11 @@ describe("AgentActivityCluster", () => {
);
expect(screen.queryByTestId("activity-web-favicon-localhost")).not.toBeInTheDocument();
expect(screen.getByText("url: http://localhost:3000/dashboard")).toBeInTheDocument();
expect(screen.getByText("Reading Private address")).toBeInTheDocument();
expect(screen.queryByText("http://localhost:3000/dashboard")).not.toBeInTheDocument();
});
it("shows readable argument previews for generic tool traces", () => {
it("presents generic tool traces as one-line semantic actions", () => {
render(
<AgentActivityCluster
messages={[{
@@ -1091,9 +1252,109 @@ describe("AgentActivityCluster", () => {
/>,
);
expect(screen.getByText("find_files query: thread · glob: *.tsx")).toBeInTheDocument();
expect(screen.getByText("list_dir path: memory")).toBeInTheDocument();
expect(screen.getByText("grep pattern: dream_cursor")).toBeInTheDocument();
expect(screen.getByText("Found files *.tsx")).toBeInTheDocument();
expect(screen.getByText("Listed files memory")).toBeInTheDocument();
expect(screen.getByText("Searching files “dream_cursor”")).toBeInTheDocument();
expect(screen.queryByText("Technical details")).not.toBeInTheDocument();
expect(document.querySelector("details")).not.toBeInTheDocument();
});
it("groups repeated searches over internal tool results without exposing raw paths", () => {
const pattern = "Jul (1[0-7]), 2026|July (1[0-7]), 2026|2026-07-(1[0-7])";
const secondPattern = "Anthropic|OpenAI|DeepMind";
const firstPath = "/Users/test/.nanobot/workspace/.nanobot/tool-results/websocket_session/call_first-result.txt";
const secondPath = "/Users/test/.nanobot/workspace/.nanobot/tool-results/websocket_session/call_second-result.txt";
const traces = [
`grep(${JSON.stringify({ pattern, path: firstPath })})`,
`grep(${JSON.stringify({ pattern: secondPattern, path: secondPath })})`,
];
render(
<AgentActivityCluster
messages={[{
id: "t-grouped-grep",
role: "tool",
kind: "trace",
content: traces.join("\n"),
traces,
createdAt: 1,
}]}
isTurnStreaming={false}
hasBodyBelow={false}
/>,
);
const run = screen.getByText(/Reviewed sources.*2 files/).closest('[data-testid="activity-step"]');
expect(run).toBeInTheDocument();
expect(screen.queryByText(firstPath)).not.toBeInTheDocument();
expect(screen.queryByText(secondPath)).not.toBeInTheDocument();
expect(screen.queryByText(pattern)).not.toBeInTheDocument();
expect(screen.queryByText(secondPattern)).not.toBeInTheDocument();
expect(screen.queryByText("call_first-result.txt")).not.toBeInTheDocument();
expect(screen.queryByText("call_second-result.txt")).not.toBeInTheDocument();
});
it("surfaces generic tool failures without dumping their arguments", () => {
const args = { pattern: "needle", path: "workspace/file.txt" };
const line = `grep(${JSON.stringify(args)})`;
render(
<AgentActivityCluster
messages={[{
id: "t-grep-error",
role: "tool",
kind: "trace",
content: line,
traces: [line],
toolEvents: [{
phase: "error",
call_id: "call-grep-error",
name: "grep",
arguments: args,
error: JSON.stringify({
message: "Permission denied",
headers: { Authorization: "Bearer sk-live-secret" },
token: "super-secret",
}),
}],
createdAt: 1,
}]}
isTurnStreaming={false}
hasBodyBelow={false}
/>,
);
const row = screen.getByText("Could not search files “needle”").closest(
'[data-testid="activity-step"]',
);
expect(row).toBeInTheDocument();
expect(row).not.toHaveAttribute("title");
expect(screen.queryByText(/Permission denied/)).not.toBeInTheDocument();
expect(screen.queryByText(/super-secret/)).not.toBeInTheDocument();
expect(screen.queryByText(/sk-live-secret/)).not.toBeInTheDocument();
expect(screen.queryByText(/Authorization/)).not.toBeInTheDocument();
});
it("redacts credentials from generic tool URL details", () => {
const line = 'download_asset({"url":"https://user:password@example.com/file?access_token=signed-secret&format=png"})';
render(
<AgentActivityCluster
messages={[{
id: "t-generic-url-secret",
role: "tool",
kind: "trace",
content: line,
traces: [line],
createdAt: 1,
}]}
isTurnStreaming={false}
hasBodyBelow={false}
/>,
);
expect(screen.queryByText(/password|signed-secret/)).not.toBeInTheDocument();
expect(screen.getByText("Completed Download asset")).toBeInTheDocument();
expect(screen.queryByText(/example\.com/)).not.toBeInTheDocument();
});
it("summarizes long shell traces instead of dumping scripts", () => {
@@ -1121,15 +1382,36 @@ describe("AgentActivityCluster", () => {
/>,
);
fireEvent.click(screen.getByRole("button", { name: /1 tool calls/i }));
fireEvent.click(screen.getByRole("button", { name: "Worked" }));
expect(screen.getByText("Command")).toBeInTheDocument();
expect(screen.getByText(/cat << 'EOF' \| bash · script, 6 lines/)).toBeInTheDocument();
expect(screen.getByText("Ran command cat << 'EOF' | bash · script, 6 lines")).toBeInTheDocument();
expect(screen.queryByText(/SECRET_TOKEN/)).not.toBeInTheDocument();
expect(screen.queryByText(/for id in/)).not.toBeInTheDocument();
expect(screen.queryByText(/^Done$/)).not.toBeInTheDocument();
});
it("presents time checks as an intent instead of a raw command", () => {
const line = `exec(${JSON.stringify({ command: "date '+%Y-%m-%d %H:%M:%S %Z'" })})`;
render(
<AgentActivityCluster
messages={[{
id: "t-date",
role: "tool",
kind: "trace",
content: line,
traces: [line],
createdAt: 1,
}]}
isTurnStreaming
hasBodyBelow={false}
/>,
);
expect(screen.getByText("Checking current time")).toBeInTheDocument();
expect(screen.queryByText(/%Y-%m-%d/)).not.toBeInTheDocument();
expect(screen.queryByText("Web")).not.toBeInTheDocument();
});
it("does not render zero diff counters for completed edits", () => {
render(
<AgentActivityCluster
@@ -1156,7 +1438,7 @@ describe("AgentActivityCluster", () => {
/>,
);
expect(screen.getByRole("button", { name: /edited app\.tsx/i })).toBeInTheDocument();
expect(screen.getByText("Edited")).toBeInTheDocument();
expect(screen.queryByText("+0")).not.toBeInTheDocument();
expect(screen.queryByText("-0")).not.toBeInTheDocument();
});
@@ -1220,7 +1502,6 @@ describe("AgentActivityCluster", () => {
/>,
);
expect(screen.getByRole("button", { name: /preparing edit/i })).toBeInTheDocument();
expect(screen.getByText("Preparing file edit…")).toBeInTheDocument();
});
@@ -1251,9 +1532,10 @@ describe("AgentActivityCluster", () => {
/>,
);
fireEvent.click(screen.getByRole("button", { name: /failed angry-birds\.html/i }));
expect(screen.getByText("Target text was not found in angry-birds.html.")).toBeInTheDocument();
const row = screen.getByText("Could not edit").closest('[data-testid="activity-step"]');
expect(row).toBeInTheDocument();
expect(row).not.toHaveAttribute("title");
expect(screen.queryByText("Target text was not found in angry-birds.html.")).not.toBeInTheDocument();
});
it("keeps permission errors readable for failed file edits", () => {
@@ -1283,9 +1565,10 @@ describe("AgentActivityCluster", () => {
/>,
);
fireEvent.click(screen.getByRole("button", { name: /failed composition\.html/i }));
expect(screen.getByText("No permission to change this location.")).toBeInTheDocument();
const row = screen.getByText("Could not edit").closest('[data-testid="activity-step"]');
expect(row).toBeInTheDocument();
expect(row).not.toHaveAttribute("title");
expect(screen.queryByText("No permission to change this location.")).not.toBeInTheDocument();
expect(screen.queryByText(/\[Errno 13\]/)).not.toBeInTheDocument();
});
@@ -1358,18 +1641,18 @@ describe("AgentActivityCluster", () => {
/>,
);
const toggle = screen.getByRole("button", { name: "Edited 3 changes" });
expect(toggle).toHaveTextContent("+8");
expect(toggle).toHaveTextContent("-7");
fireEvent.click(toggle);
const fileRefs = screen.getAllByTestId("activity-file-reference");
expect(fileRefs).toHaveLength(3);
expect(fileRefs.every((ref) => ref.textContent?.includes("minecraft-fps/index.html"))).toBe(true);
expect(screen.getByText("patch failed")).toBeInTheDocument();
expect(screen.getAllByTestId("file-edit-diff")).toHaveLength(2);
expect(screen.getByText("<canvas />")).toBeInTheDocument();
expect(screen.getByText("const fps = 60;")).toBeInTheDocument();
const failedRow = screen.getByText("Could not edit").closest(
'[data-testid="activity-step"]',
);
expect(failedRow).toBeInTheDocument();
expect(failedRow).not.toHaveAttribute("title");
expect(screen.queryByText("patch failed")).not.toBeInTheDocument();
expect(screen.queryByTestId("file-edit-diff")).not.toBeInTheDocument();
expect(screen.queryByText("<canvas />")).not.toBeInTheDocument();
expect(screen.queryByText("const fps = 60;")).not.toBeInTheDocument();
expect(screen.getAllByText("+2").length).toBeGreaterThan(0);
expect(screen.getAllByText("-1").length).toBeGreaterThan(0);
expect(screen.getAllByText("+6").length).toBeGreaterThan(0);
@@ -1379,7 +1662,7 @@ describe("AgentActivityCluster", () => {
}
});
it("renders tool event embeds as inline activity evidence", () => {
it("keeps tool event embeds out of the flat activity list", () => {
render(
<AgentActivityCluster
messages={[{
@@ -1406,15 +1689,91 @@ describe("AgentActivityCluster", () => {
/>,
);
expect(screen.getByText("Web")).toBeInTheDocument();
expect(screen.getByTestId("activity-evidence-preview")).toBeInTheDocument();
expect(screen.getByRole("img", { name: "Homepage screenshot" })).toHaveAttribute(
"src",
"/api/media/signed/screenshot.png",
);
expect(screen.queryByText("Web")).not.toBeInTheDocument();
const row = screen.getByText("example.com").closest('[data-testid="activity-step"]');
expect(row).toHaveTextContent("Read");
expect(screen.queryByTestId("activity-evidence-preview")).not.toBeInTheDocument();
expect(screen.queryByText(/Found image/i)).not.toBeInTheDocument();
expect(screen.queryByRole("img", { name: "Homepage screenshot" })).not.toBeInTheDocument();
});
it("shows missing evidence as a file-safe placeholder", () => {
it("keeps image generation status to one activity line", () => {
const message: UIMessage = {
id: "image-run",
role: "tool",
kind: "trace",
content: 'generate_image({"prompt":"an orange nanobot on a desk","aspect_ratio":"4:3"})',
traces: ['generate_image({"prompt":"an orange nanobot on a desk","aspect_ratio":"4:3"})'],
toolEvents: [{
phase: "start",
call_id: "image-call",
name: "generate_image",
arguments: { prompt: "an orange nanobot on a desk", aspect_ratio: "4:3" },
}],
createdAt: 1,
};
const { rerender } = render(
<AgentActivityCluster messages={[message]} isTurnStreaming hasBodyBelow={false} />,
);
expect(screen.getByText("Generating image")).toBeInTheDocument();
rerender(
<AgentActivityCluster
messages={[{
...message,
toolEvents: [{
...message.toolEvents![0],
phase: "end",
files: [{
url: "/api/media/signed/generated.png",
name: "generated.png",
type: "image/png",
}],
}],
}]}
isTurnStreaming={false}
hasBodyBelow={false}
/>,
);
expect(screen.getByText("Generated image")).toBeInTheDocument();
expect(screen.queryByRole("img", { name: "generated.png" })).not.toBeInTheDocument();
});
it("keeps image-generation failures visible and actionable", () => {
render(
<AgentActivityCluster
messages={[{
id: "image-error",
role: "tool",
kind: "trace",
content: 'generate_image({"prompt":"a launch poster"})',
traces: ['generate_image({"prompt":"a launch poster"})'],
toolEvents: [{
phase: "error",
call_id: "image-error-call",
name: "generate_image",
arguments: { prompt: "a launch poster" },
error: "Image provider quota exceeded",
}],
createdAt: 1,
}]}
isTurnStreaming={false}
hasBodyBelow={false}
/>,
);
expect(screen.getByText("Could not generate image")).toBeInTheDocument();
const row = screen.getByText("Could not generate image").closest(
'[data-testid="activity-step"]',
);
expect(row).toBeInTheDocument();
expect(row).not.toHaveAttribute("title");
expect(screen.queryByText("Image provider quota exceeded")).not.toBeInTheDocument();
});
it("does not add a secondary evidence row when evidence is missing", () => {
render(
<AgentActivityCluster
messages={[{
@@ -1437,8 +1796,104 @@ describe("AgentActivityCluster", () => {
/>,
);
expect(screen.getByText("Vision")).toBeInTheDocument();
expect(screen.getByTestId("activity-evidence-preview")).toBeInTheDocument();
expect(screen.getByText("missing.png")).toBeInTheDocument();
expect(screen.queryByText("Vision")).not.toBeInTheDocument();
expect(screen.getByText("Captured screenshot")).toBeInTheDocument();
expect(screen.queryByTestId("activity-evidence-preview")).not.toBeInTheDocument();
expect(screen.queryByText("missing.png")).not.toBeInTheDocument();
});
it("keeps every default activity action on one structural line", () => {
render(
<AgentActivityCluster
messages={[
{
id: "reasoning-line",
role: "assistant",
content: "",
reasoning: "**Planning** the next step\nwithout a nested title",
reasoningStreaming: false,
createdAt: 1,
},
{
id: "tool-line",
role: "tool",
kind: "trace",
content: 'grep({"pattern":"needle","path":"workspace/file.txt"})',
traces: ['grep({"pattern":"needle","path":"workspace/file.txt"})'],
createdAt: 2,
},
{
id: "fetch-line",
role: "tool",
kind: "trace",
content: 'web_fetch({"url":"https://example.com/docs"})',
traces: ['web_fetch({"url":"https://example.com/docs"})'],
createdAt: 3,
},
]}
isTurnStreaming={false}
hasBodyBelow={false}
/>,
);
const steps = screen.getAllByTestId("activity-step");
expect(steps.length).toBeGreaterThanOrEqual(3);
for (const step of steps) {
expect(step).toHaveClass("grid-cols-[1.125rem_minmax(0,1fr)]");
const line = step.children[1]?.firstElementChild;
expect(line).toHaveClass("overflow-hidden");
expect(line).toHaveClass("whitespace-nowrap");
expect(step.querySelector("br")).not.toBeInTheDocument();
expect(step.querySelector('[data-testid="activity-evidence-preview"]')).not.toBeInTheDocument();
}
expect(document.querySelector("details")).not.toBeInTheDocument();
expect(document.querySelector("ul, li, section")).not.toBeInTheDocument();
});
it("does not expose tool inputs or credentials in the activity surface", () => {
const cliLine = 'run_cli_app({"name":"blender","args":["--token","xoxb-1234567890-secret","render"],"json":true})';
const mcpLine = 'mcp_browserbase_browser_fill({"element":"Password","text":"mcp-private-value"})';
const genericLine = 'third_party_sync({"token":"sk-proj-1234567890-secret","payload":"private-payload"})';
const { container } = render(
<AgentActivityCluster
messages={[
{
id: "private-cli",
role: "tool",
kind: "trace",
content: cliLine,
traces: [cliLine],
createdAt: 1,
},
{
id: "private-mcp",
role: "tool",
kind: "trace",
content: mcpLine,
traces: [mcpLine],
createdAt: 2,
},
{
id: "private-generic",
role: "tool",
kind: "trace",
content: genericLine,
traces: [genericLine],
createdAt: 3,
},
]}
isTurnStreaming
hasBodyBelow={false}
cliApps={[BLENDER_CLI_APP]}
mcpPresets={[BROWSERBASE_MCP]}
/>,
);
expect(container.innerHTML).not.toContain("xoxb-1234567890-secret");
expect(container.innerHTML).not.toContain("mcp-private-value");
expect(container.innerHTML).not.toContain("sk-proj-1234567890-secret");
expect(container.innerHTML).not.toContain("private-payload");
expect(container.textContent).not.toMatch(/run_cli_app\(|browser_fill\(|third_party_sync\(/);
expect(container.textContent).toMatch(/<redacted>|••••/);
});
});
webui/src/tests/generic-tool-model.test.ts
+93
View File
@@ -0,0 +1,93 @@
import { describe, expect, it } from "vitest";
import { redactActivityText } from "@/components/thread/activity/activity-text";
import {
describeGenericToolRun,
parseGenericToolTrace,
type GenericToolStatus,
} from "@/components/thread/activity/generic-tool-model";
function describeRun(line: string, status: GenericToolStatus = "done") {
const trace = parseGenericToolTrace(line);
expect(trace).not.toBeNull();
return describeGenericToolRun([{ trace: trace!, status }]);
}
describe("generic tool activity semantics", () => {
it.each([
['find_files({"glob":"*.tsx"})', "Found files", "*.tsx"],
['grep({"pattern":"dream_cursor"})', "Searched files", "“dream_cursor”"],
['list_dir({"path":"memory"})', "Listed files", "memory"],
['read_file({"path":"docs/guide.md"})', "Read file", "docs/guide.md"],
['memory_search({"query":"launch date"})', "Searched memory", "“launch date”"],
['generate_image({"prompt":"private launch art"})', "Generated image", ""],
['spawn({"label":"Research competitors","task":"private task"})', "Delegated task", "Research competitors"],
['message({"channel":"telegram","content":"private message"})', "Sent message", "telegram"],
['my({"action":"check","key":"context_window_tokens"})', "Checked agent settings", "context_window_tokens"],
['my({"action":"set","key":"model","value":"private-model"})', "Updated agent settings", "model"],
['cron({"action":"add","name":"Daily digest","message":"private prompt"})', "Scheduled automation", "Daily digest"],
['cron({"action":"remove","name":"Daily digest"})', "Removed automation", "Daily digest"],
['create_goal({"objective":"private objective","ui_summary":"Benchmark memory"})', "Started long task", "Benchmark memory"],
['update_goal({"action":"complete","recap":"private recap"})', "Updated long task", "complete"],
['write_stdin({"session_id":"session-1234567890-secret","chars":"private input"})', "Continued command", "session…ecret"],
['list_exec_sessions({})', "Checked running commands", ""],
['screenshot({"path":"artifacts/home.png"})', "Captured screenshot", ""],
['third_party_sync({"token":"secret","payload":"private payload"})', "Completed Third party sync", ""],
])("describes %s without exposing implementation syntax", (line, label, detail) => {
const presentation = describeRun(line);
expect(presentation.label).toBe(label);
expect(presentation.detail).toBe(detail);
expect(`${presentation.label} ${presentation.detail}`).not.toMatch(/[{}]|private|tool-results/);
});
it.each([
["running", "Generating image"],
["done", "Generated image"],
["error", "Could not generate image"],
] as const)("uses human status copy for %s tools", (status, label) => {
expect(describeRun('generate_image({"prompt":"private"})', status).label).toBe(label);
});
it("groups searches over collected sources without exposing absolute paths", () => {
const first = parseGenericToolTrace(
'grep({"pattern":"July","path":"/Users/test/.nanobot/tool-results/session/call_first.txt"})',
)!;
const second = parseGenericToolTrace(
'grep({"pattern":"OpenAI","path":"/Users/test/.nanobot/tool-results/session/call_second.txt"})',
)!;
const presentation = describeGenericToolRun([
{ trace: first, status: "done" },
{ trace: second, status: "done" },
]);
expect(presentation).toMatchObject({ label: "Reviewed sources", detail: "", aside: "2 files" });
expect(JSON.stringify(presentation)).not.toContain("/Users/test");
});
it("leaves specialized tools to their dedicated activity surfaces", () => {
for (const line of [
'web_search({"query":"nanobot"})',
'web_fetch({"url":"https://example.com"})',
'exec({"command":"date"})',
'write_file({"path":"README.md"})',
'edit_file({"path":"README.md"})',
'apply_patch({"patch":"private"})',
'run_cli_app({"name":"github"})',
'mcp_browser_click({"text":"private"})',
]) {
expect(parseGenericToolTrace(line)).toBeNull();
}
});
it.each([
["Authorization: Bearer top-secret-token", "Authorization: <redacted>"],
["API_KEY=sk-proj-1234567890abcdef", "API_KEY=<redacted>"],
["--token xoxb-1234567890-secret", "--token <redacted>"],
["https://user:password@example.com/file?access_token=signed-secret", "https://<redacted>@example.com/file?access_token=<redacted>"],
["github ghp_1234567890abcdefghijkl", "github <redacted>"],
["aws AKIA1234567890ABCDEF", "aws <redacted>"],
["telegram 123456789:ABCDEFGHIJKLMNOPQRSTUVWXYZabcd", "telegram <redacted>"],
])("redacts activity text before rendering: %s", (input, expected) => {
expect(redactActivityText(input)).toBe(expected);
});
});
webui/src/tests/markdown-text-renderer.test.tsx
+169 -3
View File
@@ -13,6 +13,52 @@ describe("MarkdownTextRenderer", () => {
expect(link).toHaveClass("text-blue-500", "dark:text-blue-300");
});
it("does not render active URL protocols from untrusted markdown", () => {
const { container } = render(
<MarkdownTextRenderer>
{[
"[JavaScript](javascript:alert(1))",
"[Data](data:text/html,<script>alert(1)</script>)",
"![Unsafe image](javascript:alert(2))",
].join(" ")}
</MarkdownTextRenderer>,
);
expect(container).toHaveTextContent("JavaScript Data");
expect(container.querySelector("a")).toBeNull();
expect(container.querySelector("img")).toBeNull();
});
it("keeps safe external, mail, relative, and fragment links", () => {
render(
<MarkdownTextRenderer>
{[
"[HTTPS](https://example.com)",
"[Mail](mailto:hello@example.com)",
"[Relative](/docs/getting-started)",
"[Fragment](#install)",
].join(" ")}
</MarkdownTextRenderer>,
);
expect(screen.getByRole("link", { name: "HTTPS" })).toHaveAttribute(
"href",
"https://example.com",
);
expect(screen.getByRole("link", { name: "Mail" })).toHaveAttribute(
"href",
"mailto:hello@example.com",
);
expect(screen.getByRole("link", { name: "Relative" })).toHaveAttribute(
"href",
"/docs/getting-started",
);
expect(screen.getByRole("link", { name: "Fragment" })).toHaveAttribute(
"href",
"#install",
);
});
it("renders local file links as previewable file references", () => {
const onOpenFilePreview = vi.fn();
render(
@@ -264,7 +310,13 @@ describe("MarkdownTextRenderer", () => {
expect(favicon()).toHaveAttribute(
"src",
"https://www.savills.com.hk/favicon.ico",
"https://favicon.im/www.savills.com.hk?larger=true",
);
fireEvent.error(favicon()!);
expect(favicon()).toHaveAttribute(
"src",
"https://www.google.com/s2/favicons?domain=www.savills.com.hk&sz=64",
);
fireEvent.error(favicon()!);
@@ -276,7 +328,7 @@ describe("MarkdownTextRenderer", () => {
fireEvent.error(favicon()!);
expect(favicon()).toHaveAttribute(
"src",
"https://www.google.com/s2/favicons?domain=www.savills.com.hk&sz=64",
"https://www.savills.com.hk/favicon.ico",
);
fireEvent.error(favicon()!);
@@ -340,7 +392,7 @@ describe("MarkdownTextRenderer", () => {
expect(container).not.toHaveTextContent("</details>");
});
it("renders task list checkboxes as quiet status marks", () => {
it("renders task lists with compact static status markers", () => {
const { container } = render(
<MarkdownTextRenderer>
{"- [x] 写 Markdown 示例\n- [x] 加点 emoji\n- [ ] 测试渲染效果"}
@@ -350,6 +402,120 @@ describe("MarkdownTextRenderer", () => {
expect(container.querySelectorAll("input[type='checkbox']")).toHaveLength(0);
expect(screen.getAllByTestId("markdown-task-checkbox")).toHaveLength(3);
expect(container.querySelectorAll(".task-list-item")).toHaveLength(3);
expect(screen.queryByRole("button", { name: /tasks/i })).not.toBeInTheDocument();
});
it("renders GFM tables in a responsive data surface", () => {
const { container } = render(
<MarkdownTextRenderer>
{
"## Models\n\n| Model | Context | Price |\n| --- | ---: | ---: |\n| nanobot | 200k | $1 |\n\n## Notes"
}
</MarkdownTextRenderer>,
);
const surface = screen.getByTestId("markdown-data-table");
expect(surface).toHaveClass("overflow-x-auto", "rounded-lg", "mb-5");
expect(surface).toHaveAttribute("role", "region");
expect(surface).toHaveAttribute("tabindex", "0");
expect(surface).toHaveAccessibleName("Data table");
expect(screen.getByRole("table")).toHaveTextContent("nanobot");
expect(container.firstElementChild).toHaveClass("space-y-4");
expect(container.firstElementChild).not.toHaveClass("space-y-0");
});
it("uses Streamdown's incremental reveal while content is streaming", () => {
const { container } = render(
<MarkdownTextRenderer streaming>春天</MarkdownTextRenderer>,
);
expect(container.firstElementChild).toHaveClass(
"[&>*:last-child]:after:content-[var(--streamdown-caret)]",
);
const animatedUnits = container.querySelectorAll<HTMLElement>("[data-sd-animate]");
expect(animatedUnits).toHaveLength(1);
expect(animatedUnits[0]).toHaveTextContent("春天");
expect(animatedUnits[0].getAttribute("style")).toContain("--sd-duration: 180ms");
});
it("removes animation markup when a streamed response completes", async () => {
const { container, rerender } = render(
<MarkdownTextRenderer streaming>春天</MarkdownTextRenderer>,
);
expect(container.querySelector("[data-sd-animate]")).toBeInTheDocument();
rerender(<MarkdownTextRenderer>春天</MarkdownTextRenderer>);
await waitFor(() => {
expect(container.querySelector("[data-sd-animate]")).not.toBeInTheDocument();
});
});
it("does not create one DOM node per CJK character for long responses", () => {
const { container } = render(
<MarkdownTextRenderer streaming>{"长".repeat(6_001)}</MarkdownTextRenderer>,
);
expect(container.querySelectorAll("[data-sd-animate]")).toHaveLength(1);
expect(container.querySelector("[data-nanobot-stream-unit]")).not.toBeInTheDocument();
});
it("repairs incomplete streaming markdown without exposing syntax fragments", () => {
const { container, rerender } = render(
<MarkdownTextRenderer streaming>{"**partial answer"}</MarkdownTextRenderer>,
);
expect(container).toHaveTextContent("partial answer");
expect(container).not.toHaveTextContent("**partial answer");
rerender(
<MarkdownTextRenderer streaming>
{"[OpenAI](https://openai.com"}
</MarkdownTextRenderer>,
);
expect(screen.queryByRole("link", { name: "OpenAI" })).not.toBeInTheDocument();
expect(container).toHaveTextContent("OpenAI");
rerender(
<MarkdownTextRenderer streaming>
{"[OpenAI](https://openai.com)"}
</MarkdownTextRenderer>,
);
expect(screen.getByRole("link", { name: "OpenAI" })).toHaveAttribute(
"href",
"https://openai.com",
);
rerender(
<MarkdownTextRenderer streaming highlightCode={false}>
{"```ts\nconst value = 1;"}
</MarkdownTextRenderer>,
);
expect(screen.getByText("const value = 1;")).toBeInTheDocument();
});
it("preserves semantic emphasis without leaking parser metadata into the DOM", () => {
render(
<MarkdownTextRenderer>
{"**Important** and *careful* with [links](https://example.com)."}
</MarkdownTextRenderer>,
);
expect(screen.getByText("Important").tagName).toBe("STRONG");
expect(screen.getByText("careful").tagName).toBe("EM");
expect(screen.getByRole("link", { name: "links" })).not.toHaveAttribute("node");
});
it("adds line numbers to multiline fenced code without changing inline code", () => {
render(
<MarkdownTextRenderer highlightCode={false}>
{"```ts\nconst one = 1;\nconst two = 2;\n```\n\nUse `one` next."}
</MarkdownTextRenderer>,
);
expect(screen.getByText("1")).toBeInTheDocument();
expect(screen.getByText("2")).toBeInTheDocument();
expect(screen.getByText("one").tagName).toBe("CODE");
});
it("keeps dollar amounts from being parsed as inline math", () => {
webui/src/tests/markdown-text.test.tsx
+70 -44
View File
@@ -1,18 +1,29 @@
import { useEffect } from "react";
import { act, render, screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { MarkdownText } from "@/components/MarkdownText";
const rendererSpy = vi.hoisted(() => vi.fn());
const rendererMountSpy = vi.hoisted(() => vi.fn());
const rendererControl = vi.hoisted(() => ({ failStreaming: false }));
vi.mock("@/components/MarkdownTextRenderer", () => ({
default: ({
default: function MockMarkdownTextRenderer({
children,
highlightCode,
streaming,
}: {
children: string;
highlightCode?: boolean;
}) => {
streaming?: boolean;
}) {
useEffect(() => {
rendererMountSpy();
}, []);
if (streaming && rendererControl.failStreaming) {
throw new Error("incomplete streaming markdown");
}
rendererSpy({ children, highlightCode });
return (
<div
@@ -26,61 +37,76 @@ vi.mock("@/components/MarkdownTextRenderer", () => ({
}));
describe("MarkdownText", () => {
it("throttles streaming markdown commits and flushes before final highlighting", async () => {
rendererSpy.mockClear();
vi.useFakeTimers();
it("recovers markdown rendering when a failed streaming response completes", async () => {
rendererControl.failStreaming = true;
const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
const source = "## Final answer\n\nThis is **important**.";
try {
const { rerender } = render(
<MarkdownText streaming>hello</MarkdownText>,
const { container, rerender } = render(
<MarkdownText streaming>{source}</MarkdownText>,
);
await act(async () => {
await Promise.resolve();
await Promise.resolve();
});
expect(container.querySelector(".streaming-text-fallback")?.textContent).toBe(source);
expect(screen.getByTestId("markdown-renderer")).toHaveTextContent("hello");
expect(screen.getByTestId("markdown-renderer")).toHaveAttribute(
"data-highlight-code",
"true",
);
expect(rendererSpy).toHaveBeenCalledTimes(1);
rendererControl.failStreaming = false;
rerender(<MarkdownText>{source}</MarkdownText>);
rerender(<MarkdownText streaming>hello world</MarkdownText>);
expect(screen.getByTestId("markdown-renderer")).toHaveTextContent("hello");
expect(rendererSpy).toHaveBeenCalledTimes(1);
act(() => {
vi.advanceTimersByTime(79);
});
expect(screen.getByTestId("markdown-renderer")).toHaveTextContent("hello");
expect(rendererSpy).toHaveBeenCalledTimes(1);
act(() => {
vi.advanceTimersByTime(1);
});
await act(async () => {
await Promise.resolve();
});
expect(screen.getByTestId("markdown-renderer")).toHaveTextContent("hello world");
expect(rendererSpy).toHaveBeenCalledTimes(2);
rerender(<MarkdownText streaming>hello world!!!</MarkdownText>);
expect(screen.getByTestId("markdown-renderer")).toHaveTextContent("hello world");
rerender(<MarkdownText>hello world!!!</MarkdownText>);
expect(screen.getByTestId("markdown-renderer")).toHaveTextContent("hello world!!!");
expect(screen.getByTestId("markdown-renderer")).toHaveAttribute(
"data-highlight-code",
"true",
);
expect(screen.getByTestId("markdown-renderer").textContent).toBe(source);
} finally {
vi.useRealTimers();
rendererControl.failStreaming = false;
consoleError.mockRestore();
}
});
it("keeps very large streaming snippets plain until the final render", async () => {
it("forwards every provider update without an extra UI timer", async () => {
rendererSpy.mockClear();
const { rerender } = render(
<MarkdownText streaming>hello</MarkdownText>,
);
await act(async () => {
await Promise.resolve();
await Promise.resolve();
});
expect(screen.getByTestId("markdown-renderer")).toHaveTextContent("hello");
expect(screen.getByTestId("markdown-renderer")).toHaveAttribute(
"data-highlight-code",
"false",
);
rerender(<MarkdownText streaming>hello world</MarkdownText>);
expect(screen.getByTestId("markdown-renderer")).toHaveTextContent("hello world");
rerender(<MarkdownText>hello world!!!</MarkdownText>);
expect(screen.getByTestId("markdown-renderer")).toHaveTextContent("hello world!!!");
expect(screen.getByTestId("markdown-renderer")).toHaveAttribute(
"data-highlight-code",
"true",
);
});
it("keeps a healthy renderer mounted when streaming completes", async () => {
rendererMountSpy.mockClear();
const { rerender } = render(
<MarkdownText streaming>hello</MarkdownText>,
);
await act(async () => {
await Promise.resolve();
await Promise.resolve();
});
rerender(<MarkdownText>hello world</MarkdownText>);
expect(rendererMountSpy).toHaveBeenCalledTimes(1);
});
it("defers syntax highlighting until the final render", async () => {
rendererSpy.mockClear();
const largeCode = `\`\`\`ts\n${"const value = 1;\n".repeat(1_100)}\`\`\``;
webui/src/tests/mcp-activity-model.test.ts
+37
View File
@@ -0,0 +1,37 @@
import { describe, expect, it } from "vitest";
import { describeMcpActivity } from "@/components/thread/activity/mcp-activity-model";
describe("describeMcpActivity", () => {
it.each([
["browser_navigate", { url: "https://example.com/docs" }, "done", "Opened", "example.com/docs"],
["browser_click", { element: "Submit" }, "running", "Clicking", "Submit"],
["browser_snapshot", {}, "done", "Inspected page", undefined],
["browser_screenshot", {}, "done", "Captured screenshot", undefined],
["browser_press_key", { key: "Enter" }, "error", "Could not press", "Enter"],
] as const)("turns %s into user-facing activity copy", (tool, args, status, action, target) => {
expect(describeMcpActivity(tool, args, status)).toEqual({ action, target });
});
it("does not expose entered text in the activity timeline", () => {
expect(describeMcpActivity(
"browser_fill",
{ element: "Password", text: "not-for-the-timeline" },
"done",
)).toEqual({ action: "Entered text", target: "in Password" });
});
it("drops URL credentials and query parameters from browser activity", () => {
expect(describeMcpActivity(
"browser_navigate",
{ url: "https://user:password@example.com/docs?token=private#section" },
"done",
)).toEqual({ action: "Opened", target: "example.com/docs" });
});
it("humanizes unknown tool names instead of exposing function syntax", () => {
expect(describeMcpActivity("browser_export_report", {}, "done")).toEqual({
action: "Export report completed",
});
});
});
webui/src/tests/message-bubble.test.tsx
+20 -21
View File
@@ -511,13 +511,13 @@ describe("MessageBubble", () => {
const video = screen.getByLabelText(/video attachment/i);
expect(video.tagName).toBe("VIDEO");
expect(video).toHaveAttribute("src", "/api/media/sig/payload");
expect(video).toHaveAttribute("preload", "auto");
expect(video).toHaveAttribute("preload", "metadata");
expect(container.querySelector("video[controls]")).toBeInTheDocument();
expect(screen.queryByText("Preview")).not.toBeInTheDocument();
expect(screen.queryByText("Code")).not.toBeInTheDocument();
});
it("auto-expands the reasoning trace while streaming with a shimmer header", () => {
it("renders streaming reasoning as one compact activity line", () => {
const message: UIMessage = {
id: "a-reasoning-streaming",
role: "assistant",
@@ -529,15 +529,19 @@ describe("MessageBubble", () => {
const { container } = render(<MessageBubble message={message} />);
expect(screen.getByText("Thinking…")).toBeInTheDocument();
expect(screen.getByText(/Step 1: parse intent\./)).toBeInTheDocument();
const preview = screen.getByText("Step 1: parse intent. Step 2: compute.");
expect(preview).toBeInTheDocument();
expect(container.querySelector(".reasoning-sheen-stripe")).not.toBeInTheDocument();
expect(screen.getByText("Thinking…")).toHaveClass("streaming-text-sheen");
expect(screen.getByText("Thinking…")).toHaveAttribute("data-sheen-text", "Thinking…");
expect(screen.getByRole("button", { name: /thinking/i }).parentElement).not.toHaveClass("mb-2");
expect(preview).toHaveClass("streaming-text-sheen");
expect(preview).toHaveAttribute(
"data-sheen-text",
"Step 1: parse intent. Step 2: compute.",
);
expect(screen.queryByText("Thinking…")).not.toBeInTheDocument();
expect(screen.queryByRole("button", { name: /thinking/i })).not.toBeInTheDocument();
});
it("collapses the reasoning section by default once streaming ends", () => {
it("keeps completed reasoning on one line above the answer", () => {
const message: UIMessage = {
id: "a-reasoning-done",
role: "assistant",
@@ -549,17 +553,15 @@ describe("MessageBubble", () => {
render(<MessageBubble message={message} />);
expect(screen.getByText("Thinking")).toBeInTheDocument();
const preview = screen.getByText("hidden until expanded");
expect(preview).toBeInTheDocument();
expect(screen.getByText("The answer is 42.")).toBeInTheDocument();
expect(screen.queryByText("hidden until expanded")).not.toBeInTheDocument();
expect(screen.getByRole("button", { name: /thinking/i }).parentElement).toHaveClass("mb-2");
fireEvent.click(screen.getByRole("button", { name: /thinking/i }));
expect(screen.getByText("hidden until expanded")).toBeInTheDocument();
expect(preview.closest('[data-testid="activity-step"]')).toHaveClass("mb-2");
expect(screen.queryByText("Thinking")).not.toBeInTheDocument();
expect(screen.queryByRole("button", { name: /thinking/i })).not.toBeInTheDocument();
});
it("renders reasoning body as markdown so headings are not left as raw ###", async () => {
await import("@/components/MarkdownTextRenderer");
it("compacts reasoning markdown into plain single-line text", () => {
const message: UIMessage = {
id: "a-reasoning-md",
role: "assistant",
@@ -570,13 +572,10 @@ describe("MessageBubble", () => {
};
const { container } = render(<MessageBubble message={message} />);
fireEvent.click(screen.getByRole("button", { name: /thinking/i }));
await waitFor(() => {
expect(container.querySelector("h3")?.textContent).toBe("Section title");
});
expect(screen.getByText("Section title Body line.")).toBeInTheDocument();
expect(container.textContent).not.toContain("###");
expect(screen.getByText("Body line.")).toBeInTheDocument();
expect(container.querySelector("h3")).not.toBeInTheDocument();
});
it("renders inline file paths as compact file references", async () => {
webui/src/tests/nanobot-client.test.ts
+22
View File
@@ -528,6 +528,28 @@ describe("NanobotClient", () => {
});
});
it("sends selected assistant text as separate quoted context", () => {
const client = new NanobotClient({
url: "ws://test",
reconnect: false,
socketFactory: (url) => new FakeSocket(url) as unknown as WebSocket,
});
client.connect();
lastSocket().fakeOpen();
client.sendMessage("chat-x", "What does this mean?", undefined, {
quotedContext: " selected answer excerpt ",
});
expect(JSON.parse(lastSocket().sent.at(-1) as string)).toEqual({
type: "message",
chat_id: "chat-x",
content: "What does this mean?",
quoted_context: "selected answer excerpt",
webui: true,
});
});
it("includes CLI app attachments in outbound messages", () => {
const client = new NanobotClient({
url: "ws://test",
webui/src/tests/provider-brand.test.ts
+27 -1
View File
@@ -1,6 +1,12 @@
import { describe, expect, it } from "vitest";
import { faviconUrls, logoFallbackUrls, providerBrand } from "@/lib/provider-brand";
import {
browserSafeFaviconUrls,
faviconUrls,
isGenericRepositoryLogoUrl,
logoFallbackUrls,
providerBrand,
} from "@/lib/provider-brand";
describe("provider brand logos", () => {
it("uses multiple favicon sources before falling back to initials", () => {
@@ -11,6 +17,15 @@ describe("provider brand logos", () => {
]);
});
it("uses cross-origin-safe favicon sources first for arbitrary web pages", () => {
expect(browserSafeFaviconUrls("openai.com")).toEqual([
"https://favicon.im/openai.com?larger=true",
"https://www.google.com/s2/favicons?domain=openai.com&sz=64",
"https://icons.duckduckgo.com/ip3/openai.com.ico",
"https://openai.com/favicon.ico",
]);
});
it("keeps explicit Google favicon URLs first before trying fallbacks", () => {
expect(logoFallbackUrls("https://www.google.com/s2/favicons?domain=browserbase.com&sz=64")).toEqual([
"https://www.google.com/s2/favicons?domain=browserbase.com&sz=64",
@@ -28,6 +43,17 @@ describe("provider brand logos", () => {
]);
});
it("distinguishes repository host favicons from product identities", () => {
expect(
isGenericRepositoryLogoUrl(
"https://www.google.com/s2/favicons?domain=github.com/HKUDS/CLI-Anything&sz=64",
),
).toBe(true);
expect(isGenericRepositoryLogoUrl("https://github.com/favicon.ico")).toBe(true);
expect(isGenericRepositoryLogoUrl("https://raw.githubusercontent.com/org/repo/logo.svg")).toBe(false);
expect(isGenericRepositoryLogoUrl("https://blender.org/favicon.ico")).toBe(false);
});
it("keeps Zhipu on the current Z.ai brand domain", () => {
expect(providerBrand("zhipu")?.logoUrls[0]).toBe("https://z-cdn.chatglm.cn/z-ai/static/logo.svg");
expect(providerBrand("zhipu")?.logoUrls).toContain("https://www.google.com/s2/favicons?domain=z.ai&sz=64");
webui/src/tests/settings-view.test.tsx
+7 -3
View File
@@ -485,7 +485,10 @@ describe("SettingsView Apps catalog", () => {
const url = String(input);
if (url === "/api/settings") return jsonResponse(settingsPayload());
if (url === "/api/settings/cli-apps") {
return jsonResponse({ apps: [], installed_count: 0 });
return jsonResponse({
apps: [{ ...installedAnyGen, installed: false, status: "available" }],
installed_count: 0,
});
}
if (url === "/api/settings/mcp-presets") {
return jsonResponse({ presets: [], installed_count: 0 });
@@ -514,11 +517,12 @@ describe("SettingsView Apps catalog", () => {
renderSettingsView({ initialSection: "apps" });
expect(await screen.findByText("Add tools to nanobot, then @ them in chat.")).toBeInTheDocument();
expect(screen.getByRole("button", { name: "Ready" })).toBeInTheDocument();
expect(screen.getByRole("button", { name: "Apps" })).toBeInTheDocument();
expect(screen.getByRole("button", { name: "Ready" })).toHaveAttribute("aria-pressed", "false");
expect(screen.getByRole("button", { name: "Apps" })).toHaveAttribute("aria-pressed", "true");
expect(screen.getByRole("button", { name: "Integrations" })).toBeInTheDocument();
expect(screen.queryByRole("button", { name: "Plugins" })).not.toBeInTheDocument();
expect(screen.queryByText("Api")).not.toBeInTheDocument();
expect(screen.getByText("AnyGen")).toBeInTheDocument();
expect(screen.getByText("0 ready")).toBeInTheDocument();
});
webui/src/tests/thread-composer.test.tsx
+65 -4
View File
@@ -292,6 +292,51 @@ function ascii(bytes: Uint8Array, offset: number, length: number): string {
}
describe("ThreadComposer", () => {
it("focuses and sends a removable quoted answer excerpt", async () => {
const onSend = vi.fn();
const onQuotedContextChange = vi.fn();
render(
<ThreadComposer
onSend={onSend}
placeholder="Type your message..."
quotedContext="selected answer excerpt"
focusRequest={1}
onQuotedContextChange={onQuotedContextChange}
/>,
);
const input = screen.getByLabelText("Message input");
await waitFor(() => expect(input).toHaveFocus());
expect(screen.getByLabelText("Quoted context")).toHaveTextContent("selected answer excerpt");
fireEvent.change(input, { target: { value: "What does this mean?" } });
fireEvent.click(screen.getByRole("button", { name: "Send message" }));
expect(onSend).toHaveBeenCalledWith("What does this mean?", undefined, {
quotedContext: "selected answer excerpt",
});
expect(onQuotedContextChange).toHaveBeenCalledWith(null);
});
it("removes quoted context without clearing the draft", () => {
const onQuotedContextChange = vi.fn();
render(
<ThreadComposer
onSend={vi.fn()}
placeholder="Type your message..."
quotedContext="selected answer excerpt"
onQuotedContextChange={onQuotedContextChange}
/>,
);
const input = screen.getByLabelText("Message input");
fireEvent.change(input, { target: { value: "keep this draft" } });
fireEvent.click(screen.getByRole("button", { name: "Remove quoted context" }));
expect(onQuotedContextChange).toHaveBeenCalledWith(null);
expect(input).toHaveValue("keep this draft");
});
it("renders a readonly hero model composer when provided", () => {
render(
<ThreadComposer
@@ -1633,7 +1678,11 @@ describe("ThreadComposer", () => {
fireEvent.click(screen.getByRole("button", { name: "Guide" }));
expect(onSend).toHaveBeenCalledWith("keep the UI minimal");
expect(onSend).toHaveBeenCalledWith(
"keep the UI minimal",
undefined,
{ continueActiveTurn: true },
);
expect(screen.queryByText("keep the UI minimal")).not.toBeInTheDocument();
});
@@ -1663,7 +1712,11 @@ describe("ThreadComposer", () => {
fireEvent.keyDown(input, { key: "Enter" });
expect(onSend).toHaveBeenCalledWith("send this guidance now");
expect(onSend).toHaveBeenCalledWith(
"send this guidance now",
undefined,
{ continueActiveTurn: true },
);
expect(onSend).toHaveBeenCalledTimes(1);
expect(screen.queryByText("send this guidance now")).not.toBeInTheDocument();
});
@@ -1783,7 +1836,11 @@ describe("ThreadComposer", () => {
fireEvent.keyDown(input, { key: "Enter" });
fireEvent.keyDown(input, { key: "Enter" });
expect(onSend).toHaveBeenCalledWith("guide this one now");
expect(onSend).toHaveBeenCalledWith(
"guide this one now",
undefined,
{ continueActiveTurn: true },
);
expect(onSend).toHaveBeenCalledTimes(1);
expect(screen.getByText("older guidance")).toBeInTheDocument();
expect(screen.queryByText("guide this one now")).not.toBeInTheDocument();
@@ -2165,7 +2222,11 @@ describe("ThreadComposer", () => {
fireEvent.keyDown(screen.getByLabelText("Message input"), { key: "Enter" });
expect(onSend).not.toHaveBeenCalled();
fireEvent.click(screen.getByRole("button", { name: "Guide" }));
expect(onSend).toHaveBeenCalledWith("remember this edited follow-up");
expect(onSend).toHaveBeenCalledWith(
"remember this edited follow-up",
undefined,
{ continueActiveTurn: true },
);
remount.unmount();
render(
webui/src/tests/thread-messages.test.tsx
+49 -1
View File
@@ -1,4 +1,4 @@
import { render, screen } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { afterEach, describe, expect, it, vi } from "vitest";
import {
@@ -10,10 +10,58 @@ import {
import type { UIMessage } from "@/lib/types";
afterEach(() => {
vi.restoreAllMocks();
vi.useRealTimers();
});
describe("ThreadMessages", () => {
it("offers a follow-up action for text selected within one completed answer", async () => {
const onQuoteSelection = vi.fn();
render(
<ThreadMessages
messages={[{
id: "a1",
role: "assistant",
content: "The selected answer excerpt",
createdAt: 1,
}]}
isStreaming={false}
onQuoteSelection={onQuoteSelection}
/>,
);
const textNode = screen.getByText("The selected answer excerpt").firstChild!;
const range = document.createRange();
range.setStart(textNode, 4);
range.setEnd(textNode, 19);
vi.spyOn(range, "getBoundingClientRect").mockReturnValue({
left: 100,
right: 240,
top: 100,
bottom: 120,
width: 140,
height: 20,
x: 100,
y: 100,
toJSON: () => ({}),
});
const removeAllRanges = vi.fn();
vi.spyOn(window, "getSelection").mockReturnValue({
isCollapsed: false,
rangeCount: 1,
getRangeAt: () => range,
toString: () => "selected answer",
removeAllRanges,
} as unknown as Selection);
document.dispatchEvent(new Event("selectionchange"));
const action = await screen.findByRole("button", { name: "Ask about this" });
fireEvent.click(action);
await waitFor(() => expect(onQuoteSelection).toHaveBeenCalledWith("selected answer"));
expect(removeAllRanges).toHaveBeenCalled();
});
it("groups consecutive reasoning and tool rows into one timeline before the answer", () => {
const messages: UIMessage[] = [
{
webui/src/tests/thread-shell.test.tsx
+2
View File
@@ -2,6 +2,7 @@ import { act, fireEvent, render, screen, waitFor, within } from "@testing-librar
import type { ReactNode } from "react";
import { beforeEach, describe, expect, it, vi } from "vitest";
import { preloadMarkdownText } from "@/components/MarkdownText";
import { ThreadShell } from "@/components/thread/ThreadShell";
import { CLI_APPS_CHANGED_EVENT } from "@/lib/cli-app-events";
import { ClientProvider } from "@/providers/ClientProvider";
@@ -232,6 +233,7 @@ describe("ThreadShell", () => {
});
it("keeps inferred file paths non-interactive when the availability probe fails", async () => {
await preloadMarkdownText();
const client = makeClient();
let resolveProbe!: (value: Response) => void;
const probe = new Promise<Response>((resolve) => {
webui/src/tests/tool-traces.test.ts
+29
View File
@@ -0,0 +1,29 @@
import { describe, expect, it } from "vitest";
import {
canonicalToolTrace,
mergeUniqueToolTraceLines,
} from "@/lib/tool-traces";
describe("tool trace identity", () => {
it("treats persisted and live JSON formatting as the same call", () => {
const persisted = 'web_search({"query": "site:linkedin.com/company Evomap startup", "count": 10})';
const live = 'web_search({"query":"site:linkedin.com/company Evomap startup","count":10})';
expect(canonicalToolTrace(persisted)).toBe(canonicalToolTrace(live));
expect(mergeUniqueToolTraceLines([persisted], [live])).toEqual({
traces: [persisted],
added: false,
});
});
it("keeps genuinely different calls separate", () => {
const first = 'web_search({"query":"nanobot"})';
const second = 'web_search({"query":"nanobot cloud"})';
expect(mergeUniqueToolTraceLines([first], [second])).toEqual({
traces: [first, second],
added: true,
});
});
});
webui/src/tests/trace-activity-model.test.ts
+57
View File
@@ -0,0 +1,57 @@
import { describe, expect, it } from "vitest";
import { describeTraceLine } from "@/components/thread/activity/trace-activity-model";
import type { GenericToolStatus } from "@/components/thread/activity/generic-tool-model";
function describeTrace(line: string, status: GenericToolStatus = "done") {
return describeTraceLine(line, status);
}
describe("trace activity semantics", () => {
it.each([
['web_search({"query":"nanobot latest release"})', "done", "Searched nanobot latest release", ""],
['web_fetch({"url":"https://example.com/docs?token=private"})', "done", "Read", "example.com/docs"],
['read_file({"path":"/Users/alice/project/README.md"})', "done", "Read", "~/project/README.md"],
['exec({"command":"date +%Y-%m-%d"})', "done", "Checked current time", ""],
['exec_command({"cmd":"API_KEY=secret npm test"})', "running", "Running command", "API_KEY=•••• npm test"],
['write_file({"path":"/home/alice/project/output.txt"})', "done", "Wrote file", "~/project/output.txt"],
['apply_patch({"file_path":"src/app.tsx","patch":"private"})', "error", "Could not edit file", "src/app.tsx"],
['third_party_sync({"token":"secret","payload":"private"})', "done", "Completed Third party sync", ""],
["Finished collecting results", "done", "Completed step", "Finished collecting results"],
] as const)("describes %s as one safe activity line", (line, status, label, detail) => {
const result = describeTrace(line, status);
expect(result).toMatchObject({ label, detail });
expect(`${result.label} ${result.detail}`).not.toMatch(/[{}]|private|\/Users\/alice|\/home\/alice/);
});
it.each([
["running", "Searching status test"],
["done", "Searched status test"],
["error", "Could not search status test"],
] as const)("uses status-aware search copy for %s", (status, label) => {
expect(describeTrace('web_search({"query":"status test"})', status).label).toBe(label);
});
it("never exposes URL credentials, query secrets, or private-network links", () => {
const publicResult = describeTrace(
'web_fetch({"url":"https://user:password@example.com/docs?api_key=secret#section"})',
);
expect(publicResult).toMatchObject({ detail: "example.com/docs", host: "example.com" });
expect(JSON.stringify(publicResult)).not.toMatch(/password|api_key|secret/);
const privateResult = describeTrace('web_fetch({"url":"http://127.0.0.1:8765/private"})');
expect(privateResult.url).toBeUndefined();
expect(privateResult.detail).not.toContain("127.0.0.1");
});
it("summarizes multi-line commands without exposing every script line", () => {
const result = describeTrace(
'exec({"command":"npm test\\necho second-secret-line\\necho third-line"})',
);
expect(result).toMatchObject({
label: "Ran command",
detail: "npm test · script, 3 lines",
});
expect(result.detail).not.toContain("second-secret-line");
});
});
webui/src/tests/useLogoFallback.test.tsx
+8 -7
View File
@@ -7,15 +7,13 @@ import {
} from "@/hooks/useLogoFallback";
function TestLogo({ urls }: { urls: string[] }) {
const { logoUrl, onLogoError, onLogoLoad } = useLogoFallback(urls);
const { logoUrl, logoLoaded, onLogoError, onLogoLoad } = useLogoFallback(urls);
if (!logoUrl) return <span>No logo</span>;
return (
<img
src={logoUrl}
alt="Logo"
onLoad={onLogoLoad}
onError={onLogoError}
/>
<>
<span>{logoLoaded ? "Loaded" : "Loading"}</span>
<img src={logoUrl} alt="Logo" onLoad={onLogoLoad} onError={onLogoError} />
</>
);
}
@@ -32,15 +30,18 @@ describe("useLogoFallback", () => {
const first = render(<TestLogo urls={urls} />);
expect(screen.getByRole("img", { name: "Logo" })).toHaveAttribute("src", urls[0]);
expect(screen.getByText("Loading")).toBeInTheDocument();
fireEvent.error(screen.getByRole("img", { name: "Logo" }));
expect(screen.getByRole("img", { name: "Logo" })).toHaveAttribute("src", urls[1]);
fireEvent.load(screen.getByRole("img", { name: "Logo" }));
expect(screen.getByText("Loaded")).toBeInTheDocument();
first.unmount();
render(<TestLogo urls={urls} />);
expect(screen.getByRole("img", { name: "Logo" })).toHaveAttribute("src", urls[1]);
expect(screen.getByText("Loaded")).toBeInTheDocument();
});
it("returns no logo once every candidate failed", () => {
webui/src/tests/useNanobotStream.test.tsx
+131
View File
@@ -131,6 +131,55 @@ describe("useNanobotStream", () => {
requestFrame.mockRestore();
});
it("coalesces hidden-tab deltas without scheduling paint frames", () => {
vi.useFakeTimers();
const visibilityDescriptor = Object.getOwnPropertyDescriptor(document, "visibilityState");
Object.defineProperty(document, "visibilityState", {
configurable: true,
value: "hidden",
});
const requestFrame = vi.spyOn(window, "requestAnimationFrame");
try {
const fake = fakeClient();
const { result } = renderHook(
() => useNanobotStream("chat-background", EMPTY_MESSAGES),
{ wrapper: wrap(fake.client) },
);
act(() => {
fake.emit("chat-background", {
event: "delta",
chat_id: "chat-background",
text: "Quiet",
});
fake.emit("chat-background", {
event: "delta",
chat_id: "chat-background",
text: " background",
});
});
expect(requestFrame).not.toHaveBeenCalled();
expect(result.current.messages).toHaveLength(0);
act(() => vi.advanceTimersByTime(1_000));
expect(result.current.messages[0]).toMatchObject({
content: "Quiet background",
isStreaming: true,
});
} finally {
requestFrame.mockRestore();
if (visibilityDescriptor) {
Object.defineProperty(document, "visibilityState", visibilityDescriptor);
} else {
delete (document as Document & { visibilityState?: DocumentVisibilityState }).visibilityState;
}
vi.useRealTimers();
}
});
it("flushes pending delta text before turn_end finalizes the turn", () => {
const fake = fakeClient();
const { result } = renderHook(() => useNanobotStream("chat-flush", EMPTY_MESSAGES), {
@@ -1832,6 +1881,88 @@ describe("useNanobotStream", () => {
}
});
it("keeps guided output in place while the active turn resumes", async () => {
const fake = fakeClient();
const { result } = renderHook(() => useNanobotStream("chat-guide", EMPTY_MESSAGES), {
wrapper: wrap(fake.client),
});
act(() => {
result.current.send("research this");
});
const activeTurnId = fake.client.sendMessage.mock.calls.at(-1)![3]?.turnId;
act(() => {
fake.emit("chat-guide", {
event: "delta",
chat_id: "chat-guide",
text: "Initial findings",
turn_id: activeTurnId,
});
});
await flushStreamFrame();
act(() => {
result.current.send("focus on primary sources", undefined, {
continueActiveTurn: true,
});
});
const guideCall = fake.client.sendMessage.mock.calls.at(-1)!;
expect(guideCall[3]).not.toHaveProperty("continueActiveTurn");
expect(result.current.messages.map((message) => message.content)).toEqual([
"research this",
"Initial findings",
"focus on primary sources",
]);
act(() => {
fake.emit("chat-guide", {
event: "stream_end",
chat_id: "chat-guide",
text: "Initial findings",
resuming: true,
turn_id: activeTurnId,
});
});
expect(result.current.isStreaming).toBe(true);
expect(result.current.messages).toHaveLength(3);
expect(result.current.messages[1]).toMatchObject({
content: "Initial findings",
isStreaming: false,
});
act(() => {
fake.emit("chat-guide", {
event: "delta",
chat_id: "chat-guide",
text: "Updated with primary sources",
turn_id: activeTurnId,
});
});
await flushStreamFrame();
expect(result.current.messages.map((message) => message.content)).toEqual([
"research this",
"Initial findings",
"focus on primary sources",
"Updated with primary sources",
]);
expect(result.current.messages[3]).toMatchObject({ isStreaming: true });
act(() => {
fake.emit("chat-guide", {
event: "turn_end",
chat_id: "chat-guide",
turn_id: activeTurnId,
});
});
expect(result.current.isStreaming).toBe(false);
expect(result.current.messages.every((message) => !message.isStreaming)).toBe(true);
});
it("keeps streaming alive across stream_end when tool activity follows", async () => {
const fake = fakeClient();
const onTurnEnd = vi.fn();
webui/src/tests/usePageVisibility.test.tsx
+35
View File
@@ -0,0 +1,35 @@
import { act, renderHook } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { usePageVisibility } from "@/hooks/usePageVisibility";
describe("usePageVisibility", () => {
it("tracks visibility changes so background work can pause and resume", () => {
const original = Object.getOwnPropertyDescriptor(document, "visibilityState");
Object.defineProperty(document, "visibilityState", {
configurable: true,
value: "hidden",
});
const { result, unmount } = renderHook(usePageVisibility);
try {
expect(result.current).toBe(false);
act(() => {
Object.defineProperty(document, "visibilityState", {
configurable: true,
value: "visible",
});
document.dispatchEvent(new Event("visibilitychange"));
});
expect(result.current).toBe(true);
} finally {
unmount();
if (original) {
Object.defineProperty(document, "visibilityState", original);
} else {
delete (document as Document & { visibilityState?: DocumentVisibilityState }).visibilityState;
}
}
});
});
webui/src/tests/vite-config.test.ts
+18
View File
@@ -15,6 +15,24 @@ describe("webuiManualChunk", () => {
).toBe("markdown-vendor");
});
it("keeps Streamdown and its repair helper in the markdown chunk", () => {
expect(webuiManualChunk("/repo/node_modules/streamdown/dist/index.js")).toBe(
"markdown-vendor",
);
expect(webuiManualChunk("/repo/node_modules/remend/dist/index.js")).toBe(
"markdown-vendor",
);
});
it("leaves Streamdown's optional renderers as lazy chunks", () => {
expect(
webuiManualChunk("/repo/node_modules/streamdown/dist/mermaid-ABC.js"),
).toBeUndefined();
expect(
webuiManualChunk("/repo/node_modules/streamdown/dist/highlighted-body-ABC.js"),
).toBeUndefined();
});
it("leaves language grammars as independently loaded chunks", () => {
expect(webuiManualChunk("/repo/node_modules/refractor/lang/python.js")).toBeUndefined();
});
webui/src/tests/web-url.test.ts
+39
View File
@@ -0,0 +1,39 @@
import { describe, expect, it } from "vitest";
import {
formatCompactWebUrl,
parsePublicHttpUrl,
parseSafeActivityHttpUrl,
} from "@/components/thread/activity/web-url";
describe("activity web URLs", () => {
it("keeps public HTTP URLs and removes query noise from their label", () => {
const url = parsePublicHttpUrl("https://www.example.com/docs/?token=private#section");
expect(url).not.toBeNull();
expect(formatCompactWebUrl(url!)).toBe("example.com/docs");
});
it.each([
"http://localhost:3000",
"http://service.internal",
"http://printer.lan",
"http://127.0.0.1",
"http://10.0.0.1",
"http://169.254.169.254/latest/meta-data",
"http://172.16.0.1",
"http://192.168.1.1",
"http://[::1]",
"http://[::ffff:127.0.0.1]",
"https://user:password@example.com",
])("rejects private or credential-bearing target %s", (value) => {
expect(parsePublicHttpUrl(value)).toBeNull();
});
it("normalizes credential-bearing public URLs for safe activity display", () => {
const url = parseSafeActivityHttpUrl(
"https://user:password@example.com/docs?access_token=private#section",
);
expect(url?.href).toBe("https://example.com/docs");
expect(formatCompactWebUrl(url!)).toBe("example.com/docs");
});
});
webui/tailwind.config.js
+1
View File
@@ -8,6 +8,7 @@ export default {
"./index.html",
"./src/**/*.{ts,tsx}",
"../nanobot/channels/*/webui/**/*.{ts,tsx}",
"./node_modules/streamdown/dist/*.js",
],
theme: {
container: {
webui/vite.config.ts
+14 -11
View File
@@ -6,6 +6,14 @@ export function webuiManualChunk(id: string): string | undefined {
if (id.includes("node_modules/refractor/lang/")) {
return;
}
// Streamdown lazy-loads diagrams and highlighted code. Keep those modules
// outside the core markdown chunk so ordinary replies do not download them.
if (
id.includes("node_modules/streamdown/dist/mermaid-")
|| id.includes("node_modules/streamdown/dist/highlighted-body-")
) {
return;
}
// Refractor reaches this HAST helper through hastscript. Keeping it with
// Refractor prevents syntax-highlight <-> markdown-vendor circular chunks.
if (
@@ -16,7 +24,8 @@ export function webuiManualChunk(id: string): string | undefined {
return "syntax-highlight";
}
if (
id.includes("node_modules/react-markdown")
id.includes("node_modules/streamdown")
|| id.includes("node_modules/remend")
|| id.includes("node_modules/remark-")
|| id.includes("node_modules/rehype-")
|| id.includes("node_modules/unified")
@@ -48,16 +57,10 @@ export default defineConfig(({ mode }) => {
dedupe: ["react", "react-dom", "lucide-react", "react-i18next", "qrcode"],
},
optimizeDeps: {
// Keep dev reloads stable for dependencies that can rewrite generated
// optimizer chunk filenames while a browser tab is still running. Do not
// exclude the markdown/remark/rehype chain: Vite's pre-bundling is needed
// there for CommonJS interop such as style-to-js.
exclude: [
"@radix-ui/react-dialog",
"react-syntax-highlighter/dist/esm/prism-async-light",
"react-syntax-highlighter/dist/esm/styles/prism/one-dark",
"react-syntax-highlighter/dist/esm/styles/prism/one-light",
],
// Radix Dialog can rewrite its optimized chunk while a dev tab is open.
// Syntax highlighting must remain pre-bundled because Refractor's core
// still uses CommonJS internally.
exclude: ["@radix-ui/react-dialog"],
},
build: {
outDir: path.resolve(__dirname, "../nanobot/web/dist"),