mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-06-05 12:25:35 +08:00
Compare commits
12 Commits
fix/claude
...
fix/file-t
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
c7938e4f2b | ||
|
|
fa9eaf5573 | ||
|
|
2edfef2e3f | ||
|
|
96b16b42e4 | ||
|
|
f082cdc63b | ||
|
|
a9fa6eb6b6 | ||
|
|
37d363c1aa | ||
|
|
4658a97952 | ||
|
|
d9e9df183f | ||
|
|
43c33d5cb1 | ||
|
|
137c7c4f3c | ||
|
|
153f1e54b4 |
17
package-lock.json
generated
17
package-lock.json
generated
@@ -39,6 +39,7 @@
|
|||||||
"cmdk": "^1.1.1",
|
"cmdk": "^1.1.1",
|
||||||
"cors": "^2.8.5",
|
"cors": "^2.8.5",
|
||||||
"cross-spawn": "^7.0.3",
|
"cross-spawn": "^7.0.3",
|
||||||
|
"dompurify": "^3.4.7",
|
||||||
"express": "^4.18.2",
|
"express": "^4.18.2",
|
||||||
"fuse.js": "^7.0.0",
|
"fuse.js": "^7.0.0",
|
||||||
"gray-matter": "^4.0.3",
|
"gray-matter": "^4.0.3",
|
||||||
@@ -4580,6 +4581,13 @@
|
|||||||
"@types/node": "*"
|
"@types/node": "*"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/trusted-types": {
|
||||||
|
"version": "2.0.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
|
||||||
|
"integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
"node_modules/@types/unist": {
|
"node_modules/@types/unist": {
|
||||||
"version": "3.0.3",
|
"version": "3.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
|
||||||
@@ -7485,6 +7493,15 @@
|
|||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/dompurify": {
|
||||||
|
"version": "3.4.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.7.tgz",
|
||||||
|
"integrity": "sha512-2jBxDJY4RR06tQNy4w5FlFH7kfxsQZlufd0sbv+chfHCxeJwrFw2baUDsSwvBISD4K4RDbd0PTfy3uNXsR6siA==",
|
||||||
|
"license": "(MPL-2.0 OR Apache-2.0)",
|
||||||
|
"optionalDependencies": {
|
||||||
|
"@types/trusted-types": "^2.0.7"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/dot-prop": {
|
"node_modules/dot-prop": {
|
||||||
"version": "5.3.0",
|
"version": "5.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
|
||||||
|
|||||||
@@ -96,6 +96,7 @@
|
|||||||
"cmdk": "^1.1.1",
|
"cmdk": "^1.1.1",
|
||||||
"cors": "^2.8.5",
|
"cors": "^2.8.5",
|
||||||
"cross-spawn": "^7.0.3",
|
"cross-spawn": "^7.0.3",
|
||||||
|
"dompurify": "^3.4.7",
|
||||||
"express": "^4.18.2",
|
"express": "^4.18.2",
|
||||||
"fuse.js": "^7.0.0",
|
"fuse.js": "^7.0.0",
|
||||||
"gray-matter": "^4.0.3",
|
"gray-matter": "^4.0.3",
|
||||||
|
|||||||
173
server/index.js
173
server/index.js
@@ -1483,74 +1483,133 @@ function permToRwx(perm) {
|
|||||||
return r + w + x;
|
return r + w + x;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Directories that are almost never interesting for a project tree but can
|
||||||
|
// contain tens of thousands of files. Skipping them before recursion keeps
|
||||||
|
// traversal time bounded on large monorepos and high-latency filesystems
|
||||||
|
// (NFS / SMB).
|
||||||
|
const IGNORED_DIRS = new Set([
|
||||||
|
// JS / TS toolchains
|
||||||
|
'node_modules', 'dist', 'build', '.next', '.nuxt', '.cache', '.parcel-cache',
|
||||||
|
// VCS
|
||||||
|
'.git', '.svn', '.hg',
|
||||||
|
// Python
|
||||||
|
'__pycache__', '.pytest_cache', '.mypy_cache', '.tox', 'venv', '.venv',
|
||||||
|
// Rust / Go / Java / Ruby
|
||||||
|
'target', 'vendor',
|
||||||
|
// Build output / IDE
|
||||||
|
'.gradle', '.idea', 'coverage', '.nyc_output'
|
||||||
|
]);
|
||||||
|
|
||||||
|
const DEFAULT_FS_CONCURRENCY = 64;
|
||||||
|
const parsedFsConcurrency = Number.parseInt(process.env.FS_CONCURRENCY || '', 10);
|
||||||
|
const FS_CONCURRENCY = Number.isFinite(parsedFsConcurrency) && parsedFsConcurrency > 0
|
||||||
|
? parsedFsConcurrency
|
||||||
|
: DEFAULT_FS_CONCURRENCY;
|
||||||
|
let activeFsOperations = 0;
|
||||||
|
const pendingFsOperations = [];
|
||||||
|
|
||||||
|
async function acquire() {
|
||||||
|
if (activeFsOperations < FS_CONCURRENCY) {
|
||||||
|
activeFsOperations += 1;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
await new Promise((resolve) => {
|
||||||
|
pendingFsOperations.push(resolve);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function release() {
|
||||||
|
const next = pendingFsOperations.shift();
|
||||||
|
if (next) {
|
||||||
|
next();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
activeFsOperations = Math.max(0, activeFsOperations - 1);
|
||||||
|
}
|
||||||
|
|
||||||
async function getFileTree(dirPath, maxDepth = 3, currentDepth = 0, showHidden = true) {
|
async function getFileTree(dirPath, maxDepth = 3, currentDepth = 0, showHidden = true) {
|
||||||
// Using fsPromises from import
|
// Using fsPromises from import
|
||||||
const items = [];
|
let entries;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const entries = await fsPromises.readdir(dirPath, { withFileTypes: true });
|
await acquire();
|
||||||
|
try {
|
||||||
for (const entry of entries) {
|
entries = await fsPromises.readdir(dirPath, { withFileTypes: true });
|
||||||
// Debug: log all entries including hidden files
|
} finally {
|
||||||
|
release();
|
||||||
|
|
||||||
// Skip heavy build directories and VCS directories
|
|
||||||
if (entry.name === 'node_modules' ||
|
|
||||||
entry.name === 'dist' ||
|
|
||||||
entry.name === 'build' ||
|
|
||||||
entry.name === '.git' ||
|
|
||||||
entry.name === '.svn' ||
|
|
||||||
entry.name === '.hg') continue;
|
|
||||||
|
|
||||||
const itemPath = path.join(dirPath, entry.name);
|
|
||||||
const item = {
|
|
||||||
name: entry.name,
|
|
||||||
path: itemPath,
|
|
||||||
type: entry.isDirectory() ? 'directory' : 'file'
|
|
||||||
};
|
|
||||||
|
|
||||||
// Get file stats for additional metadata
|
|
||||||
try {
|
|
||||||
const stats = await fsPromises.stat(itemPath);
|
|
||||||
item.size = stats.size;
|
|
||||||
item.modified = stats.mtime.toISOString();
|
|
||||||
|
|
||||||
// Convert permissions to rwx format
|
|
||||||
const mode = stats.mode;
|
|
||||||
const ownerPerm = (mode >> 6) & 7;
|
|
||||||
const groupPerm = (mode >> 3) & 7;
|
|
||||||
const otherPerm = mode & 7;
|
|
||||||
item.permissions = ((mode >> 6) & 7).toString() + ((mode >> 3) & 7).toString() + (mode & 7).toString();
|
|
||||||
item.permissionsRwx = permToRwx(ownerPerm) + permToRwx(groupPerm) + permToRwx(otherPerm);
|
|
||||||
} catch (statError) {
|
|
||||||
// If stat fails, provide default values
|
|
||||||
item.size = 0;
|
|
||||||
item.modified = null;
|
|
||||||
item.permissions = '000';
|
|
||||||
item.permissionsRwx = '---------';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (entry.isDirectory() && currentDepth < maxDepth) {
|
|
||||||
// Recursively get subdirectories but limit depth
|
|
||||||
try {
|
|
||||||
// Check if we can access the directory before trying to read it
|
|
||||||
await fsPromises.access(item.path, fs.constants.R_OK);
|
|
||||||
item.children = await getFileTree(item.path, maxDepth, currentDepth + 1, showHidden);
|
|
||||||
} catch (e) {
|
|
||||||
// Silently skip directories we can't access (permission denied, etc.)
|
|
||||||
item.children = [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
items.push(item);
|
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
// Only log non-permission errors to avoid spam
|
// Only log non-permission errors to avoid spam
|
||||||
if (error.code !== 'EACCES' && error.code !== 'EPERM') {
|
if (error.code !== 'EACCES' && error.code !== 'EPERM') {
|
||||||
console.error('Error reading directory:', error);
|
console.error('Error reading directory:', error);
|
||||||
}
|
}
|
||||||
|
return [];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const filteredEntries = entries.filter((entry) => !(entry.isDirectory() && IGNORED_DIRS.has(entry.name)));
|
||||||
|
|
||||||
|
// Process every entry in parallel. On high-latency filesystems (NFS/SMB)
|
||||||
|
// serial stat() was the real bottleneck — issuing them concurrently lets
|
||||||
|
// the kernel pipeline the round-trips and the recursive calls overlap too.
|
||||||
|
const items = await Promise.all(filteredEntries.map(async (entry) => {
|
||||||
|
const itemPath = path.join(dirPath, entry.name);
|
||||||
|
const item = {
|
||||||
|
name: entry.name,
|
||||||
|
path: itemPath,
|
||||||
|
type: entry.isDirectory() ? 'directory' : 'file'
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get file stats for additional metadata
|
||||||
|
try {
|
||||||
|
await acquire();
|
||||||
|
try {
|
||||||
|
const stats = await fsPromises.lstat(itemPath);
|
||||||
|
item.size = stats.size;
|
||||||
|
item.modified = stats.mtime.toISOString();
|
||||||
|
|
||||||
|
// Mark symlinks so UI can distinguish them
|
||||||
|
if (stats.isSymbolicLink()) {
|
||||||
|
item.isSymlink = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Convert permissions to rwx format
|
||||||
|
const mode = stats.mode;
|
||||||
|
const ownerPerm = (mode >> 6) & 7;
|
||||||
|
const groupPerm = (mode >> 3) & 7;
|
||||||
|
const otherPerm = mode & 7;
|
||||||
|
item.permissions =
|
||||||
|
((mode >> 6) & 7).toString() +
|
||||||
|
((mode >> 3) & 7).toString() +
|
||||||
|
(mode & 7).toString();
|
||||||
|
item.permissionsRwx =
|
||||||
|
permToRwx(ownerPerm) +
|
||||||
|
permToRwx(groupPerm) +
|
||||||
|
permToRwx(otherPerm);
|
||||||
|
} finally {
|
||||||
|
release();
|
||||||
|
}
|
||||||
|
} catch (statError) {
|
||||||
|
// If stat fails, provide default values
|
||||||
|
item.size = 0;
|
||||||
|
item.modified = null;
|
||||||
|
item.permissions = '000';
|
||||||
|
item.permissionsRwx = '---------';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (entry.isDirectory() && currentDepth < maxDepth) {
|
||||||
|
// Recurse. Let readdir's own EACCES bubble up through the catch in
|
||||||
|
// the recursive call rather than doing a separate access() probe
|
||||||
|
// (which doubled the round-trip count on SMB without adding info).
|
||||||
|
// The recursive call starts with a bounded readdir; holding a permit
|
||||||
|
// for the whole subtree can deadlock when sibling directories are
|
||||||
|
// waiting on their own children.
|
||||||
|
item.children = await getFileTree(itemPath, maxDepth, currentDepth + 1, showHidden);
|
||||||
|
}
|
||||||
|
|
||||||
|
return item;
|
||||||
|
}));
|
||||||
|
|
||||||
return items.sort((a, b) => {
|
return items.sort((a, b) => {
|
||||||
if (a.type !== b.type) {
|
if (a.type !== b.type) {
|
||||||
return a.type === 'directory' ? -1 : 1;
|
return a.type === 'directory' ? -1 : 1;
|
||||||
|
|||||||
@@ -31,6 +31,24 @@ export function createWebSocketServer(
|
|||||||
});
|
});
|
||||||
|
|
||||||
wss.on('connection', (ws, request) => {
|
wss.on('connection', (ws, request) => {
|
||||||
|
// Keep WebSocket alive across reverse-proxy idle timeouts (Cloudflare ~100s,
|
||||||
|
// AWS ALB 60s, nginx 60s, etc.). Without app-level pings these connections
|
||||||
|
// are silently torn down even when the UI is active, causing repeated
|
||||||
|
// reconnect cycles. ws library heartbeat is opt-in.
|
||||||
|
const HEARTBEAT_INTERVAL_MS = 30_000;
|
||||||
|
const heartbeat = setInterval(() => {
|
||||||
|
if (ws.readyState === ws.OPEN) {
|
||||||
|
try {
|
||||||
|
ws.ping();
|
||||||
|
} catch {
|
||||||
|
// socket may have been closed concurrently — interval will be cleared below
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, HEARTBEAT_INTERVAL_MS);
|
||||||
|
const stopHeartbeat = () => clearInterval(heartbeat);
|
||||||
|
ws.on('close', stopHeartbeat);
|
||||||
|
ws.on('error', stopHeartbeat);
|
||||||
|
|
||||||
const incomingRequest = request as AuthenticatedWebSocketRequest;
|
const incomingRequest = request as AuthenticatedWebSocketRequest;
|
||||||
const url = incomingRequest.url ?? '/';
|
const url = incomingRequest.url ?? '/';
|
||||||
const pathname = new URL(url, 'http://localhost').pathname;
|
const pathname = new URL(url, 'http://localhost').pathname;
|
||||||
|
|||||||
@@ -295,6 +295,7 @@ export default function ChatComposer({
|
|||||||
|
|
||||||
<PromptInputTextarea
|
<PromptInputTextarea
|
||||||
ref={textareaRef}
|
ref={textareaRef}
|
||||||
|
dir="auto"
|
||||||
value={input}
|
value={input}
|
||||||
onChange={onInputChange}
|
onChange={onInputChange}
|
||||||
onClick={onTextareaClick}
|
onClick={onTextareaClick}
|
||||||
|
|||||||
@@ -120,7 +120,7 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, o
|
|||||||
/* User message bubble on the right */
|
/* User message bubble on the right */
|
||||||
<div className="flex w-full items-end space-x-0 sm:w-auto sm:max-w-[85%] sm:space-x-3 md:max-w-md lg:max-w-lg xl:max-w-xl">
|
<div className="flex w-full items-end space-x-0 sm:w-auto sm:max-w-[85%] sm:space-x-3 md:max-w-md lg:max-w-lg xl:max-w-xl">
|
||||||
<div className="group flex-1 rounded-2xl rounded-br-md bg-blue-600 px-3 py-2 text-white shadow-sm sm:flex-initial sm:px-4">
|
<div className="group flex-1 rounded-2xl rounded-br-md bg-blue-600 px-3 py-2 text-white shadow-sm sm:flex-initial sm:px-4">
|
||||||
<div className="whitespace-pre-wrap break-words text-sm">
|
<div dir="auto" className="whitespace-pre-wrap break-words text-sm">
|
||||||
{message.content}
|
{message.content}
|
||||||
</div>
|
</div>
|
||||||
{message.images && message.images.length > 0 && (
|
{message.images && message.images.length > 0 && (
|
||||||
@@ -405,7 +405,7 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, o
|
|||||||
</ReasoningContent>
|
</ReasoningContent>
|
||||||
</Reasoning>
|
</Reasoning>
|
||||||
) : (
|
) : (
|
||||||
<div className="text-sm text-gray-700 dark:text-gray-300">
|
<div dir="auto" className="text-sm text-gray-700 dark:text-gray-300">
|
||||||
{/* Reasoning accordion */}
|
{/* Reasoning accordion */}
|
||||||
{showThinking && message.reasoning && (
|
{showThinking && message.reasoning && (
|
||||||
<Reasoning className="mb-3" defaultOpen={false}>
|
<Reasoning className="mb-3" defaultOpen={false}>
|
||||||
|
|||||||
@@ -1,4 +1,6 @@
|
|||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
|
import DOMPurify from 'dompurify';
|
||||||
|
|
||||||
import { authenticatedFetch } from '../../../utils/api';
|
import { authenticatedFetch } from '../../../utils/api';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
@@ -10,6 +12,48 @@ type Props = {
|
|||||||
// Module-level cache so repeated renders don't re-fetch
|
// Module-level cache so repeated renders don't re-fetch
|
||||||
const svgCache = new Map<string, string>();
|
const svgCache = new Map<string, string>();
|
||||||
|
|
||||||
|
const FORBIDDEN_SVG_TAGS = [
|
||||||
|
'script',
|
||||||
|
'foreignObject',
|
||||||
|
'iframe',
|
||||||
|
'object',
|
||||||
|
'embed',
|
||||||
|
'link',
|
||||||
|
'meta',
|
||||||
|
'style',
|
||||||
|
'animate',
|
||||||
|
'set',
|
||||||
|
'animateTransform',
|
||||||
|
'animateMotion',
|
||||||
|
];
|
||||||
|
|
||||||
|
const FORBIDDEN_SVG_ATTRS = [
|
||||||
|
'href',
|
||||||
|
'xlink:href',
|
||||||
|
'src',
|
||||||
|
'style',
|
||||||
|
];
|
||||||
|
|
||||||
|
function sanitizeSvg(svgText: string): string | null {
|
||||||
|
const sanitized = DOMPurify.sanitize(svgText, {
|
||||||
|
USE_PROFILES: { svg: true, svgFilters: true },
|
||||||
|
FORBID_TAGS: FORBIDDEN_SVG_TAGS,
|
||||||
|
FORBID_ATTR: FORBIDDEN_SVG_ATTRS,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!sanitized) return null;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const doc = new DOMParser().parseFromString(sanitized, 'image/svg+xml');
|
||||||
|
const root = doc.documentElement;
|
||||||
|
if (!root || root.nodeName.toLowerCase() !== 'svg') return null;
|
||||||
|
if (doc.querySelector('parsererror')) return null;
|
||||||
|
return sanitized;
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default function PluginIcon({ pluginName, iconFile, className }: Props) {
|
export default function PluginIcon({ pluginName, iconFile, className }: Props) {
|
||||||
const url = iconFile
|
const url = iconFile
|
||||||
? `/api/plugins/${encodeURIComponent(pluginName)}/assets/${encodeURIComponent(iconFile)}`
|
? `/api/plugins/${encodeURIComponent(pluginName)}/assets/${encodeURIComponent(iconFile)}`
|
||||||
@@ -24,9 +68,11 @@ export default function PluginIcon({ pluginName, iconFile, className }: Props) {
|
|||||||
return r.text();
|
return r.text();
|
||||||
})
|
})
|
||||||
.then((text) => {
|
.then((text) => {
|
||||||
if (text && text.trimStart().startsWith('<svg')) {
|
if (!text) return;
|
||||||
svgCache.set(url, text);
|
const sanitized = sanitizeSvg(text);
|
||||||
setSvg(text);
|
if (sanitized) {
|
||||||
|
svgCache.set(url, sanitized);
|
||||||
|
setSvg(sanitized);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch(() => {});
|
.catch(() => {});
|
||||||
@@ -35,10 +81,6 @@ export default function PluginIcon({ pluginName, iconFile, className }: Props) {
|
|||||||
if (!svg) return <span className={className} />;
|
if (!svg) return <span className={className} />;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<span
|
<span className={className} dangerouslySetInnerHTML={{ __html: svg }} />
|
||||||
className={className}
|
|
||||||
// SVG is fetched from the user's own installed plugin — same trust level as the plugin code itself
|
|
||||||
dangerouslySetInnerHTML={{ __html: svg }}
|
|
||||||
/>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -36,8 +36,12 @@ const useWebSocketProviderState = (): WebSocketContextType => {
|
|||||||
const { token } = useAuth();
|
const { token } = useAuth();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
// The cleanup below sets unmountedRef = true. Without this reset, every
|
||||||
|
// re-run of the effect (e.g. on token refresh) would short-circuit connect()
|
||||||
|
// at its unmounted guard and leave the socket permanently disconnected.
|
||||||
|
unmountedRef.current = false;
|
||||||
connect();
|
connect();
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
unmountedRef.current = true;
|
unmountedRef.current = true;
|
||||||
if (reconnectTimeoutRef.current) {
|
if (reconnectTimeoutRef.current) {
|
||||||
|
|||||||
@@ -37,6 +37,10 @@ export default defineConfig(({ mode }) => {
|
|||||||
'/shell': {
|
'/shell': {
|
||||||
target: `ws://${proxyHost}:${serverPort}`,
|
target: `ws://${proxyHost}:${serverPort}`,
|
||||||
ws: true
|
ws: true
|
||||||
|
},
|
||||||
|
'/plugin-ws': {
|
||||||
|
target: `ws://${proxyHost}:${serverPort}`,
|
||||||
|
ws: true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user