romtuck/openclaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: apply automatic formatting to mtui

Browse Source
This commit is contained in:
Vj 2026-01-30 06:19:59 +00:00
parent 6fbe8b2b46
commit bef17ac640
8 changed files with 215 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/mtui/App.tsx
View File

@ -19,25 +19,27 @@ const ChatApp: React.FC<{ options: TuiOptions }> = ({ options }) => {
const { exit } = useApp();
const gateway = useGateway();
const { showThinking, setShowThinking } = useSettings();
const [connectionStatus, setConnectionStatus] = useState<"connecting" | "connected" | "disconnected">("connecting");
const [connectionStatus, setConnectionStatus] = useState<
"connecting" | "connected" | "disconnected"
>("connecting");
const [error, setError] = useState<string | null>(null);
const [overlay, setOverlay] = useState<{ type: "model" | "agent"; items: any[] } | null>(null);
const {
messages,
status,
sendMessage,
addMessage,
sessionInfo,
sessionKey,
const {
messages,
status,
sendMessage,
addMessage,
sessionInfo,
sessionKey,
refreshSessionInfo,
loadHistory
loadHistory,
} = useChat(options.session || "main");
const { handleLocalShell, handleSlashCommand } = useCommands(
sessionKey,
addMessage,
refreshSessionInfo
sessionKey,
addMessage,
refreshSessionInfo,
);
useEffect(() => {
@ -65,9 +67,12 @@ const ChatApp: React.FC<{ options: TuiOptions }> = ({ options }) => {
} else if (value.startsWith("/")) {
if (value === "/model") {
const models = await gateway.listModels();
setOverlay({
type: "model",
items: models.map(m => ({ label: `${m.provider}/${m.id}`, value: `${m.provider}/${m.id}` }))
setOverlay({
type: "model",
items: models.map((m) => ({
label: `${m.provider}/${m.id}`,
value: `${m.provider}/${m.id}`,
})),
});
} else {
await handleSlashCommand(value);
@ -93,31 +98,48 @@ const ChatApp: React.FC<{ options: TuiOptions }> = ({ options }) => {
total: sessionInfo.totalTokens,
context: sessionInfo.contextTokens,
remaining: (sessionInfo.contextTokens ?? 0) - (sessionInfo.totalTokens ?? 0),
percent: sessionInfo.totalTokens && sessionInfo.contextTokens ? (sessionInfo.totalTokens / sessionInfo.contextTokens) * 100 : null
percent:
sessionInfo.totalTokens && sessionInfo.contextTokens
? (sessionInfo.totalTokens / sessionInfo.contextTokens) * 100
: null,
});
return (
<Box flexDirection="column" padding={1} minHeight={20}>
<Box borderStyle="round" borderColor="cyan" paddingX={1} marginBottom={1}>
<Text bold color="white">Moltbot MTUI</Text>
<Text bold color="white">
Moltbot MTUI
</Text>
<Box flexGrow={1} />
<Box paddingX={2}>
<Text dimColor>{sessionInfo.model || "no model"}</Text>
</Box>
<Text color={connectionStatus === "connected" ? "green" : connectionStatus === "connecting" ? "yellow" : "red"}>
<Text
color={
connectionStatus === "connected"
? "green"
: connectionStatus === "connecting"
? "yellow"
: "red"
}
>
{connectionStatus === "connecting" && <Spinner type="dots" />} {connectionStatus}
</Text>
</Box>
{overlay ? (
<Box flexGrow={1} justifyContent="center" alignItems="center">
<Selector
<Selector
title={`Select ${overlay.type}`}
items={overlay.items}
onSelect={async (item) => {
if (overlay.type === "model") {
await gateway.patchSession({ key: sessionKey, model: item.value });
addMessage({ id: Math.random().toString(), role: "system", content: `Model set to ${item.value}` });
addMessage({
id: Math.random().toString(),
role: "system",
content: `Model set to ${item.value}`,
});
await refreshSessionInfo();
}
setOverlay(null);
@ -137,7 +159,9 @@ const ChatApp: React.FC<{ options: TuiOptions }> = ({ options }) => {
{status === "running" && !overlay && (
<Box paddingX={1} marginBottom={1}>
<Text color="yellow"><Spinner type="dots" /> Assistant is thinking...</Text>
<Text color="yellow">
<Spinner type="dots" /> Assistant is thinking...
</Text>
</Box>
)}
@ -154,7 +178,7 @@ const ChatApp: React.FC<{ options: TuiOptions }> = ({ options }) => {
</Box>
<InputBar onSubmit={handleSubmit} status={status} />
<Box paddingX={1} marginTop={1}>
<Text dimColor>Ctrl+C exit | Ctrl+T think | /model | /reset | !ls</Text>
</Box>

4
src/mtui/components/InputBar.tsx
View File

@ -19,7 +19,9 @@ export const InputBar: React.FC<InputBarProps> = ({ onSubmit, status }) => {
return (
<Box flexDirection="column">
<Box paddingX={1} borderStyle="single" borderColor={status === "idle" ? "cyan" : "yellow"}>
<Text bold color="cyan">moltbot {">"} </Text>
<Text bold color="cyan">
moltbot {">"}{" "}
</Text>
<TextInput
value={value}
onChange={setValue}

24
src/mtui/components/MessageView.tsx
View File

@ -30,25 +30,37 @@ export const MessageView: React.FC<MessageViewProps> = ({ message }) => {
</Box>
{showThinking && (
<Box paddingLeft={2} borderStyle="single" borderColor="gray">
<Text italic dimColor>{message.thinking}</Text>
<Text italic dimColor>
{message.thinking}
</Text>
</Box>
)}
</Box>
)}
{renderContent(message.content)}
{message.tools && message.tools.length > 0 && (
<Box flexDirection="column" marginTop={1}>
{message.tools.map((tool) => (
<Box key={tool.id} flexDirection="column" borderStyle="round" borderColor="gray" paddingX={1} marginBottom={1}>
<Text bold color="cyan">Tool: {tool.name}</Text>
<Box
key={tool.id}
flexDirection="column"
borderStyle="round"
borderColor="gray"
paddingX={1}
marginBottom={1}
>
<Text bold color="cyan">
Tool: {tool.name}
</Text>
<Text dimColor>Args: {JSON.stringify(tool.args)}</Text>
{tool.isStreaming && <Text color="yellow">Running...</Text>}
{tool.result && (
<Box marginTop={1}>
<Text color={tool.isError ? "red" : "gray"}>
Result: {typeof tool.result === "string" ? tool.result : JSON.stringify(tool.result)}
Result:{" "}
{typeof tool.result === "string" ? tool.result : JSON.stringify(tool.result)}
</Text>
</Box>
)}

11
src/mtui/components/Selector.tsx
View File

@ -17,9 +17,10 @@ type SelectorProps = {
export const Selector: React.FC<SelectorProps> = ({ title, items, onSelect, onCancel }) => {
const [query, setQuery] = useState("");
const filteredItems = items.filter(item =>
item.label.toLowerCase().includes(query.toLowerCase()) ||
item.value.toLowerCase().includes(query.toLowerCase())
const filteredItems = items.filter(
(item) =>
item.label.toLowerCase().includes(query.toLowerCase()) ||
item.value.toLowerCase().includes(query.toLowerCase()),
);
useInput((input, key) => {
@ -27,10 +28,10 @@ export const Selector: React.FC<SelectorProps> = ({ title, items, onSelect, onCa
onCancel();
}
if (!key.ctrl && !key.meta && input.length === 1 && !key.return) {
setQuery(q => q + input);
setQuery((q) => q + input);
}
if (key.backspace || key.delete) {
setQuery(q => q.slice(0, -1));
setQuery((q) => q.slice(0, -1));
}
});

13
src/mtui/context/GatewayContext.tsx
View File

@ -4,14 +4,13 @@ import type { TuiOptions } from "../../tui/tui-types.js";
const GatewayContext = createContext<GatewayChatClient | null>(null);
export const GatewayProvider: React.FC<{ options: TuiOptions; children: React.ReactNode }> = ({ options, children }) => {
export const GatewayProvider: React.FC<{ options: TuiOptions; children: React.ReactNode }> = ({
options,
children,
}) => {
const client = useMemo(() => new GatewayChatClient(options), [options]);
return (
<GatewayContext.Provider value={client}>
{children}
</GatewayContext.Provider>
);
return <GatewayContext.Provider value={client}>{children}</GatewayContext.Provider>;
};
export const useGateway = () => {

4
src/mtui/context/SettingsContext.tsx
View File

@ -14,7 +14,9 @@ export const SettingsProvider: React.FC<{ children: React.ReactNode }> = ({ chil
const [toolsExpanded, setToolsExpanded] = useState(false);
return (
<SettingsContext.Provider value={{ showThinking, setShowThinking, toolsExpanded, setToolsExpanded }}>
<SettingsContext.Provider
value={{ showThinking, setShowThinking, toolsExpanded, setToolsExpanded }}
>
{children}
</SettingsContext.Provider>
);

104
src/mtui/hooks/useChat.ts
View File

@ -32,7 +32,7 @@ export const useChat = (initialSessionKey: string) => {
const refreshSessionInfo = useCallback(async () => {
try {
const statusRes = await gateway.getStatus() as any;
const statusRes = (await gateway.getStatus()) as any;
if (statusRes?.sessions?.recent) {
const current = statusRes.sessions.recent.find((s: any) => s.key === sessionKey);
if (current) {
@ -61,15 +61,23 @@ export const useChat = (initialSessionKey: string) => {
const last = prev[prev.length - 1];
if (last && last.id === payload.runId) {
return [
...prev.slice(0, -1),
{
...last,
content: last.content + (content || ""),
thinking: last.thinking + (thinking || "")
}
...prev.slice(0, -1),
{
...last,
content: last.content + (content || ""),
thinking: last.thinking + (thinking || ""),
},
];
}
return [...prev, { id: payload.runId, role: "assistant", content: content || "", thinking: thinking || "" }];
return [
...prev,
{
id: payload.runId,
role: "assistant",
content: content || "",
thinking: thinking || "",
},
];
});
setStatus("streaming");
} else if (payload.state === "final") {
@ -81,16 +89,25 @@ export const useChat = (initialSessionKey: string) => {
const last = prev[prev.length - 1];
if (last && last.id === payload.runId) {
return [
...prev.slice(0, -1),
{
...last,
content: content || last.content,
...prev.slice(0, -1),
{
...last,
content: content || last.content,
thinking: thinking || last.thinking,
isFinal: true
}
isFinal: true,
},
];
}
return [...prev, { id: payload.runId, role: "assistant", content: content || "", thinking: thinking || "", isFinal: true }];
return [
...prev,
{
id: payload.runId,
role: "assistant",
content: content || "",
thinking: thinking || "",
isFinal: true,
},
];
});
setActiveRunId(null);
setStatus("idle");
@ -105,22 +122,33 @@ export const useChat = (initialSessionKey: string) => {
if (payload.stream === "tool") {
const data = payload.data as any;
const { phase, toolCallId, name: toolName } = data;
setMessages((prev) => {
const last = prev[prev.length - 1];
if (!last || last.role !== "assistant") return prev;
const tools = last.tools || [];
let nextTools = [...tools];
if (phase === "start") {
nextTools.push({ id: toolCallId, name: toolName, args: data.args, isStreaming: true });
nextTools.push({
id: toolCallId,
name: toolName,
args: data.args,
isStreaming: true,
});
} else if (phase === "update") {
nextTools = nextTools.map(t => t.id === toolCallId ? { ...t, result: data.partialResult } : t);
nextTools = nextTools.map((t) =>
t.id === toolCallId ? { ...t, result: data.partialResult } : t,
);
} else if (phase === "result") {
nextTools = nextTools.map(t => t.id === toolCallId ? { ...t, result: data.result, isError: data.isError, isStreaming: false } : t);
nextTools = nextTools.map((t) =>
t.id === toolCallId
? { ...t, result: data.result, isError: data.isError, isStreaming: false }
: t,
);
}
return [...prev.slice(0, -1), { ...last, tools: nextTools }];
});
}
@ -136,14 +164,14 @@ export const useChat = (initialSessionKey: string) => {
const loadHistory = useCallback(async () => {
try {
const history = await gateway.loadHistory({ sessionKey, limit: 100 }) as any;
const history = (await gateway.loadHistory({ sessionKey, limit: 100 })) as any;
if (Array.isArray(history?.messages)) {
const msgs = history.messages.map((m: any) => ({
id: m.id || Math.random().toString(),
role: m.role,
content: extractContentFromMessage(m) || "",
thinking: extractThinkingFromMessage(m) || "",
isFinal: true
isFinal: true,
}));
setMessages(msgs);
}
@ -152,12 +180,26 @@ export const useChat = (initialSessionKey: string) => {
}
}, [gateway, sessionKey]);
const sendMessage = useCallback(async (text: string) => {
addMessage({ id: Math.random().toString(), role: "user", content: text });
setStatus("running");
const { runId } = await gateway.sendChat({ sessionKey, message: text });
setActiveRunId(runId);
}, [gateway, sessionKey, addMessage]);
const sendMessage = useCallback(
async (text: string) => {
addMessage({ id: Math.random().toString(), role: "user", content: text });
setStatus("running");
const { runId } = await gateway.sendChat({ sessionKey, message: text });
setActiveRunId(runId);
},
[gateway, sessionKey, addMessage],
);
return { messages, status, sendMessage, addMessage, sessionInfo, sessionKey, setSessionKey, refreshSessionInfo, loadHistory, activeRunId };
return {
messages,
status,
sendMessage,
addMessage,
sessionInfo,
sessionKey,
setSessionKey,
refreshSessionInfo,
loadHistory,
activeRunId,
};
};

96
src/mtui/hooks/useCommands.ts
View File

@ -6,49 +6,71 @@ import { spawn } from "node:child_process";
export const useCommands = (
sessionKey: string,
addMessage: (msg: Message) => void,
refreshSessionInfo: () => Promise<void>
refreshSessionInfo: () => Promise<void>,
) => {
const gateway = useGateway();
const handleLocalShell = useCallback(async (line: string) => {
const cmd = line.slice(1);
addMessage({ id: Math.random().toString(), role: "system", content: `[local] $ ${cmd}` });
return new Promise<void>((resolve) => {
const child = spawn(cmd, { shell: true });
let output = "";
child.stdout.on("data", (data) => { output += data.toString(); });
child.stderr.on("data", (data) => { output += data.toString(); });
child.on("close", (code) => {
addMessage({ id: Math.random().toString(), role: "system", content: output.trim() || `Exit code: ${code}` });
resolve();
const handleLocalShell = useCallback(
async (line: string) => {
const cmd = line.slice(1);
addMessage({ id: Math.random().toString(), role: "system", content: `[local] $ ${cmd}` });
return new Promise<void>((resolve) => {
const child = spawn(cmd, { shell: true });
let output = "";
child.stdout.on("data", (data) => {
output += data.toString();
});
child.stderr.on("data", (data) => {
output += data.toString();
});
child.on("close", (code) => {
addMessage({
id: Math.random().toString(),
role: "system",
content: output.trim() || `Exit code: ${code}`,
});
resolve();
});
});
});
}, [addMessage]);
},
[addMessage],
);
const handleSlashCommand = useCallback(async (text: string) => {
const parts = text.slice(1).split(" ");
const command = parts[0];
const args = parts.slice(1).join(" ");
const handleSlashCommand = useCallback(
async (text: string) => {
const parts = text.slice(1).split(" ");
const command = parts[0];
const args = parts.slice(1).join(" ");
switch (command) {
case "reset":
await gateway.resetSession(sessionKey);
addMessage({ id: Math.random().toString(), role: "system", content: "Session reset." });
break;
case "model":
if (args) {
await gateway.patchSession({ key: sessionKey, model: args });
addMessage({ id: Math.random().toString(), role: "system", content: `Model set to ${args}` });
await refreshSessionInfo();
}
break;
default:
addMessage({ id: Math.random().toString(), role: "system", content: `Unknown command: /${command}` });
}
}, [gateway, sessionKey, addMessage, refreshSessionInfo]);
switch (command) {
case "reset":
await gateway.resetSession(sessionKey);
addMessage({ id: Math.random().toString(), role: "system", content: "Session reset." });
break;
case "model":
if (args) {
await gateway.patchSession({ key: sessionKey, model: args });
addMessage({
id: Math.random().toString(),
role: "system",
content: `Model set to ${args}`,
});
await refreshSessionInfo();
}
break;
default:
addMessage({
id: Math.random().toString(),
role: "system",
content: `Unknown command: /${command}`,
});
}
},
[gateway, sessionKey, addMessage, refreshSessionInfo],
);
return { handleLocalShell, handleSlashCommand };
};