amcs/ui/src/components/auth/LoginInfoPanel.svelte

<script lang="ts">
  import type { PublicStatusResponse } from "../../types";
  type IntelligenceCard = {
    id: string;
    title: string;
    accentClass: string;
    summary: string;
    detail: string;
    tools: string[];
  };

  const {
    isOAuthCallback,
    data,
    loading,
    error,
  }: {
    isOAuthCallback: boolean;
    data: PublicStatusResponse | null;
    loading: boolean;
    error: string;
  } = $props();

  const intelligenceCards: IntelligenceCard[] = [
    {
      id: "projects",
      title: "Projects",
      accentClass: "text-indigo-200",
      summary:
        "Named containers that scope memory and operations so retrieval stays focused on the right workstream.",
      detail:
        "Project context can be resolved explicitly or from active session scope depending on client behavior.",
      tools: ["list_projects", "create_project", "get_project_context"],
    },
    {
      id: "thoughts",
      title: "Thoughts",
      accentClass: "text-violet-200",
      summary:
        "Core memory records with metadata and links that power search, recall, summaries, and relationship traversal.",
      detail:
        "Thought capture can include metadata enrichment and link-based navigation for richer retrieval.",
      tools: ["capture_thought", "search_thoughts", "related_thoughts"],
    },
    {
      id: "skills",
      title: "Skills",
      accentClass: "text-cyan-200",
      summary:
        "Reusable agent instructions and capabilities that can be linked to a project and loaded with it.",
      detail:
        "Use project-linked skills to keep behavior consistent across sessions and assistants.",
      tools: ["list_project_skills", "add_skill", "add_project_skill"],
    },
    {
      id: "guardrails",
      title: "Guardrails",
      accentClass: "text-amber-200",
      summary:
        "Safety and policy constraints with severity levels that can be enforced globally or per project.",
      detail:
        "Guardrails provide stable operational boundaries for memory and tool usage behavior.",
      tools: [
        "list_project_guardrails",
        "add_guardrail",
        "add_project_guardrail",
      ],
    },
    {
      id: "learnings",
      title: "Learnings",
      accentClass: "text-emerald-200",
      summary:
        "Curated records for durable lessons and decisions, separate from raw thoughts for cleaner review.",
      detail:
        "Structured fields such as status, priority, and confidence support operational follow-through.",
      tools: ["add_learning", "list_learnings", "get_learning"],
    },
    {
      id: "vector-metadata-build",
      title: "Vector + Metadata Build",
      accentClass: "text-fuchsia-200",
      summary:
        "Backfill and repair flows for embeddings and metadata so retrieval quality stays healthy over time.",
      detail:
        "Use dry runs for safe audits, then run updates to regenerate missing vectors or retry failed metadata.",
      tools: [
        "backfill_embeddings",
        "reparse_thought_metadata",
        "retry_failed_metadata",
      ],
    },
  ];

  let activeCard = $state("projects");

  function setActiveCard(id: string) {
    activeCard = id;
  }

</script>

<div
  class="rounded-3xl border border-cyan-400/20 bg-slate-900/80 p-8 shadow-2xl shadow-slate-950/40"
