FabledScribe/frontend/src/components/BriefingToolStatusRow.vue

<script setup lang="ts">
import { computed, ref } from "vue";
import ToolCallCard from "@/components/ToolCallCard.vue";
import type { ToolCallRecord } from "@/types/chat";

const props = defineProps<{
  toolCalls: ToolCallRecord[];
}>();

const expanded = ref(false);

function shortName(fn: string): string {
  return fn
    .replace(/^(list|get|search|fetch)_/, "")
    .replace(/_/g, " ");
}

interface Pill {
  key: string;
  name: string;
  count: string | null;
  state: "ok" | "empty" | "error";
}

const pills = computed<Pill[]>(() =>
  props.toolCalls.map((tc, i) => {
    const ok = tc.result?.success !== false && tc.status !== "error";
    const data = tc.result?.data as Record<string, unknown> | undefined;
    let count: string | null = null;
    let state: Pill["state"] = ok ? "ok" : "error";
    if (ok && data) {
      const raw =
        (typeof data.count === "number" && data.count) ||
        (typeof data.total === "number" && data.total);
      if (typeof raw === "number") {
        count = String(raw);
        if (raw === 0) state = "empty";
      }
    }
    return {
      key: `${tc.function}-${i}`,
      name: shortName(tc.function),
      count,
      state,
    };
  }),
);

const errorCount = computed(() => pills.value.filter((p) => p.state === "error").length);
</script>

<template>
  <div class="briefing-status" :class="{ expanded }">
    <button class="briefing-status-toggle" @click="expanded = !expanded">
      <span class="briefing-status-label">Gathered</span>
      <span
        v-for="p in pills"
        :key="p.key"
        class="briefing-status-pill"
        :class="`state-${p.state}`"
      >
        {{ p.name }}<span v-if="p.count != null" class="pill-count">{{ p.count }}</span>
      </span>
      <span v-if="errorCount" class="briefing-status-errcount">{{ errorCount }} failed</span>
      <span class="briefing-status-chevron" :class="{ open: expanded }">▶</span>
    </button>
    <div v-if="expanded" class="briefing-status-detail">
      <ToolCallCard
        v-for="(tc, i) in toolCalls"
        :key="i"
        :tool-call="tc"
      />
    </div>
  </div>
</template>

<style scoped>
.briefing-status {
  margin: 0.25rem 0 0.5rem;
  max-width: 80%;
}

.briefing-status-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.35rem 0.55rem;
  background: transparent;
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  color: var(--color-text-muted);
  transition: border-color 0.15s, background 0.15s;
}
.briefing-status-toggle:hover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
}

.briefing-status-label {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 0.78rem;
  color: var(--color-primary);
  opacity: 0.85;
  margin-right: 0.15rem;
}

.briefing-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.08rem 0.45rem;
  font-size: 0.72rem;
  line-height: 1.45;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  background: var(--color-bg-card);
  white-space: nowrap;
}
.briefing-status-pill.state-empty {
  opacity: 0.55;
}
.briefing-status-pill.state-error {
  border-color: color-mix(in srgb, var(--color-danger, #ef4444) 60%, var(--color-border));
  color: var(--color-danger, #ef4444);
}

.pill-count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 0 0.25rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-text);
}
.state-error .pill-count {
  background: color-mix(in srgb, var(--color-danger, #ef4444) 18%, transparent);
}

.briefing-status-errcount {
  font-size: 0.7rem;
  color: var(--color-danger, #ef4444);
  font-weight: 600;
}

.briefing-status-chevron {
  margin-left: auto;
  font-size: 0.65rem;
  opacity: 0.5;
  transition: transform 0.15s;
}
.briefing-status-chevron.open {
  transform: rotate(90deg);
}

.briefing-status-detail {
  margin-top: 0.4rem;
  padding-left: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
</style>