@polpo-ai/dashboard 0.1.0

package/app/(dashboard)/projects/[id]/sessions/view.tsx

@@ -0,0 +1,242 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useParams } from "next/navigation";
+import Link from "next/link";
+import { ChevronRight, RefreshCw, Search, ListFilter, X } from "lucide-react";
+import { usePolpoClient } from "#/lib/polpo-client";
+import { Button } from "#/components/ui/button";
+import { Badge } from "#/components/ui/badge";
+import { Popover, PopoverContent, PopoverTrigger } from "#/components/ui/popover";
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "#/components/ui/command";
+
+export interface Session {
+  id: string;
+  title?: string;
+  agent?: string;
+  messageCount: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+function timeAgo(date: string) {
+  const diff = Date.now() - new Date(date).getTime();
+  const min = Math.floor(diff / 60000);
+  if (min < 60) return `${min}m ago`;
+  const hours = Math.floor(min / 60);
+  if (hours < 24) return `${hours}h ago`;
+  return `${Math.floor(hours / 24)}d ago`;
+}
+
+const PER_PAGE = 15;
+
+export default function SessionsView({
+  initialSessions,
+}: {
+  initialSessions: Session[];
+}) {
+  const { id } = useParams<{ id: string }>();
+  const [page, setPage] = useState(0);
+  const [search, setSearch] = useState("");
+  const [filterAgent, setFilterAgent] = useState<string | null>(null);
+  const [agentOpen, setAgentOpen] = useState(false);
+
+  const polpo = usePolpoClient(id);
+  const { data: sessions = [], isFetching, refetch } = useQuery({
+    queryKey: ["all-sessions", id],
+    queryFn: async () => {
+      const r = await polpo.getSessions();
+      return (r.sessions ?? []) as unknown as Session[];
+    },
+    initialData: initialSessions,
+  });
+
+  const activeAgents = useMemo(
+    () => [...new Set(sessions.map((s) => s.agent).filter(Boolean))].sort() as string[],
+    [sessions]
+  );
+
+  const filtered = useMemo(() => {
+    let result = sessions;
+    if (filterAgent) result = result.filter((s) => s.agent === filterAgent);
+    if (search) {
+      const q = search.toLowerCase();
+      result = result.filter((s) =>
+        (s.title ?? "").toLowerCase().includes(q) ||
+        (s.agent ?? "").toLowerCase().includes(q) ||
+        s.id.toLowerCase().includes(q)
+      );
+    }
+    return result;
+  }, [sessions, filterAgent, search]);
+
+  const hasFilters = filterAgent !== null;
+  const paged = filtered.slice(page * PER_PAGE, (page + 1) * PER_PAGE);
+  const totalPages = Math.ceil(filtered.length / PER_PAGE);
+
+  return (
+    <div>
+      {/* Header */}
+      <div>
+        <h2 className="text-lg font-semibold tracking-tight">Sessions</h2>
+        <p className="mt-1 text-xs text-muted-foreground">
+          {sessions.length} chat sessions across all agents.
+        </p>
+      </div>
+
+      {/* Filters + Search + Refresh */}
+      {sessions.length > 0 && (
+        <div className="mt-3 flex items-center gap-2 flex-wrap">
+          {/* Search */}
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+            <input
+              type="text"
+              value={search}
+              onChange={(e) => { setSearch(e.target.value); setPage(0); }}
+              placeholder="Search..."
+              className="w-48 border border-border bg-transparent pl-9 pr-3 py-1.5 text-xs placeholder:text-muted-foreground/40 focus:border-foreground/30 focus:outline-none transition-colors"
+            />
+          </div>
+
+          {/* Agent filter */}
+          {activeAgents.length > 1 && (
+            <Popover open={agentOpen} onOpenChange={setAgentOpen}>
+              <PopoverTrigger
+                render={
+                  <Button variant="outline" size="sm" data-testid="filter-agent">
+                    <ListFilter className="h-3 w-3" />
+                    {filterAgent ? (
+                      <>
+                        Agent: <Badge variant="secondary" className="ml-1 font-normal">{filterAgent}</Badge>
+                      </>
+                    ) : (
+                      "Agent"
+                    )}
+                  </Button>
+                }
+              />
+              <PopoverContent className="w-52 p-0" align="start">
+                <Command>
+                  <CommandInput placeholder="Search agent..." />
+                  <CommandList>
+                    <CommandEmpty>No agent found.</CommandEmpty>
+                    <CommandGroup>
+                      {activeAgents.map((a) => (
+                        <CommandItem
+                          key={a}
+                          value={a}
+                          data-checked={filterAgent === a || undefined}
+                          onSelect={() => {
+                            setFilterAgent(filterAgent === a ? null : a);
+                            setAgentOpen(false);
+                            setPage(0);
+                          }}
+                        >
+                          {a}
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          )}
+
+          {/* Active filter + clear */}
+          {hasFilters && (
+            <>
+              <span className="text-xs text-muted-foreground">
+                {filtered.length} of {sessions.length}
+              </span>
+              <Button
+                variant="ghost"
+                size="xs"
+                onClick={() => { setFilterAgent(null); setSearch(""); setPage(0); }}
+                data-testid="clear-filters"
+              >
+                <X className="h-3 w-3" />
+                Clear
+              </Button>
+            </>
+          )}
+
+          {/* Refresh */}
+          <button
+            onClick={() => refetch()}
+            disabled={isFetching}
+            data-testid="refresh-btn"
+            className="ml-auto inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50"
+          >
+            <RefreshCw className={`h-3 w-3 ${isFetching ? "animate-spin" : ""}`} />
+            Refresh
+          </button>
+        </div>
+      )}
+
+      {/* List */}
+      {filtered.length > 0 ? (
+        <div data-testid="sessions-list" className="mt-4 border border-border overflow-hidden">
+          {paged.map((session) => (
+            <Link
+              key={session.id}
+              href={`/projects/${id}/sessions/${session.id}`}
+              className="flex items-center border-b border-border last:border-0 hover:bg-secondary/30 transition-colors group"
+            >
+              <div className="flex-1 px-4 py-3 min-w-0">
+                <p className="text-sm font-medium truncate">
+                  {session.title || "Untitled session"}
+                </p>
+                <div className="mt-0.5 flex items-center gap-2">
+                  {session.agent && (
+                    <span className="rounded bg-secondary px-1.5 py-0.5 text-[10px] font-mono text-muted-foreground">
+                      {session.agent}
+                    </span>
+                  )}
+                  <span className="font-mono text-[10px] text-muted-foreground/50">
+                    {session.id}
+                  </span>
+                </div>
+              </div>
+              <div className="flex items-center gap-4 px-4 py-3 text-xs text-muted-foreground font-mono shrink-0">
+                <span>{session.messageCount} msgs</span>
+                <span className="text-muted-foreground/40">{timeAgo(session.updatedAt)}</span>
+              </div>
+              <div className="px-3">
+                <ChevronRight className="h-3.5 w-3.5 text-muted-foreground/30 group-hover:text-muted-foreground transition-colors" />
+              </div>
+            </Link>
+          ))}
+          {totalPages > 1 && (
+            <div className="flex items-center justify-between px-4 py-2.5 border-t border-border">
+              <span className="text-xs text-muted-foreground">
+                {page * PER_PAGE + 1}–{Math.min((page + 1) * PER_PAGE, filtered.length)} of {filtered.length}
+              </span>
+              <div className="flex items-center gap-1">
+                <button
+                  onClick={() => setPage((p) => Math.max(0, p - 1))}
+                  disabled={page === 0}
+                  className="px-2.5 py-1 text-xs text-muted-foreground hover:text-foreground border border-border transition-colors disabled:opacity-30 disabled:pointer-events-none"
+                >
+                  Prev
+                </button>
+                <button
+                  onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
+                  disabled={page >= totalPages - 1}
+                  className="px-2.5 py-1 text-xs text-muted-foreground hover:text-foreground border border-border transition-colors disabled:opacity-30 disabled:pointer-events-none"
+                >
+                  Next
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      ) : (
+        <div data-testid="sessions-empty" className="mt-4 border border-border p-8 text-center text-sm text-muted-foreground">
+          {search || hasFilters ? "No sessions matching your filters." : "No sessions yet. Start a conversation via the completions API."}
+        </div>
+      )}
+    </div>
+  );
+}

package/app/(dashboard)/projects/[id]/settings/page.tsx

@@ -0,0 +1,52 @@
+import { api } from "#/lib/api";
+import type { Project } from "#/lib/api";
+import { SettingsForm } from "#/components/dashboard/settings-form";
+import type { AutumnStatusResponse } from "#/components/dashboard/settings-form";
+
+/**
+ * Tenant data-plane URL. Mirrors the helper in connect-dialog.tsx so what
+ * the user sees on the Settings tab matches what they wire into their CLI
+ * / SDK / `curl` calls. Local dev gets the apex localhost so the dashboard
+ * stays usable without DNS.
+ */
+function tenantApiUrl(slug?: string): string {
+  if (!slug) return "—";
+  if (process.env.NEXT_PUBLIC_API_URL?.includes("localhost")) {
+    return `http://${slug}.polpo.localhost`;
+  }
+  return `https://${slug}.polpo.cloud`;
+}
+
+export default async function ProjectSettingsPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+
+  // Fetch project + Autumn integration status in parallel server-side. The
+  // integration status is hydrated into the dashboard's TanStack Query cache
+  // so the Integrations tab renders the connection state on first paint
+  // without flashing a "Loading…" spinner.
+  let project: Project | null = null;
+  let autumnStatus: AutumnStatusResponse | null = null;
+  try {
+    const [projectRes, autumnRes] = await Promise.all([
+      api<Project>(`/v1/projects/${id}`).catch(() => null),
+      api<{ ok: boolean; data: AutumnStatusResponse | null }>(
+        `/v1/integrations/${id}/autumn`,
+      ).catch(() => null),
+    ]);
+    project = projectRes;
+    autumnStatus = autumnRes?.data ?? null;
+  } catch {}
+
+  const apiEndpoint = tenantApiUrl(project?.slug);
+
+  return (
+    <SettingsForm
+      projectId={id}
+      projectName={project?.name ?? ""}
+      projectSlug={project?.slug ?? ""}
+      apiEndpoint={apiEndpoint}
+      initialSettings={project?.settings}
+      initialAutumnStatus={autumnStatus}
+    />
+  );
+}

package/app/(dashboard)/projects/[id]/skills/[name]/page.tsx

@@ -0,0 +1,65 @@
+import { Suspense } from "react";
+import { dataApi } from "#/lib/api";
+import { SkillDetailSkeleton } from "#/components/dashboard/skeletons";
+import SkillDetailView, { type LoadedSkill, type FileEntry } from "./view";
+
+/** Slim shape for the list-entry merge. Keep in sync with `SkillsListEntry`
+ *  in view.tsx; only the fields the detail view needs. */
+type SkillsListEntry = {
+  name: string;
+  assignedTo?: string[];
+  tags?: string[];
+  category?: string;
+};
+
+async function SkillData({ id, name }: { id: string; name: string }) {
+  let skill: LoadedSkill | null = null;
+  let files: FileEntry[] = [];
+  let skillsList: SkillsListEntry[] = [];
+
+  try {
+    // Three fetches in parallel — all three land in one round trip to
+    // the data plane. The skills list carries `assignedTo` / `tags` /
+    // `category` (via the SkillStore fast-path) that the /:name/content
+    // endpoint currently omits; we merge client-side.
+    const [skillRes, filesRes, skillsListRes] = await Promise.all([
+      dataApi<{ ok: boolean; data: LoadedSkill }>(
+        id,
+        `/v1/skills/${encodeURIComponent(name)}/content`,
+      ).catch(() => ({ ok: false, data: null as LoadedSkill | null })),
+      dataApi<{ ok: boolean; data: { entries: FileEntry[] } }>(
+        id,
+        `/v1/files/list?path=${encodeURIComponent(`.polpo/skills/${name}`)}`,
+      ).catch(() => ({ ok: false, data: { entries: [] as FileEntry[] } })),
+      dataApi<{ ok: boolean; data: SkillsListEntry[] }>(
+        id,
+        `/v1/skills`,
+      ).catch(() => ({ ok: false, data: [] as SkillsListEntry[] })),
+    ]);
+    skill = skillRes.data ?? null;
+    files = filesRes.data?.entries ?? [];
+    skillsList = skillsListRes.data ?? [];
+  } catch {}
+
+  return (
+    <SkillDetailView
+      initialSkill={skill}
+      initialFiles={files}
+      initialSkillsList={skillsList}
+    />
+  );
+}
+
+export default async function SkillDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string; name: string }>;
+}) {
+  const { id, name } = await params;
+
+  return (
+    <Suspense fallback={<SkillDetailSkeleton />}>
+      <SkillData id={id} name={name} />
+    </Suspense>
+  );
+}

package/app/(dashboard)/projects/[id]/skills/[name]/view.tsx

@@ -0,0 +1,227 @@
+"use client";
+
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useParams } from "next/navigation";
+import Link from "next/link";
+import { ArrowLeft, Users, Tag } from "lucide-react";
+import { usePolpoClient } from "#/lib/polpo-client";
+import { Markdown } from "#/components/dashboard/markdown";
+import { ManualRefreshButton } from "#/components/dashboard/manual-refresh-button";
+import { FileBrowser } from "#/components/dashboard/file-browser";
+
+export interface LoadedSkill {
+  name: string;
+  description: string;
+  content: string;
+  source: string;
+  path: string;
+  tags?: string[];
+  category?: string;
+  assignedTo?: string[];
+  allowedTools?: string[];
+}
+
+export interface FileEntry {
+  name: string;
+  type: "file" | "directory";
+  size?: number;
+  mimeType?: string;
+  modifiedAt?: string;
+}
+
+export interface SkillsListEntry {
+  name: string;
+  assignedTo?: string[];
+  tags?: string[];
+  category?: string;
+}
+
+export default function SkillDetailView({
+  initialSkill,
+  initialFiles,
+  initialSkillsList,
+}: {
+  initialSkill: LoadedSkill | null;
+  initialFiles: FileEntry[];
+  initialSkillsList: SkillsListEntry[];
+}) {
+  const { id, name } = useParams<{ id: string; name: string }>();
+
+  const [viewingFile, setViewingFile] = useState<string | null>(null);
+  const [viewingFileName, setViewingFileName] = useState<string | null>(null);
+
+  const polpo = usePolpoClient(id);
+  const { data: baseSkill, isFetching: skillFetching, refetch: refetchSkill } = useQuery({
+    queryKey: ["skill-detail", id, name],
+    queryFn: () => polpo.getSkillContent(name) as unknown as Promise<LoadedSkill>,
+    initialData: initialSkill ?? undefined,
+    // SKILL.md content changes rarely (manual edit of the file in
+    // the project). 5-minute stale window cuts refetch chatter
+    // during a debugging/reading session; tab focus still triggers
+    // a background revalidate once data is stale.
+    staleTime: 5 * 60 * 1000,
+  });
+
+  // The /content endpoint doesn't join agent assignments — pull them
+  // from the list endpoint (which does) and merge. Remove when
+  // @polpo-ai/server includes assignments in GET /:name/content.
+  const { data: skillsList, isFetching: skillsListFetching, refetch: refetchSkillsList } = useQuery({
+    queryKey: ["skills-with-assignments", id],
+    queryFn: () => polpo.getSkills() as unknown as Promise<SkillsListEntry[]>,
+    initialData: initialSkillsList,
+    // Assignments change when the user assigns/unassigns skills to
+    // agents — a more frequent operation than editing SKILL.md, so
+    // a tighter window (30s) keeps the pills reasonably fresh.
+    staleTime: 30 * 1000,
+  });
+  const listEntry = skillsList?.find((s) => s.name === name);
+  const skill: LoadedSkill | undefined = baseSkill
+    ? {
+        ...baseSkill,
+        assignedTo: listEntry?.assignedTo ?? baseSkill.assignedTo,
+        tags: listEntry?.tags ?? baseSkill.tags,
+        category: listEntry?.category ?? baseSkill.category,
+      }
+    : baseSkill;
+
+  // Load file content when a file is selected from the browser
+  const { data: filePreview, isFetching: filePreviewFetching, refetch: refetchFilePreview } = useQuery({
+    queryKey: ["file-preview", id, viewingFile],
+    queryFn: () => polpo.previewFile(viewingFile!),
+    enabled: !!viewingFile,
+  });
+
+  if (!skill) {
+    return (
+      <div className="mt-4 border border-border p-8 text-center text-sm text-muted-foreground">
+        Skill not found.
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {/* Back link */}
+      <Link
+        href={`/projects/${id}/skills`}
+        className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+      >
+        <ArrowLeft className="h-3 w-3" />
+        Skills
+      </Link>
+
+      {/* Header */}
+      <div className="mt-4 flex items-start justify-between gap-4">
+        <div>
+          <h2 className="text-lg font-bold">{skill.name}</h2>
+          <p className="mt-1 text-sm text-muted-foreground">{skill.description}</p>
+        </div>
+        <ManualRefreshButton
+          onRefresh={() => Promise.all([
+            refetchSkill(),
+            refetchSkillsList(),
+            viewingFile ? refetchFilePreview() : Promise.resolve(),
+          ])}
+          isRefreshing={skillFetching || skillsListFetching || filePreviewFetching}
+          className="mt-1 shrink-0"
+        />
+      </div>
+
+      {/* Metadata pills — user-meaningful info only (tags, assignments,
+          category, allowed tools). `source = "project"` is always true
+          on cloud so we drop it. */}
+      <div className="mt-4 flex flex-wrap gap-2">
+        {skill.assignedTo && skill.assignedTo.length > 0 && (
+          <span className="inline-flex items-center gap-1.5 rounded-md bg-secondary px-2.5 py-1 text-xs text-muted-foreground">
+            <Users className="h-3 w-3" />
+            {skill.assignedTo.join(", ")}
+          </span>
+        )}
+        {skill.category && (
+          <span className="inline-flex items-center gap-1.5 rounded-md bg-blue-500/10 text-blue-500 px-2.5 py-1 text-xs font-medium">
+            <Tag className="h-3 w-3" />
+            {skill.category}
+          </span>
+        )}
+        {skill.allowedTools && skill.allowedTools.length > 0 && (
+          <span className="rounded-md bg-secondary px-2.5 py-1 text-xs text-muted-foreground font-mono">
+            {skill.allowedTools.join(", ")}
+          </span>
+        )}
+      </div>
+
+      {/* Tags */}
+      {skill.tags && skill.tags.length > 0 && (
+        <div className="mt-3 flex flex-wrap gap-1.5">
+          {skill.tags.map((tag) => (
+            <span key={tag} className="rounded-full bg-muted px-2 py-0.5 text-[10px] text-muted-foreground">
+              {tag}
+            </span>
+          ))}
+        </div>
+      )}
+
+      {/* Two-column layout: Content (left) + Files (right) */}
+      <div className="mt-6 grid gap-6 lg:grid-cols-[1fr_380px]">
+        {/* Left: Content viewer */}
+        <div>
+          <div className="flex items-center justify-between mb-3">
+            <h3 className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+              {viewingFileName ?? "SKILL.md"}
+            </h3>
+            {viewingFile && (
+              <button
+                onClick={() => { setViewingFile(null); setViewingFileName(null); }}
+                className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+              >
+                Back to SKILL.md
+              </button>
+            )}
+          </div>
+          <div className="border border-border bg-card p-6 max-h-[calc(100vh-16rem)] overflow-auto scrollbar-thin">
+            {viewingFile && filePreview ? (
+              filePreview.type === "text" && filePreview.content ? (
+                filePreview.name.endsWith(".md") ? (
+                  <div className="prose prose-sm dark:prose-invert max-w-none">
+                    <Markdown content={filePreview.content} />
+                  </div>
+                ) : (
+                  <pre className="text-xs font-mono whitespace-pre-wrap break-words">{filePreview.content}</pre>
+                )
+              ) : (
+                <p className="text-sm text-muted-foreground">Preview not available for this file type.</p>
+              )
+            ) : (
+              <div className="prose prose-sm dark:prose-invert max-w-none">
+                <Markdown content={skill.content} />
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Right: File browser (sticky) */}
+        <div className="lg:sticky lg:top-8 lg:self-start">
+          <h3 className="text-xs font-medium uppercase tracking-wider text-muted-foreground mb-3">Files</h3>
+          <FileBrowser
+            projectId={id}
+            rootPath={`.polpo/skills/${name}`}
+            compact
+            initialEntries={initialFiles}
+            onFileSelect={(filePath, fileName) => {
+              // SKILL.md is the default view — clicking it in the browser
+              // just resets to the base content, no separate preview.
+              if (fileName === "SKILL.md") {
+                setViewingFile(null);
+                setViewingFileName(null);
+                return;
+              }
+              setViewingFile(filePath);
+              setViewingFileName(fileName);
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/app/(dashboard)/projects/[id]/skills/page.tsx

@@ -0,0 +1,31 @@
+import { Suspense } from "react";
+import { dataApi } from "#/lib/api";
+import { SkillsListSkeleton } from "#/components/dashboard/skeletons";
+import SkillsView, { type SkillInfo } from "./view";
+
+async function SkillsData({ id }: { id: string }) {
+  let skills: SkillInfo[] = [];
+  try {
+    const res = await dataApi<{ ok: boolean; data: SkillInfo[] }>(
+      id,
+      "/v1/skills",
+    );
+    skills = res.data ?? [];
+  } catch {}
+
+  return <SkillsView initialSkills={skills} />;
+}
+
+export default async function SkillsPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+
+  return (
+    <Suspense fallback={<SkillsListSkeleton />}>
+      <SkillsData id={id} />
+    </Suspense>
+  );
+}