>
  <div
    class="inline-flex items-center gap-2 rounded-full border border-cyan-400/20 bg-cyan-400/10 px-3 py-1 text-sm font-medium text-cyan-200"
  >
    <span class="h-2 w-2 rounded-full bg-emerald-400"></span>
    AMCS (Avalon Memory Control Service)
  </div>
  <h1 class="mt-6 text-4xl font-semibold tracking-tight text-white">
    {#if isOAuthCallback}
      Completing login...
    {:else}
      Avalon Memory Control Service
    {/if}
  </h1>
  <p class="mt-3 max-w-2xl text-base leading-7 text-slate-300">
    AMCS is a Go MCP server for capturing project thoughts, semantic retrieval,
    summaries, and linked memory workflows with Postgres + pgvector.
  </p>
  <p class="mt-2 max-w-2xl text-sm leading-6 text-slate-400">
    It stores durable memory for assistants, supports project scoping, and
    exposes tools over MCP for capture, search, context recall, and structured
    operations.
  </p>

  <div class="mt-8 grid gap-4 sm:grid-cols-3">
    <div class="rounded-2xl border border-white/10 bg-white/5 p-5">
      <p class="text-sm uppercase tracking-[0.2em] text-slate-400">
        Server status
      </p>
      {#if loading}
        <p class="mt-2 text-lg font-semibold text-white">Loading…</p>
      {:else if error}
        <p class="mt-2 text-sm font-medium text-rose-300">Unavailable</p>
        <p class="mt-2 text-xs text-rose-200/80">{error}</p>
      {:else if data}
        <p class="mt-2 text-2xl font-semibold text-white">
          {data.connected_count}
        </p>
        <p class="mt-2 text-sm text-slate-400">
          connected in {data.connected_window}
        </p>
        {#if data.entries.length > 0}
          <p class="mt-2 text-xs text-slate-400">
            Clients:
            {#each data.entries.slice(0, 3) as client, idx}
              <code class="text-slate-200">{client.key_id}</code>{idx <
              Math.min(data.entries.length, 3) - 1
                ? ", "
                : ""}
            {/each}
            {data.entries.length > 3 ? " …" : ""}
          </p>
        {/if}
        <a
          href="/status"
          class="mt-3 inline-flex items-center rounded-lg border border-emerald-300/30 bg-emerald-400/10 px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.12em] text-emerald-100 transition hover:border-emerald-300/50 hover:bg-emerald-400/20"
        >
          Status Endpoint
        </a>
      {:else}
        <p class="mt-2 text-sm text-slate-400">No status snapshot yet.</p>
      {/if}
    </div>
    <div class="rounded-2xl border border-white/10 bg-white/5 p-5">
      <p class="text-sm uppercase tracking-[0.2em] text-slate-400">
        Memory stack
      </p>
      <p class="mt-2 text-2xl font-semibold text-white">Postgres + pgvector</p>
      <p class="mt-2 text-sm text-slate-400">
        Semantic search with full-text fallback when vectors are missing.
      </p>
    </div>
    <div class="rounded-2xl border border-white/10 bg-white/5 p-5">
      <p class="text-sm uppercase tracking-[0.2em] text-slate-400">
        Operator docs
      </p>
      <a
        href="/llm"
        class="mt-2 inline-flex items-center rounded-lg border border-cyan-300/30 bg-cyan-400/10 px-3 py-2 text-sm font-semibold text-cyan-100 transition hover:border-cyan-300/50 hover:bg-cyan-400/20"
      >
        Open LLM Instructions
      </a>
      <p class="mt-2 text-sm text-slate-400">
        Tool behavior, workflows, and MCP guidance for assistants.
      </p>
    </div>
  </div>

  <div class="mt-6 rounded-2xl border border-white/10 bg-slate-950/35 p-5">
    <h2 class="text-lg font-semibold text-white">Project intelligence model</h2>
    <p class="mt-2 text-sm text-slate-400">
      AMCS separates reusable behavior, safety constraints, and curated
      knowledge so assistants can be guided consistently across sessions.
    </p>

    <div class="mt-4 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
      {#each intelligenceCards as card}
        <button
          type="button"
          class={`w-full rounded-xl border p-4 text-left transition ${
            activeCard === card.id
              ? "border-cyan-300/40 bg-cyan-400/[0.08] shadow-lg shadow-cyan-950/30"
              : "border-white/10 bg-white/[0.03] hover:border-white/20 hover:bg-white/[0.05]"
          }`}
          aria-pressed={activeCard === card.id}
          onclick={() => setActiveCard(card.id)}
        >
          <p class={`text-xs uppercase tracking-[0.16em] ${card.accentClass}`}>
            {card.title}
          </p>
          <p class="mt-2 text-sm text-slate-300">{card.summary}</p>
          {#if activeCard === card.id}
            <p class="mt-2 text-xs text-slate-300/90">{card.detail}</p>
          {/if}
          <p class="mt-3 text-xs text-slate-400">
            Tools:
            {#each card.tools as tool, idx}
              <code class="text-slate-200">{tool}</code>{idx <
              card.tools.length - 1
                ? ", "
                : ""}
            {/each}
          </p>
        </button>
      {/each}
    </div>
  </div>
</div>