Rich Results

type ToolResultStatus = "success" | "error" | "initiated";
type DisplayLayout = "cards" | "map" | "cards+map";

interface ToolResult {
  tool: string;
  status: ToolResultStatus;
  data?: Record<string, unknown>;
  error?: string;
}

interface ToolResultEvent {
  type: "tool_result";
  id: string;
  results: ToolResult[];
}

interface DisplayDirective {
  items: string[];
  layout?: DisplayLayout;
}

interface RichResultItem {
  toolSlug: string;
  data: Record<string, unknown>;
}

<!--galadri:display {"items":["station_0","station_1"],"layout":"cards+map"}-->

I found two good charging options near you. ChargePoint is closer, while Electrify America has more fast connectors.

<!--galadri:display {"items":["station_0","station_1"],"layout":"cards+map"}-->

Want me to route you to one of them?

const directivePattern = /<!--galadri:display\s+([\s\S]*?)-->/g;

function parseDisplayDirectives(content: string) {
  const segments: Array<
    | { type: "text"; text: string }
    | { type: "display"; directive: DisplayDirective }
  > = [];
  let lastIndex = 0;

  for (const match of content.matchAll(directivePattern)) {
    const start = match.index ?? 0;
    if (start > lastIndex) {
      segments.push({ type: "text", text: content.slice(lastIndex, start) });
    }

    try {
      const directive = JSON.parse(match[1]) as DisplayDirective;
      if (Array.isArray(directive.items) && directive.items.length > 0) {
        segments.push({ type: "display", directive });
      }
    } catch {
      // Ignore malformed directives and keep rendering the text.
    }

    lastIndex = start + match[0].length;
  }

  if (lastIndex < content.length) {
    segments.push({ type: "text", text: content.slice(lastIndex) });
  }

  return segments;
}

function stripDisplayDirectives(content: string) {
  return content.replace(directivePattern, "");
}

const arrayKeys: Record<string, string> = {
  "vehicle-search": "listings",
  "google-maps-search": "results",
  "gas-price-lookup": "stations",
  "ev-charger-lookup": "stations",
  "ev-charger-advanced": "stations",
  "repair-booking": "shops",
  "traffic": "incidents",
  "telemetry": "routes",
};

const registry = new Map<string, RichResultItem>();

function registerToolResult(toolSlug: string, data: Record<string, unknown>) {
  const mapItem = data.map_item as Record<string, unknown> | undefined;
  if (mapItem && typeof mapItem._id === "string") {
    registry.set(mapItem._id, { toolSlug, data: mapItem });
  }

  if (
    typeof data.route_id === "string" &&
    Array.isArray(data.route_points) &&
    data.route_points.length > 0
  ) {
    registry.set(data.route_id, { toolSlug, data });
  }

  const arrayKey = arrayKeys[toolSlug];
  const items = arrayKey ? data[arrayKey] : undefined;
  if (!Array.isArray(items)) return;

  for (const item of items) {
    if (item && typeof item === "object" && typeof item._id === "string") {
      registry.set(item._id, { toolSlug, data: item as Record<string, unknown> });
    }
  }
}

data: {"type":"session","session_id":"550e8400-e29b-41d4-a716-446655440000","is_new":true}

data: {"type":"tool_result","id":"tc_1","results":[{"tool":"google-maps-search","status":"success","data":{"results":[{"_id":"place_0","name":"Valvoline Instant Oil Change","place_id":"ChIJ123","address":"123 Camelback Rd, Phoenix, AZ","latitude":33.5092,"longitude":-112.0148,"phone":"(602) 555-0100","rating":"4.6 stars (218 reviews)","open_now":true,"website":"https://example.com","types":["car_repair","point_of_interest","establishment"],"fuel_prices":null,"ev_charging":null}]}}]}

data: {"type":"tool_result","id":"tc_2","results":[{"tool":"traffic","status":"success","data":{"route_id":"route_f82a1c","origin":"Phoenix, AZ","destination":"Valvoline Instant Oil Change","origin_lat":33.4484,"origin_lng":-112.074,"destination_lat":33.5092,"destination_lng":-112.0148,"travel_time_minutes":14,"travel_time_no_traffic_minutes":12,"delay_minutes":2,"distance_km":11.4,"distance_miles":7.1,"steps_summary":["Take N 7th St (3.2 mi)","Turn right on E Camelback Rd (0.4 mi)"],"route_points":[{"lat":33.4484,"lng":-112.074},{"lat":33.4691,"lng":-112.0651},{"lat":33.5092,"lng":-112.0148}],"google_maps_url":"https://www.google.com/maps/dir/?api=1&origin=Phoenix%2C%20AZ&destination=Valvoline"}}]}

data: {"type":"content","content":"Valvoline is the closest strong option. Traffic adds about 2 minutes right now.\n\n<!--galadri:display {\"items\":[\"route_f82a1c\"],\"layout\":\"map\"}-->\n\n<!--galadri:display {\"items\":[\"place_0\"],\"layout\":\"cards\"}-->"}

data: {"type":"usage","prompt_tokens":1420,"completion_tokens":220,"thinking_tokens":0,"cost_micro_usd":391000,"cost_cents":39}

data: [DONE]

function resolveDirective(directive: DisplayDirective) {
  return directive.items
    .map((id) => registry.get(id))
    .filter((item): item is RichResultItem => Boolean(item));
}

function renderDirective(directive: DisplayDirective) {
  const items = resolveDirective(directive);
  if (items.length === 0) return null;

  switch (directive.layout) {
    case "map":
      return <ResultMap items={items} />;
    case "cards+map":
      return (
        <>
          <ResultMap items={items} />
          <ResultCards items={items} />
        </>
      );
    case "cards":
    default:
      return <ResultCards items={items} />;
  }
}

{
  "_id": "place_0",
  "name": "Valvoline Instant Oil Change",
  "place_id": "ChIJ123",
  "address": "123 Camelback Rd, Phoenix, AZ",
  "latitude": 33.5092,
  "longitude": -112.0148,
  "phone": "(602) 555-0100",
  "rating": "4.6 stars (218 reviews)",
  "open_now": true,
  "website": "https://example.com",
  "types": ["car_repair", "point_of_interest", "establishment"],
  "fuel_prices": null,
  "ev_charging": null
}

{
  "type": "data_saved",
  "mutations": [
    {
      "action": "update",
      "table": "vehicles",
      "record": {
        "id": "106fec6e-f2db-49e7-938f-4a61b4d90a7c",
        "make": "Ford",
        "model": "F-150",
        "nickname": "Work truck"
      },
      "previousRecord": {
        "id": "106fec6e-f2db-49e7-938f-4a61b4d90a7c",
        "make": "Ford",
        "model": "F-150",
        "nickname": null
      },
      "changedFields": ["nickname"]
    }
  ]
}