- {modelInfo.logoPath && (
- 
)}
{message.agent}
@@ -591,16 +602,16 @@ function MessageItem({ message, itemId, isHighlighted, getAgentModelInfo }) {
>
- {modelInfo.logoPath && message.agent !== 'Memory' && (
-
)}
{title}
diff --git a/frontend/src/components/LobeModelLogo.jsx b/frontend/src/components/LobeModelLogo.jsx
new file mode 100644
index 0000000..7879319
--- /dev/null
+++ b/frontend/src/components/LobeModelLogo.jsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import ModelIcon from '@lobehub/icons/es/features/ModelIcon';
+import ProviderIcon from '@lobehub/icons/es/features/ProviderIcon';
+
+export default function LobeModelLogo({
+ model,
+ provider,
+ fallbackSrc = null,
+ alt = '',
+ size = 28,
+ shape = 'square',
+ type = 'color',
+ style = {},
+ className = '',
+}) {
+ const hasModel = typeof model === 'string' && model.trim().length > 0;
+ const hasProvider = typeof provider === 'string' && provider.trim().length > 0;
+
+ try {
+ if (hasModel) {
+ return (
+ 
+ );
+ }
+
+ return (
+
+ );
+}
diff --git a/frontend/src/components/OpenClawStatus.jsx b/frontend/src/components/OpenClawStatus.jsx
index 5d92a9c..51133df 100644
--- a/frontend/src/components/OpenClawStatus.jsx
+++ b/frontend/src/components/OpenClawStatus.jsx
@@ -1,4 +1,7 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { createAvatar } from "@dicebear/core";
+import { lorelei } from "@dicebear/collection";
+import ModelIcon from "@lobehub/icons/es/features/ModelIcon";
import { useOpenClawStore } from "../store/openclawStore";
import { useOpenClawPanel } from "../hooks/useOpenClawPanel";
@@ -23,6 +26,8 @@ const AGENT_COLORS = [
{ accent: "#84CC16" },
];
+const OPENCLAW_EXPANDED_PANEL_MAX_HEIGHT = 420;
+
function getAgentColor(agentId) {
let hash = 0;
for (let i = 0; i < (agentId || "").length; i++) {
@@ -45,21 +50,79 @@ function agentStateFromPresence(presence, agentId) {
function AvatarIcon({ agentId, size = 56, borderRadius = 14 }) {
const color = getAgentColor(agentId);
+ const avatarUri = useMemo(() => {
+ const seed = String(agentId || "unknown");
+ return createAvatar(lorelei, {
+ seed,
+ size: Math.max(64, size * 2),
+ backgroundColor: ["d1d4f9", "ffd5dc", "c0f0d1", "ffe7b8", "cde9ff"],
+ radius: 18,
+ }).toDataUri();
+ }, [agentId, size]);
+
return (
- {agentId?.slice(0, 2).toUpperCase() || "??"}
+ 
+
+ );
+}
+
+function parseAgentIdFromSessionKey(sessionKey) {
+ const raw = String(sessionKey || "").trim();
+ const parts = raw.split(":");
+ if (parts.length >= 3 && parts[0] === "agent") {
+ return parts[1];
+ }
+ return "";
+}
+
+function formatSessionTitle(session) {
+ const key = session?.key || session?.sessionKey || "";
+ if (session?.label) return session.label;
+ if (!key) return "未命名会话";
+ const parts = key.split(":");
+ return parts.slice(2).join(":") || key;
+}
+
+function ModelGlyph({ model, size = 22 }) {
+ if (!model) {
+ return (
+
+ );
+ }
+
+ return (
+
+
);
}
@@ -130,10 +193,13 @@ function AgentDetail({ agent, presence, skills }) {
const { workspaceFiles, workspaceFilesLoading, workspaceFilesError, workspaceFileContent } = useOpenClawStore();
const { requestWorkspaceFiles, requestWorkspaceFile } = useOpenClawPanel();
const [selectedDoc, setSelectedDoc] = useState(null);
+ const [skillsExpanded, setSkillsExpanded] = useState(false);
+ const [docsExpanded, setDocsExpanded] = useState(false);
- // Always use "main" as the workspace key since that's the only valid OpenClaw agent ID
- const workspace = agent?.id || "main";
- const rawFiles = workspaceFiles[workspace]?.files || [];
+ const workspaceAgentId =
+ typeof agent?.id === "string" && agent.id.trim() ? agent.id.trim() : "main";
+ const workspacePayload = workspaceFiles[workspaceAgentId] || null;
+ const rawFiles = workspacePayload?.files || [];
// Normalize file props: API returns uppercase (Name, Size, Path, Preview, PreviewTruncated)
const files = rawFiles.map(f => ({
name: f.Name || f.name,
@@ -141,16 +207,31 @@ function AgentDetail({ agent, presence, skills }) {
path: f.Path || f.path,
preview: f.Preview || f.preview,
previewTruncated: f.PreviewTruncated || f.previewTruncated,
+ missing: Boolean(f.missing),
}));
- const isLoadingFiles = workspaceFilesLoading && !workspaceFiles[workspace];
+ const isLoadingFiles = workspaceFilesLoading && !workspacePayload;
+ const resolvedWorkspaceError = workspacePayload?.error || workspaceFilesError || null;
// Fetch workspace files when agent changes
useEffect(() => {
- if (workspace && !workspaceFiles[workspace]) {
- requestWorkspaceFiles(workspace);
+ if (workspaceAgentId && !workspaceFiles[workspaceAgentId]) {
+ requestWorkspaceFiles(workspaceAgentId);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [workspace]);
+ }, [workspaceAgentId]);
+
+ useEffect(() => {
+ if (!docsExpanded) {
+ return;
+ }
+ if (!selectedDoc && files.length > 0) {
+ const firstExisting = files.find((item) => !item.missing) || files[0];
+ setSelectedDoc(firstExisting);
+ if (firstExisting && !firstExisting.missing && !workspaceFileContent[`${workspaceAgentId}:${firstExisting.name}`]) {
+ requestWorkspaceFile(workspaceAgentId, firstExisting.name);
+ }
+ }
+ }, [docsExpanded, files, requestWorkspaceFile, selectedDoc, workspaceAgentId, workspaceFileContent]);
const agentId = agent.id || agent.name || "?";
const state = agentStateFromPresence(presence, agentId);
@@ -158,182 +239,192 @@ function AgentDetail({ agent, presence, skills }) {
const color = getAgentColor(agentId);
// Skills are global in OpenClaw — show all skills (not filtered per-agent)
+ const skillFilter = Array.isArray(agent?.skills) ? agent.skills : null;
+ const availableSkills = skills.filter((s) => {
+ const hasMissing = s.missing && (s.missing.bins?.length || s.missing.env?.length || s.missing.config?.length);
+ const allowedByAgent =
+ skillFilter === null ? true : skillFilter.includes(s.name);
+ return s.eligible !== false && s.disabled !== true && !hasMissing && allowedByAgent;
+ });
return (
- {/* Header */}
-
-
-
- {/* Skills + Documents: left-right layout */}
-
-
-
- {agent.name || agentId}
- {agentId}
-
-
- {stateInfo.label}
-
-
-
-
-
- 模型
-
- {agent.model || "—"}
-
-
- {/* Left: Skills */}
-
- {(() => {
- const available = skills.filter(s => {
- const hasMissing = s.missing && (s.missing.bins?.length || s.missing.env?.length || s.missing.config?.length);
- return s.eligible !== false && s.disabled !== true && !hasMissing;
- });
- return available.length > 0 && (
-
-
- {/* Right: Documents */}
-
-
- );
- })()}
-
-
-
-
- 可用技能
-
- 已就绪: {available.length}
-
-
- {available.map((skill, i) => (
-
-
- {workspace && (
-
-
-
-
-
- 工作区文档
-
- {files.length} 个文件
-
-
- {isLoadingFiles ? (
-
@@ -345,49 +436,172 @@ export function OpenClawStatus() {
const store = useOpenClawStore();
const {
requestStatus,
+ requestSessions,
+ requestSessionDetail,
+ requestSessionHistory,
requestAgents,
requestAgentsPresence,
requestSkills,
+ createSession,
+ subscribeSession,
+ unsubscribeSession,
+ resetSession,
+ deleteSession,
+ sendSessionMessage,
} = useOpenClawPanel();
const [selectedAgentId, setSelectedAgentId] = useState(
() => store.agents[0]?.id || store.agents[0]?.name || null
);
+ const [autoCreatedAgentId, setAutoCreatedAgentId] = useState(null);
+ const [isSessionPickerOpen, setIsSessionPickerOpen] = useState(false);
+ const chatScrollRef = useRef(null);
// Fetch data only if store is empty (on mount / page refresh)
useEffect(() => {
- if (!store.agents.length) requestAgents();
- if (!store.skills.length) requestSkills();
+ requestAgents();
+ requestSessions();
if (!store.openclawStatus) requestStatus();
requestAgentsPresence();
}, []);
+ useEffect(() => {
+ const refreshAgents = () => {
+ requestAgents();
+ requestAgentsPresence();
+ };
+
+ const intervalId = window.setInterval(() => {
+ refreshAgents();
+ }, 15000);
+
+ const handleFocus = () => {
+ refreshAgents();
+ };
+
+ window.addEventListener('focus', handleFocus);
+ return () => {
+ window.clearInterval(intervalId);
+ window.removeEventListener('focus', handleFocus);
+ };
+ }, [requestAgents, requestAgentsPresence]);
+
+ useEffect(() => {
+ const intervalId = window.setInterval(() => {
+ const agentId = selectedAgentId || null;
+ requestSkills(agentId);
+ }, 15000);
+
+ const handleFocus = () => {
+ const agentId = selectedAgentId || null;
+ requestSkills(agentId);
+ };
+
+ window.addEventListener('focus', handleFocus);
+ return () => {
+ window.clearInterval(intervalId);
+ window.removeEventListener('focus', handleFocus);
+ };
+ }, [requestSkills, selectedAgentId]);
+
const status = store.openclawStatus;
const agents = store.agents;
const presence = store.agentsPresence?.agents || {};
const skills = store.skills || [];
+ const selectedSessionKey = store.selectedSessionKey;
+ const chatMessagesBySession = store.openclawChatMessagesBySession || {};
+ const chatDraftBySession = store.openclawChatDraftBySession || {};
+ const sessionSubscriptions = store.openclawSessionSubscriptions || {};
const selectedAgent = agents.find(a => (a.id || a.name) === selectedAgentId) || agents[0] || null;
+ const filteredSessions = useMemo(() => {
+ const agentId = selectedAgent?.id || selectedAgent?.name || "";
+ if (!agentId) return store.openclawSessions || [];
+ return (store.openclawSessions || []).filter((session) => {
+ const sessionAgentId = session?.agentId || parseAgentIdFromSessionKey(session?.key || session?.sessionKey);
+ return sessionAgentId === agentId;
+ });
+ }, [selectedAgent, store.openclawSessions]);
+ const selectedSession = useMemo(
+ () => filteredSessions.find((session) => (session.key || session.sessionKey) === selectedSessionKey) || filteredSessions[0] || null,
+ [filteredSessions, selectedSessionKey],
+ );
+ const selectedMessages = selectedSessionKey ? (chatMessagesBySession[selectedSessionKey] || []) : [];
// Auto-select first agent when agents load
useEffect(() => {
if (!selectedAgentId && agents.length > 0) {
setSelectedAgentId(agents[0].id || agents[0].name);
}
+ if (selectedAgentId && agents.length > 0) {
+ const exists = agents.some((agent) => (agent.id || agent.name) === selectedAgentId);
+ if (!exists) {
+ setSelectedAgentId(agents[0].id || agents[0].name);
+ }
+ }
}, [agents, selectedAgentId]);
+ useEffect(() => {
+ if (!selectedAgentId) {
+ return;
+ }
+ requestSkills(selectedAgentId);
+ }, [requestSkills, selectedAgentId]);
+
+ useEffect(() => {
+ const agentId = selectedAgent?.id || selectedAgent?.name || null;
+ if (!agentId || filteredSessions.length > 0 || autoCreatedAgentId === agentId) {
+ return;
+ }
+ createSession({ agentId, label: "dashboard" });
+ setAutoCreatedAgentId(agentId);
+ }, [autoCreatedAgentId, createSession, filteredSessions.length, selectedAgent]);
+
+ useEffect(() => {
+ if (!selectedSessionKey && filteredSessions.length > 0) {
+ const preferredSession =
+ filteredSessions.find((session) => {
+ const key = String(session.key || session.sessionKey || '').trim().toLowerCase();
+ return key === 'agent:main:main' || key.endsWith(':main');
+ }) || filteredSessions[0];
+ store.setSelectedSessionKey(preferredSession.key || preferredSession.sessionKey);
+ }
+ }, [filteredSessions, selectedSessionKey, store]);
+
+ useEffect(() => {
+ setIsSessionPickerOpen(false);
+ }, [selectedSessionKey]);
+
+ useEffect(() => {
+ if (!selectedSessionKey) return undefined;
+ requestSessionDetail(selectedSessionKey);
+ requestSessionHistory(selectedSessionKey, 30);
+ subscribeSession(selectedSessionKey);
+ return () => {
+ unsubscribeSession(selectedSessionKey);
+ };
+ }, [requestSessionDetail, requestSessionHistory, selectedSessionKey, subscribeSession, unsubscribeSession]);
+
+ useEffect(() => {
+ if (!chatScrollRef.current) {
+ return;
+ }
+ chatScrollRef.current.scrollTop = chatScrollRef.current.scrollHeight;
+ }, [selectedMessages, selectedSessionKey]);
+
return (
加载中…
- ) : workspaceFilesError ? (
- 加载失败
- ) : files.length === 0 ? (
- 暂无文档
- ) : (
- files.map((f) => (
-
- ))
- )}
+
+
+
+
+
+ {skillsExpanded ? (
+
+
+
+ 技能
+
+ 当前 agent: {availableSkills.length}
+ {availableSkills.length === 0 ? (
+
+ ) : (
+ 暂无技能
+ ) : (
+ availableSkills.map((skill, i) => (
+ 默认折叠，点击展开查看技能详情
+ )}
+
+
+
+ {docsExpanded ? (
+
+
+
+ 工作区文档
+
+ {files.length} 个文件
+
+
+ {isLoadingFiles ? (
+
+ ) : (
+ 加载中…
+ ) : resolvedWorkspaceError ? (
+
+ 加载失败: {String(resolvedWorkspaceError).slice(0, 80)}
+
+ ) : files.length === 0 ? (
+ 暂无文档
+ ) : (
+ <>
+
+ {files.map((f) => {
+ const isActive = selectedDoc?.name === f.name;
+ return (
+
+ );
+ })}
+
+
+
+ {selectedDoc
+ ? (selectedDoc.missing
+ ? "(文件不存在)"
+ : (workspaceFileContent[`${workspaceAgentId}:${selectedDoc.name}`] || selectedDoc.preview || "(内容加载中...)"))
+ : "请选择一个工作区文件"}
+
+
+ )}
+ 默认折叠，点击展开查看工作区文档
)}
{/* Header */}
-
+
OpenClaw Agent 状态
@@ -401,9 +615,9 @@ export function OpenClawStatus() {
display: "grid",
gridTemplateColumns: agents.length > 0 ? "120px minmax(0, 1fr)" : "1fr",
gap: 16,
- alignItems: "stretch",
- minHeight: 0,
- overflow: "hidden",
+ alignItems: "start",
+ minHeight: "auto",
+ overflow: "visible",
}}>
{/* Left: agent avatar list */}
{agents.length > 0 && (
@@ -412,11 +626,11 @@ export function OpenClawStatus() {
borderRadius: 14,
background: "#FFFFFF",
boxShadow: "0 10px 24px rgba(15, 23, 42, 0.06)",
- padding: 12,
+ padding: 10,
display: "grid",
- gap: 10,
- minHeight: 0,
- overflowY: "auto",
+ gap: 12,
+ minHeight: "auto",
+ overflow: "visible",
alignContent: "start",
}}>
{agents.map((agent) => {
@@ -428,23 +642,22 @@ export function OpenClawStatus() {
return (