feat: refine workbench visuals and map controls

Unify the Agent history extension with the header acrylic surface, preserve the full conversation body, and consolidate shared control and status styling. Restore map flow and SCADA controller behavior, remove obsolete rendering paths, and extend regression coverage. Button press coverage now releases outside the target so state assertions cannot accidentally toggle the control.
2026-07-28 16:39:36 +08:00
parent ade88b4fbf
commit f4318a9b9c
96 changed files with 5480 additions and 1875 deletions
@@ -9,11 +9,11 @@ import {
 import {
  WORKBENCH_LAYOUT,
  clampAgentPanelWidth,
-  getAgentPanelMaxWidth,
-  getWorkbenchViewportLayout
+  getAgentPanelDefaultWidth,
+  getAgentPanelMaxWidth
 } from "../layout/workbench-layout";

-export function useAgentPanelResize(viewportWidth: number) {
+export function useAgentPanelResize(viewportWidth: number, conditionExpanded = false) {
  const panelRef = useRef<HTMLDivElement | null>(null);
  const resizeLeftRef = useRef(0);
  const cleanupRef = useRef<(() => void) | null>(null);
@@ -29,20 +29,24 @@ export function useAgentPanelResize(viewportWidth: number) {
      return;
    }

-    const nextWidth = clampAgentPanelWidth(widthRef.current, viewportWidth);
+    const nextWidth = clampAgentPanelWidth(widthRef.current, viewportWidth, conditionExpanded);
    widthRef.current = nextWidth;
    setWidth(nextWidth);
    setCommittedWidth(nextWidth);
-  }, [viewportWidth]);
+  }, [conditionExpanded, viewportWidth]);

