feat(agent): support Responses steering and project-aware tools
Use the dedicated TJWATER_AGENT_URL and Responses stream protocol. Keep running turns active while users steer or queue follow-ups and edit pending delivery. Refresh the model catalog before generation and preserve approval mode selection. Integrate scoped investigation messaging/presentation, geographic place selection, current Agent composer styles and supporting workbench contracts. Validation: 77 focused Vitest checks, 21 browser cases, lint, typecheck and production build. Preserve direct Server/Agent routing and project authentication.
This commit is contained in:
@@ -0,0 +1,142 @@
|
||||
import type { FeatureCollection, Geometry, Position } from "geojson";
|
||||
import type { GeoJSONSource, Map as MapLibreMap, PaddingOptions, LayerSpecification } from "maplibre-gl";
|
||||
import type { InvestigationOverlay } from "../api/investigation-presentation";
|
||||
import { MAP_STYLE_TOKENS } from "./map-colors";
|
||||
|
||||
export const INVESTIGATION_HIGHLIGHT_SOURCE = "investigation-presentation-highlights";
|
||||
export const INVESTIGATION_OVERLAY_SOURCE = "investigation-presentation-overlay";
|
||||
const empty = (): FeatureCollection => ({ type: "FeatureCollection", features: [] });
|
||||
const color = MAP_STYLE_TOKENS.state.selected;
|
||||
|
||||
const layers: LayerSpecification[] = [
|
||||
{ id: `${INVESTIGATION_HIGHLIGHT_SOURCE}-fill`, source: INVESTIGATION_HIGHLIGHT_SOURCE, type: "fill", filter: ["==", ["geometry-type"], "Polygon"], paint: { "fill-color": color, "fill-opacity": 0.18 } },
|
||||
{ id: `${INVESTIGATION_HIGHLIGHT_SOURCE}-line`, source: INVESTIGATION_HIGHLIGHT_SOURCE, type: "line", filter: ["!=", ["geometry-type"], "Point"], paint: { "line-color": color, "line-width": 5, "line-opacity": 0.85 } },
|
||||
{ id: `${INVESTIGATION_HIGHLIGHT_SOURCE}-point`, source: INVESTIGATION_HIGHLIGHT_SOURCE, type: "circle", filter: ["==", ["geometry-type"], "Point"], paint: { "circle-color": color, "circle-radius": 11, "circle-opacity": 0.65, "circle-stroke-color": MAP_STYLE_TOKENS.canvas.casing, "circle-stroke-width": 2 } },
|
||||
{ id: `${INVESTIGATION_OVERLAY_SOURCE}-fill`, source: INVESTIGATION_OVERLAY_SOURCE, type: "fill", filter: ["==", ["geometry-type"], "Polygon"], paint: { "fill-color": MAP_STYLE_TOKENS.supply.waterQuality, "fill-opacity": 0.16 } },
|
||||
{ id: `${INVESTIGATION_OVERLAY_SOURCE}-outline`, source: INVESTIGATION_OVERLAY_SOURCE, type: "line", filter: ["==", ["geometry-type"], "Polygon"], paint: { "line-color": MAP_STYLE_TOKENS.supply.waterQuality, "line-width": 2, "line-dasharray": [2, 2] } },
|
||||
{ id: `${INVESTIGATION_OVERLAY_SOURCE}-line`, source: INVESTIGATION_OVERLAY_SOURCE, type: "line", filter: ["==", ["geometry-type"], "LineString"], paint: { "line-color": MAP_STYLE_TOKENS.supply.waterQuality, "line-width": 3 } },
|
||||
{ id: `${INVESTIGATION_OVERLAY_SOURCE}-point`, source: INVESTIGATION_OVERLAY_SOURCE, type: "circle", filter: ["==", ["geometry-type"], "Point"], paint: { "circle-color": MAP_STYLE_TOKENS.supply.waterQuality, "circle-radius": 6, "circle-stroke-color": MAP_STYLE_TOKENS.canvas.casing, "circle-stroke-width": 2 } },
|
||||
{ id: `${INVESTIGATION_OVERLAY_SOURCE}-heatmap`, source: INVESTIGATION_OVERLAY_SOURCE, type: "heatmap", paint: {
|
||||
"heatmap-weight": ["coalesce", ["get", "weight"], 1], "heatmap-radius": 28, "heatmap-opacity": 0.65,
|
||||
"heatmap-color": ["interpolate", ["linear"], ["heatmap-density"], 0, "rgba(15,118,110,0)", 0.3, MAP_STYLE_TOKENS.supply.waterQuality, 0.65, MAP_STYLE_TOKENS.state.risk, 1, MAP_STYLE_TOKENS.state.incident]
|
||||
} }
|
||||
];
|
||||
|
||||
export function investigationGeometryCoordinates(geometry: Geometry): Position[] {
|
||||
if (geometry.type === "GeometryCollection") return geometry.geometries.flatMap(investigationGeometryCoordinates);
|
||||
const flatten = (value: unknown): Position[] => {
|
||||
if (!Array.isArray(value)) return [];
|
||||
if (typeof value[0] === "number" && typeof value[1] === "number") return [value as Position];
|
||||
return value.flatMap(flatten);
|
||||
};
|
||||
return flatten(geometry.coordinates);
|
||||
}
|
||||
|
||||
/** All sources and animation state are owned by the currently followed investigation. */
|
||||
export class InvestigationMapPresentation {
|
||||
private pulseFrame: number | null = null;
|
||||
private pulseDeadline: number | null = null;
|
||||
private highlighted = empty();
|
||||
private overlay: InvestigationOverlay | null = null;
|
||||
|
||||
constructor(private getMap: () => MapLibreMap | null, private getPadding: () => PaddingOptions) {}
|
||||
|
||||
private ensure() {
|
||||
const map = this.getMap();
|
||||
if (!map) throw new Error("MAP_NOT_READY");
|
||||
for (const id of [INVESTIGATION_HIGHLIGHT_SOURCE, INVESTIGATION_OVERLAY_SOURCE]) {
|
||||
if (!map.getSource(id)) map.addSource(id, { type: "geojson", data: empty() });
|
||||
}
|
||||
for (const layer of layers) {
|
||||
if (!map.getLayer(layer.id)) map.addLayer({ ...layer, layout: { visibility: "none" } });
|
||||
}
|
||||
return map;
|
||||
}
|
||||
|
||||
highlight(data: FeatureCollection, pulse: boolean, fit: boolean) {
|
||||
this.stopPulse();
|
||||
const map = this.ensure();
|
||||
this.highlighted = data;
|
||||
(map.getSource(INVESTIGATION_HIGHLIGHT_SOURCE) as GeoJSONSource).setData(data);
|
||||
this.visibility(INVESTIGATION_HIGHLIGHT_SOURCE, data.features.length > 0);
|
||||
if (fit) this.fit(data);
|
||||
if (pulse && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
|
||||
const animate = (time: number) => {
|
||||
if (!map.getLayer(`${INVESTIGATION_HIGHLIGHT_SOURCE}-point`)) return;
|
||||
const wave = (Math.sin(time / 300) + 1) / 2;
|
||||
map.setPaintProperty(`${INVESTIGATION_HIGHLIGHT_SOURCE}-point`, "circle-radius", 9 + wave * 5);
|
||||
map.setPaintProperty(`${INVESTIGATION_HIGHLIGHT_SOURCE}-line`, "line-opacity", 0.45 + wave * 0.4);
|
||||
this.pulseFrame = requestAnimationFrame(animate);
|
||||
};
|
||||
this.pulseFrame = requestAnimationFrame(animate);
|
||||
this.pulseDeadline = window.setTimeout(() => this.stopPulse(), 2500);
|
||||
}
|
||||
}
|
||||
|
||||
stopPulse() {
|
||||
if (this.pulseFrame !== null) cancelAnimationFrame(this.pulseFrame);
|
||||
this.pulseFrame = null;
|
||||
if (this.pulseDeadline !== null) window.clearTimeout(this.pulseDeadline);
|
||||
this.pulseDeadline = null;
|
||||
const map = this.getMap();
|
||||
if (map?.getLayer(`${INVESTIGATION_HIGHLIGHT_SOURCE}-point`)) map.setPaintProperty(`${INVESTIGATION_HIGHLIGHT_SOURCE}-point`, "circle-radius", 11);
|
||||
if (map?.getLayer(`${INVESTIGATION_HIGHLIGHT_SOURCE}-line`)) map.setPaintProperty(`${INVESTIGATION_HIGHLIGHT_SOURCE}-line`, "line-opacity", 0.85);
|
||||
}
|
||||
|
||||
clearHighlights() {
|
||||
this.stopPulse();
|
||||
this.highlighted = empty();
|
||||
(this.getMap()?.getSource(INVESTIGATION_HIGHLIGHT_SOURCE) as GeoJSONSource | undefined)?.setData(empty());
|
||||
this.visibility(INVESTIGATION_HIGHLIGHT_SOURCE, false);
|
||||
}
|
||||
|
||||
setOverlay(overlay: InvestigationOverlay, fit: boolean) {
|
||||
const map = this.ensure();
|
||||
this.overlay = overlay;
|
||||
(map.getSource(INVESTIGATION_OVERLAY_SOURCE) as GeoJSONSource).setData(overlay.data);
|
||||
this.showOverlay(overlay.visible);
|
||||
if (fit) this.fit(overlay.data);
|
||||
}
|
||||
|
||||
showOverlay(visible: boolean) {
|
||||
if (!this.overlay) return;
|
||||
this.overlay = { ...this.overlay, visible };
|
||||
const map = this.getMap();
|
||||
for (const layer of layers.filter((item) => "source" in item && item.source === INVESTIGATION_OVERLAY_SOURCE)) {
|
||||
if (map?.getLayer(layer.id)) map.setLayoutProperty(layer.id, "visibility", visible && (this.overlay.mode === "heatmap") === (layer.type === "heatmap") ? "visible" : "none");
|
||||
}
|
||||
}
|
||||
|
||||
clearOverlay(id?: string) {
|
||||
if (id && id !== this.overlay?.overlay_id) return;
|
||||
this.overlay = null;
|
||||
(this.getMap()?.getSource(INVESTIGATION_OVERLAY_SOURCE) as GeoJSONSource | undefined)?.setData(empty());
|
||||
this.visibility(INVESTIGATION_OVERLAY_SOURCE, false);
|
||||
}
|
||||
|
||||
fitOverlay() { if (this.overlay) this.fit(this.overlay.data); }
|
||||
fitHighlights() { this.fit(this.highlighted); }
|
||||
|
||||
private visibility(source: string, visible: boolean) {
|
||||
const map = this.getMap();
|
||||
for (const layer of layers.filter((item) => "source" in item && item.source === source)) {
|
||||
if (map?.getLayer(layer.id)) map.setLayoutProperty(layer.id, "visibility", visible ? "visible" : "none");
|
||||
}
|
||||
}
|
||||
|
||||
private fit(data: FeatureCollection) {
|
||||
const positions = data.features.flatMap((feature) => feature.geometry ? investigationGeometryCoordinates(feature.geometry) : []);
|
||||
if (!positions.length) return;
|
||||
const bounds = positions.reduce((value, point) => [Math.min(value[0], point[0]), Math.min(value[1], point[1]), Math.max(value[2], point[0]), Math.max(value[3], point[1])], [Infinity, Infinity, -Infinity, -Infinity]);
|
||||
this.getMap()?.fitBounds([[bounds[0], bounds[1]], [bounds[2], bounds[3]]], { padding: this.getPadding(), maxZoom: 18, duration: 0 });
|
||||
}
|
||||
|
||||
clear() { this.clearHighlights(); this.clearOverlay(); }
|
||||
destroy() {
|
||||
this.stopPulse();
|
||||
const map = this.getMap();
|
||||
if (!map) return;
|
||||
for (const layer of [...layers].reverse()) if (map.getLayer(layer.id)) map.removeLayer(layer.id);
|
||||
for (const id of [INVESTIGATION_HIGHLIGHT_SOURCE, INVESTIGATION_OVERLAY_SOURCE]) if (map.getSource(id)) map.removeSource(id);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user