-  const resize = useCallback((clientX: number) => {
-    const nextWidth = clampAgentPanelWidth(
-      clientX - resizeLeftRef.current,
-      window.innerWidth
-    );
-    widthRef.current = nextWidth;
-    setWidth(nextWidth);
-  }, []);
+  const resize = useCallback(
+    (clientX: number) => {
+      const nextWidth = clampAgentPanelWidth(
+        clientX - resizeLeftRef.current,
+        window.innerWidth,
+        conditionExpanded
+      );
+      widthRef.current = nextWidth;
+      setWidth(nextWidth);
+    },
+    [conditionExpanded]
+  );

  const handlePointerDown = useCallback(
    (event: ReactPointerEvent<HTMLDivElement>) => {
@@ -78,29 +82,32 @@ export function useAgentPanelResize(viewportWidth: number) {
    [resize]
  );

-  const handleKeyDown = useCallback((event: ReactKeyboardEvent<HTMLDivElement>) => {
-    const currentWidth =
-      panelRef.current?.getBoundingClientRect().width ?? WORKBENCH_LAYOUT.desktop.agentWidth;
-    let nextWidth = currentWidth;
+  const handleKeyDown = useCallback(
+    (event: ReactKeyboardEvent<HTMLDivElement>) => {
+      const currentWidth =
+        panelRef.current?.getBoundingClientRect().width ?? WORKBENCH_LAYOUT.desktop.agentWidth;
+      let nextWidth = currentWidth;

-    if (event.key === "ArrowLeft") {
-      nextWidth -= 16;
-    } else if (event.key === "ArrowRight") {
-      nextWidth += 16;
-    } else if (event.key === "Home") {
-      nextWidth = getWorkbenchViewportLayout(window.innerWidth).agentWidth;
-    } else if (event.key === "End") {
-      nextWidth = getAgentPanelMaxWidth(window.innerWidth);
-    } else {
-      return;
-    }
+      if (event.key === "ArrowLeft") {
+        nextWidth -= 16;
+      } else if (event.key === "ArrowRight") {
+        nextWidth += 16;
+      } else if (event.key === "Home") {
+        nextWidth = getAgentPanelDefaultWidth(window.innerWidth, conditionExpanded);
+      } else if (event.key === "End") {
+        nextWidth = getAgentPanelMaxWidth(window.innerWidth, conditionExpanded);
+      } else {
+        return;
+      }

-    event.preventDefault();
-    const clampedWidth = clampAgentPanelWidth(nextWidth, window.innerWidth);
-    widthRef.current = clampedWidth;
-    setWidth(clampedWidth);
-    setCommittedWidth(clampedWidth);
-  }, []);
+      event.preventDefault();
+      const clampedWidth = clampAgentPanelWidth(nextWidth, window.innerWidth, conditionExpanded);
+      widthRef.current = clampedWidth;
+      setWidth(clampedWidth);
+      setCommittedWidth(clampedWidth);
+    },
+    [conditionExpanded]
+  );

  return {
    committedWidth,
@@ -13,10 +13,12 @@ import {
  createAgentApiClient,
  fetchAgentBootstrap,
  fetchAgentSessions,
+  hasPendingAgentInput,
  isUiEnvelopeAllowed,
  parseUiEnvelopePayload,
  type AgentApprovalMode,
  type AgentChatMessage,
+  type AgentConnectionStatus,
  type AgentModelOption,
  type AgentPermissionReply,
  type AgentPermissionRequest,
@@ -45,8 +47,6 @@ import {

 const AGENT_PANEL_COLLAPSE_MS = 180;

-type AgentRuntimeAvailability = "connecting" | "connected" | "unavailable" | "failed";
-
 type UseWorkbenchAgentOptions = {
  onUiEnvelope: (payload: UIEnvelopePayload, sessionId: string) => Promise<void> | void;
  onFrontendAction: (request: FrontendActionRequest, signal: AbortSignal) => Promise<unknown>;
@@ -71,7 +71,8 @@ export function useWorkbenchAgent({ onUiEnvelope, onFrontendAction }: UseWorkben
  const [registry, setRegistry] = useState<UIRegistry | null>(null);
  const [sessionTitle, setSessionTitle] = useState("新对话");
  const [statusLabel, setStatusLabel] = useState("Agent 后端连接中");
-  const [runtimeAvailability, setRuntimeAvailability] = useState<AgentRuntimeAvailability>("connecting");
+  const [connectionStatus, setConnectionStatus] =
+    useState<AgentConnectionStatus>("connecting");
  const [resumedStreaming, setResumedStreaming] = useState(false);
  const [modelOptions, setModelOptions] = useState<AgentModelOption[]>([]);
  const [selectedModel, setSelectedModel] = useState("");
@@ -140,6 +141,7 @@ export function useWorkbenchAgent({ onUiEnvelope, onFrontendAction }: UseWorkben

  const handleDataPart = useCallback(
    (part: AgentDataPart) => {
+      setConnectionStatus("online");
      const eventSessionId = getDataString(part.data, "session_id");
      if (eventSessionId && sessionIdRef.current && eventSessionId !== sessionIdRef.current) {
        return;
@@ -226,7 +228,7 @@ export function useWorkbenchAgent({ onUiEnvelope, onFrontendAction }: UseWorkben
    onData: (part) => handleDataPart(part as AgentDataPart),
    onError: (error) => {
      markLastAssistantStreamDone(chatRef.current.messages, setStreamRenderState);
-      setRuntimeAvailability("failed");
+      setConnectionStatus("offline");
      setStatusLabel("Agent 后端请求失败");
      showMapNotice({
        id: "agent-stream-status",
@@ -237,6 +239,7 @@ export function useWorkbenchAgent({ onUiEnvelope, onFrontendAction }: UseWorkben
    },
    onFinish: () => {
      markLastAssistantStreamDone(chatRef.current.messages, setStreamRenderState);
+      setConnectionStatus("online");
      setStatusLabel("Agent 分析完成");
    }
  });
@@ -303,7 +306,7 @@ export function useWorkbenchAgent({ onUiEnvelope, onFrontendAction }: UseWorkben
    setModelOptions(backendConnection.models);
    setSelectedModel((current) => current || backendConnection.defaultModel || backendConnection.models[0]?.id || "");
    if (chatRef.current.status === "ready") {
-      setRuntimeAvailability("connected");
+      setConnectionStatus("online");
      setStatusLabel("准备就绪");
    }
  }, [backendConnection]);
@@ -313,7 +316,7 @@ export function useWorkbenchAgent({ onUiEnvelope, onFrontendAction }: UseWorkben
      return;
    }

-    setRuntimeAvailability("unavailable");
+    setConnectionStatus("offline");
    setStatusLabel("Agent 后端不可用");
  }, [backendConnectionError]);

@@ -371,10 +374,9 @@ export function useWorkbenchAgent({ onUiEnvelope, onFrontendAction }: UseWorkben
  const personaState = useMemo(
    () => deriveAgentPersonaState(messages, {
      chatStatus: chat.status,
-      runtimeAvailability,
-      statusLabel
+      connectionStatus
    }),
-    [chat.status, messages, runtimeAvailability, statusLabel]
+    [chat.status, connectionStatus, messages]
  );

  const refreshSessionHistory = useCallback(async () => {
@@ -478,7 +480,7 @@ export function useWorkbenchAgent({ onUiEnvelope, onFrontendAction }: UseWorkben
        })
        .catch((error) => {
          if (!controller.signal.aborted) {
-            setRuntimeAvailability("failed");
+            setConnectionStatus("offline");
            setStatusLabel("Agent 会话流恢复失败");
            showMapNotice({
              id: "agent-stream-status",
@@ -589,7 +591,7 @@ export function useWorkbenchAgent({ onUiEnvelope, onFrontendAction }: UseWorkben
      clearSessionId();
      setSessionTitle("新对话");
      setStatusLabel(nextStatusLabel);
-      setRuntimeAvailability("connected");
+      setConnectionStatus("online");
      setPermissionOverrides({});
      setQuestionOverrides({});
      setStreamRenderState({});
@@ -793,6 +795,7 @@ export function useWorkbenchAgent({ onUiEnvelope, onFrontendAction }: UseWorkben
    modelOptions,
    openMobilePanel,
    closeMobilePanel,
+    connectionStatus,
    panelCollapsing,
    panelOpen,
    personaState,
@@ -824,23 +827,17 @@ function deriveAgentPersonaState(
  messages: AgentChatMessage[],
  {
    chatStatus,
-    runtimeAvailability,
-    statusLabel
+    connectionStatus
  }: {
    chatStatus: string;
-    runtimeAvailability: AgentRuntimeAvailability;
-    statusLabel: string;
+    connectionStatus: AgentConnectionStatus;
  }
 ): PersonaState {
-  if (
-    runtimeAvailability === "unavailable" ||
-    runtimeAvailability === "failed" ||
-    /失败|不可用|错误|降级/.test(statusLabel)
-  ) {
+  if (connectionStatus === "offline") {
    return "asleep";
  }

-  if (hasPendingOperatorInput(messages)) {
+  if (hasPendingAgentInput(messages)) {
    return "listening";
  }

@@ -848,7 +845,7 @@ function deriveAgentPersonaState(
    chatStatus === "submitted" ||
    chatStatus === "streaming" ||
    hasRunningSessionWork(messages) ||
-    runtimeAvailability === "connecting"
+    connectionStatus === "connecting"
  ) {
    return "thinking";
  }
@@ -856,14 +853,6 @@ function deriveAgentPersonaState(
  return "idle";
 }

-function hasPendingOperatorInput(messages: AgentChatMessage[]) {
-  return messages.some(
-    (message) =>
-      message.permissions?.some((permission) => permission.status === "pending" || permission.status === "error") ||
-      message.questions?.some((question) => question.status === "pending" || question.status === "error")
-  );
-}
-
 function hasRunningSessionWork(messages: AgentChatMessage[]) {
  const latestProgress = messages.flatMap((message) => message.progress ?? []).at(-1);
  const latestTodo = messages.flatMap((message) => message.todos?.todos ?? []).at(-1);
@@ -16,11 +16,7 @@ import {
  waterNetworkInteractionLayers
 } from "../map/layers";
 import { MAP_MAX_ZOOM } from "../map/map-layer-visuals";
-import {
-  VALUE_LABEL_LAYER_IDS,
-  VALUE_LABEL_SOURCE_ID,
-  createEmptyValueLabelCollection
-} from "../map/value-label";
+import { createValueLabelLayers } from "../map/value-label";
 import { setSimulationLayersVisibility } from "../map/simulation-layers";
 import {
  AVAILABLE_WATER_NETWORK_SOURCE_IDS,
@@ -79,7 +75,9 @@ const SOURCE_STATUS_LABELS: Record<string, string> = {
 const SOURCE_GROUP_BY_ID: Record<string, string> = {
  "mapbox-light": "mapbox-base",
  "mapbox-satellite": "mapbox-base",
-  ...Object.fromEntries(AVAILABLE_WATER_NETWORK_SOURCE_IDS.map((sourceId) => [sourceId, "geoserver-mvt"])),
+  ...Object.fromEntries(
+    AVAILABLE_WATER_NETWORK_SOURCE_IDS.map((sourceId) => [sourceId, "geoserver-mvt"])
+  ),
  [SIMULATION_SOURCE_IDS.impactArea]: "annotation-source",
  [SIMULATION_SOURCE_IDS.annotations]: "annotation-source"
 };
@@ -121,38 +119,31 @@ export function useWorkbenchMap({
    map.on("load", async () => {
      map.resize();
      const sources = createWaterNetworkSources();
-      AVAILABLE_WATER_NETWORK_SOURCE_IDS.forEach((sourceId) => map.addSource(sourceId, sources[sourceId]));
+      AVAILABLE_WATER_NETWORK_SOURCE_IDS.forEach((sourceId) =>
+        map.addSource(sourceId, sources[sourceId])
+      );
      map.addSource(SIMULATION_SOURCE_IDS.impactArea, simulationSources.impactArea);
      map.addSource(SIMULATION_SOURCE_IDS.annotations, simulationSources.annotations);
-      map.addSource(VALUE_LABEL_SOURCE_ID, { type: "geojson", data: createEmptyValueLabelCollection() });
      await registerSupplyAssetImages(map);
      const scadaRegistration = await registerScadaImages(map);
-      const activeScadaBusinessLayers = scadaRegistration.status === "unavailable"
-        ? scadaFallbackBusinessLayers
-        : scadaBusinessLayers;
-      simulationAnnotationLayers.filter((layer) => layer.id === "simulation-impact-fill").forEach((layer) => map.addLayer(layer));
+      const activeScadaBusinessLayers =
+        scadaRegistration.status === "unavailable"
+          ? scadaFallbackBusinessLayers
+          : scadaBusinessLayers;
+      simulationAnnotationLayers
+        .filter((layer) => layer.id === "simulation-impact-fill")
+        .forEach((layer) => map.addLayer(layer));
      waterNetworkBusinessLayers.forEach((layer) => map.addLayer(layer));
      activeScadaBusinessLayers.forEach((layer) => map.addLayer(layer));
-      simulationAnnotationLayers.filter((layer) => layer.type !== "symbol" && layer.id !== "simulation-impact-fill").forEach((layer) => map.addLayer(layer));
+      simulationAnnotationLayers
+        .filter((layer) => layer.type !== "symbol" && layer.id !== "simulation-impact-fill")
+        .forEach((layer) => map.addLayer(layer));
      waterNetworkInteractionLayers.forEach((layer) => map.addLayer(layer));
      scadaInteractionLayers.forEach((layer) => map.addLayer(layer));
-      map.addLayer({
-        id: VALUE_LABEL_LAYER_IDS[0],
-        type: "symbol",
-        source: VALUE_LABEL_SOURCE_ID,
-        filter: ["==", ["geometry-type"], "Point"],
-        layout: { "text-field": ["get", "label"], "text-size": 12, "text-offset": [0, -1.35], "text-anchor": "bottom" },
-        paint: { "text-color": "#0F172A", "text-halo-color": "#FFFFFF", "text-halo-width": 2 }
-      });
-      map.addLayer({
-        id: VALUE_LABEL_LAYER_IDS[1],
-        type: "symbol",
-        source: VALUE_LABEL_SOURCE_ID,
-        filter: ["in", ["geometry-type"], ["literal", ["LineString", "MultiLineString"]]],
-        layout: { "symbol-placement": "line-center", "text-field": ["get", "label"], "text-size": 12 },
-        paint: { "text-color": "#0F172A", "text-halo-color": "#FFFFFF", "text-halo-width": 2 }
-      });
-      simulationAnnotationLayers.filter((layer) => layer.type === "symbol").forEach((layer) => map.addLayer(layer));
+      createValueLabelLayers().forEach((layer) => map.addLayer(layer));
+      simulationAnnotationLayers
+        .filter((layer) => layer.type === "symbol")
+        .forEach((layer) => map.addLayer(layer));
      waterNetworkHitLayers.forEach((layer) => map.addLayer(layer));
      scadaHitLayers.forEach((layer) => map.addLayer(layer));
      setSimulationLayersVisibility(map, impactVisibleRef.current);
@@ -160,7 +151,11 @@ export function useWorkbenchMap({
      updateSourceStatus(
        setSourceStatuses,
        "scada-icons",
-        scadaRegistration.status === "ready" ? "online" : scadaRegistration.status === "degraded" ? "degraded" : "offline",
+        scadaRegistration.status === "ready"
+          ? "online"
+          : scadaRegistration.status === "degraded"
+            ? "degraded"
+            : "offline",
        scadaRegistration.status === "ready"
          ? "SCADA 图标已就绪。"
          : scadaRegistration.status === "degraded"
@@ -190,7 +185,12 @@ export function useWorkbenchMap({
      if (!message.includes("AbortError")) {
        const sourceGroupId = getSourceGroupFromErrorEvent(event);
        if (sourceGroupId) {
-          updateSourceStatus(setSourceStatuses, sourceGroupId, "offline", getSourceErrorMessage(sourceGroupId, message));
+          updateSourceStatus(
+            setSourceStatuses,
+            sourceGroupId,
+            "offline",
+            getSourceErrorMessage(sourceGroupId, message)
+          );
        } else {
          setMapError(message);
        }
@@ -239,7 +239,11 @@ export function useWorkbenchMap({
 function updateStatusFromSourceEvent(
  event: MapSourceDataEvent,
  status: WorkbenchSourceStatusValue,
-  setSourceStatuses: (updater: (current: Record<string, WorkbenchSourceStatus>) => Record<string, WorkbenchSourceStatus>) => void
+  setSourceStatuses: (
+    updater: (
+      current: Record<string, WorkbenchSourceStatus>
+    ) => Record<string, WorkbenchSourceStatus>
+  ) => void
 ) {
  const sourceGroupId = SOURCE_GROUP_BY_ID[event.sourceId];
  if (!sourceGroupId) {
@@ -250,11 +254,20 @@ function updateStatusFromSourceEvent(
    return;
  }

-  updateSourceStatus(setSourceStatuses, sourceGroupId, status, getSourceStatusMessage(sourceGroupId, status));
+  updateSourceStatus(
+    setSourceStatuses,
+    sourceGroupId,
+    status,
+    getSourceStatusMessage(sourceGroupId, status)
+  );
 }

 function updateSourceStatus(
-  setSourceStatuses: (updater: (current: Record<string, WorkbenchSourceStatus>) => Record<string, WorkbenchSourceStatus>) => void,
+  setSourceStatuses: (
+    updater: (
+      current: Record<string, WorkbenchSourceStatus>
+    ) => Record<string, WorkbenchSourceStatus>
+  ) => void,
  sourceGroupId: string,
  status: WorkbenchSourceStatusValue,
  message: string
@@ -296,15 +309,21 @@ function getSourceGroupFromErrorEvent(event: { sourceId?: string; error?: { mess

 function getSourceStatusMessage(sourceGroupId: string, status: WorkbenchSourceStatusValue) {
  if (sourceGroupId === "mapbox-base") {
-    return status === "online" ? "底图瓦片已恢复正常。" : "底图瓦片请求中断，业务图层仍可继续使用。";
+    return status === "online"
+      ? "底图瓦片已恢复正常。"
+      : "底图瓦片请求中断，业务图层仍可继续使用。";
  }

  if (sourceGroupId === "geoserver-mvt") {
-    return status === "online" ? "供水管网矢量瓦片已加载。" : "供水管网瓦片请求中断，当前视图可能不完整。";
+    return status === "online"
+      ? "供水管网矢量瓦片已加载。"
+      : "供水管网瓦片请求中断，当前视图可能不完整。";
  }

  if (sourceGroupId === "annotation-source") {
-    return status === "online" ? "业务标注和影响范围已加载。" : "业务标注源加载中断，模拟标注可能暂不可见。";
+    return status === "online"
+      ? "业务标注和影响范围已加载。"
+      : "业务标注源加载中断，模拟标注可能暂不可见。";
  }

  return status === "online" ? "地图数据源已恢复正常。" : "地图数据源请求中断。";