@manta-eu/react 0.12.0 → 0.13.0

package/src/routes/memories/components/SchemasTab.tsx

@@ -1,142 +1,505 @@
-import { useMemorySchemasQuery, type GQLMemorySchema } from "@manta-eu/client";
-import { formatEntityName } from "@manta-eu/client/shared/rdf-namespaces";
-import { humanPlural } from "@manta-eu/lib/humanize";
+import {
+  GQLMemorySchemaCreator,
+  GQLMemorySchemaStatus,
+  GQLMemorySchemaTemplateStatus,
+  type GQLMemorySchemaFieldsFragment,
+} from "@manta-eu/client";
 import { isPresent } from "@manta-eu/lib/present";
-import { ChevronRight, Layers } from "lucide-react";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "#components/collapsible/index";
+import { useReactTable, type ColumnDef, type SortingState } from "@tanstack/react-table";
+import { format, formatDistanceToNow } from "date-fns";
+import {
+  Archive,
+  ArchiveRestore,
+  ChevronDown,
+  Eye,
+  FileCode2,
+  Layers,
+  MoreHorizontal,
+  Pencil,
+  Plus,
+  Trash2,
+  X,
+} from "lucide-react";
+import { useMemo, useState, type ReactNode } from "react";
+import { Link, useNavigate } from "react-router";
+import { memorySchemaEditPath, memorySchemaPath } from "../schemas/schema-route";
+import {
+  anyCount,
+  filterSchemas,
+  schemaCounts,
+  type CountFilter,
+  type SchemaCountFilters,
+  type SchemaCountKey,
+} from "../schemas/schema-table";
+import { archiveBlockedReason, deleteBlockedReason } from "../schemas/useSchemaLifecycle";
+import { Badge } from "#components/badge/index";
+import { Banner } from "#components/banner/index";
+import { Button } from "#components/button/index";
+import {
+  Dropdown,
+  DropdownContent,
+  DropdownGroup,
+  DropdownItem,
+  DropdownSeparator,
+  DropdownTrigger,
+} from "#components/dropdown/index";
 import { EmptyState } from "#components/empty-state/index";
+import { FilterSection, FilterSheet } from "#components/filter-sheet/index";
+import { Input } from "#components/input/index";
 import { Skeleton } from "#components/skeleton/index";
-import { useMantaClient } from "#providers/index";
-
-function shortDatatype(iri: string): string {
-  if (iri.endsWith("#string")) return "text";
-  if (iri.endsWith("#decimal")) return "decimal";
-  if (iri.endsWith("#integer")) return "integer";
-  if (iri.endsWith("#boolean")) return "boolean";
-  if (iri.endsWith("#anyURI")) return "url";
-  return formatEntityName(iri);
+import { createTableConfig, DataTable, useTableState } from "#components/table/index";
+import { TablePagination } from "#components/table-pagination/index";
+import { Tooltip, TooltipContent, TooltipTrigger } from "#components/tooltip/index";
+import { cn } from "#lib/utils";
+
+const countFilterConfig: Record<SchemaCountKey, { label: string; none: string; some: string }> = {
+  properties: { label: "Properties", none: "No properties", some: "Has properties" },
+  rules: { label: "Rules", none: "No rules", some: "Used by rules" },
+  memories: { label: "Memories", none: "No memories", some: "Has memories" },
+};
+
+const initialSorting: SortingState = [{ id: "label", desc: false }];
+
+const managerCountKeys: SchemaCountKey[] = ["properties", "rules", "memories"];
+const memberCountKeys: SchemaCountKey[] = ["properties"];
+
+function countFilterLabel(key: SchemaCountKey, filter: CountFilter): string {
+  const config = countFilterConfig[key];
+  if (filter === "NONE") return config.none;
+  if (filter === "SOME") return config.some;
+  return config.label;
 }
 
-type SchemaRowProps = { schema: GQLMemorySchema };
+type CountFilterDropdownProps = {
+  countKey: SchemaCountKey;
+  value: CountFilter;
+  onChange: (value: CountFilter) => void;
+  fullWidth?: boolean;
+};
 
-function SchemaRow(props: SchemaRowProps) {
+function CountFilterDropdown(props: CountFilterDropdownProps) {
+  const { countKey, value, onChange, fullWidth } = props;
+  const config = countFilterConfig[countKey];
+  const anyLabel = `Any ${config.label.toLowerCase()}`;
+  const options: { id: CountFilter; label: string }[] = [
+    { id: "ANY", label: anyLabel },
+    { id: "NONE", label: config.none },
+    { id: "SOME", label: config.some },
+  ];
+  return (
+    <Dropdown>
+      <DropdownTrigger asChild>
+        <Button
+          variant="tertiary"
+          size="base"
+          rounded="lg"
+          className={cn(fullWidth && "w-full justify-between")}
+          aria-label={`Filter by ${config.label.toLowerCase()}`}
+        >
+          <span>{fullWidth && value === "ANY" ? anyLabel : countFilterLabel(countKey, value)}</span>
+          <ChevronDown className="size-4" />
+        </Button>
+      </DropdownTrigger>
+      <DropdownContent align="start" className={fullWidth ? "w-(--radix-dropdown-menu-trigger-width)" : "w-44"}>
+        <DropdownGroup label={`Filter by ${config.label.toLowerCase()}`}>
+          {options.map((option) => (
+            <DropdownItem key={option.id} selected={option.id === value} onClick={() => onChange(option.id)}>
+              {option.label}
+            </DropdownItem>
+          ))}
+        </DropdownGroup>
+      </DropdownContent>
+    </Dropdown>
+  );
+}
+
+type SchemaNameCellProps = { schema: GQLMemorySchemaFieldsFragment; canManage: boolean };
+
+function SchemaNameCell(props: SchemaNameCellProps) {
+  const { schema, canManage } = props;
+  return (
+    <div className="flex min-w-48 flex-col gap-0.5 whitespace-normal">
+      <div className="flex flex-wrap items-center gap-1.5">
+        <Link
+          to={memorySchemaPath(schema.iri)}
+          onClick={(event) => event.stopPropagation()}
+          className="rounded-sm typography-caption-medium text-default-foreground outline-none hover:underline focus-visible:ring-2 focus-visible:ring-active-border/50"
+        >
+          {schema.label}
+        </Link>
+        {schema.status === GQLMemorySchemaStatus.Archived && (
+          <Badge variant="secondary" size="sm">
+            Archived
+          </Badge>
+        )}
+        {canManage && schema.templateStatus === GQLMemorySchemaTemplateStatus.Updated && (
+          <Badge variant="info" size="sm">
+            Default updated
+          </Badge>
+        )}
+        {!schema.extractionEnabled && schema.status === GQLMemorySchemaStatus.Active && (
+          <Badge variant="copy" size="sm">
+            Manual only
+          </Badge>
+        )}
+      </div>
+      {schema.description && (
+        <span className="line-clamp-1 typography-tiny text-muted-foreground">{schema.description}</span>
+      )}
+    </div>
+  );
+}
+
+const creatorLabels: Record<GQLMemorySchemaCreator, string> = {
+  [GQLMemorySchemaCreator.Manta]: "Manta",
+  [GQLMemorySchemaCreator.CurrentUser]: "You",
+  [GQLMemorySchemaCreator.AnotherUser]: "Another user",
+};
+
+type UpdatedCellProps = { schema: GQLMemorySchemaFieldsFragment };
+
+function UpdatedCell(props: UpdatedCellProps) {
   const { schema } = props;
+  const changedAt = schema.updatedAt ?? schema.createdAt;
+  if (!changedAt) return <span className="typography-small text-muted-foreground">—</span>;
+  const updated = (
+    <span className="typography-small whitespace-nowrap text-muted-foreground">
+      {formatDistanceToNow(new Date(changedAt), { addSuffix: true })}
+    </span>
+  );
+  if (!schema.createdAt) return updated;
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{updated}</TooltipTrigger>
+      <TooltipContent>Created {format(new Date(schema.createdAt), "MMM d, yyyy")}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+export type SchemaRowActions = {
+  onWriteRule?: (schema: GQLMemorySchemaFieldsFragment) => void;
+  onArchive?: (schema: GQLMemorySchemaFieldsFragment) => void;
+  onRestore?: (schema: GQLMemorySchemaFieldsFragment) => void;
+  onDelete?: (schema: GQLMemorySchemaFieldsFragment) => void;
+};
+
+type GuardedDropdownItemProps = {
+  icon: ReactNode;
+  blocked: string | null;
+  onClick: () => void;
+  children: string;
+};
+
+function GuardedDropdownItem(props: GuardedDropdownItemProps) {
+  const { icon, blocked, onClick, children } = props;
+  if (blocked === null) {
+    return (
+      <DropdownItem icon={icon} onClick={onClick}>
+        {children}
+      </DropdownItem>
+    );
+  }
   return (
-    <Collapsible>
-      <CollapsibleTrigger className="group flex w-full items-center gap-2 px-4 py-3 text-left hover:bg-faint transition-colors">
-        <ChevronRight className="size-3.5 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" />
-        <span className="typography-small-medium text-default-foreground truncate">{schema.label}</span>
-        <span className="ml-auto shrink-0 typography-tiny text-muted-foreground">
-          {schema.properties.length} {humanPlural("property", schema.properties.length)}
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span className="block">
+          <DropdownItem icon={icon} disabled>
+            {children}
+          </DropdownItem>
         </span>
-      </CollapsibleTrigger>
-      <CollapsibleContent>
-        <div className="border-t border-muted-border">
-          {schema.description && (
-            <p className="px-4 py-3 typography-small text-muted-foreground border-b border-muted-border">
-              {schema.description}
-            </p>
-          )}
-          {isPresent(schema.properties) && (
-            <table className="w-full table-fixed text-left">
-              <colgroup>
-                <col className="w-48" />
-                <col className="w-20" />
-                <col className="w-24" />
-                <col />
-              </colgroup>
-              <tbody>
-                {schema.properties.map((prop) => (
-                  <tr key={prop.path} className="border-b border-muted-border last:border-0">
-                    <td className="px-4 py-2.5 align-top">
-                      <div className="flex flex-col gap-0.5">
-                        <span className="typography-small-medium text-default-foreground">{prop.label}</span>
-                        <span className="typography-tiny font-mono text-muted-foreground break-all">{prop.path}</span>
-                      </div>
-                    </td>
-                    <td className="px-4 py-2.5 align-top">
-                      <span className="typography-tiny text-muted-foreground">{shortDatatype(prop.dataType)}</span>
-                    </td>
-                    <td className="px-4 py-2.5 align-top">
-                      {prop.required ? (
-                        <span className="typography-tiny rounded-full bg-accent px-2 py-0.5 text-muted-foreground">
-                          required
-                        </span>
-                      ) : (
-                        <span className="typography-tiny rounded-full bg-muted px-2 py-0.5 text-muted-foreground">
-                          optional
-                        </span>
-                      )}
-                    </td>
-                    <td className="px-4 py-2.5 align-top">
-                      {isPresent(prop.allowedValues) && (
-                        <div className="flex flex-wrap gap-1">
-                          {prop.allowedValues.map((val) => (
-                            <span key={val} className="typography-tiny rounded-full bg-muted px-2 py-0.5">
-                              {val}
-                            </span>
-                          ))}
-                        </div>
-                      )}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          )}
-        </div>
-      </CollapsibleContent>
-    </Collapsible>
+      </TooltipTrigger>
+      <TooltipContent side="left" className="max-w-xs">
+        {blocked}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+type SchemaActionsProps = SchemaRowActions & { schema: GQLMemorySchemaFieldsFragment; ruleCount: number | null };
+
+function SchemaActions(props: SchemaActionsProps) {
+  const { schema, ruleCount, onWriteRule, onArchive, onRestore, onDelete } = props;
+  const archived = schema.status === GQLMemorySchemaStatus.Archived;
+  const archiveBlocked = archiveBlockedReason(ruleCount);
+  const deleteBlocked = deleteBlockedReason(schema.memoryCount, ruleCount);
+  return (
+    <div className="text-right" onClick={(event) => event.stopPropagation()}>
+      <Dropdown>
+        <DropdownTrigger asChild>
+          <Button variant="tertiary" iconOnly icon={MoreHorizontal} aria-label={`Actions for ${schema.label}`} />
+        </DropdownTrigger>
+        <DropdownContent align="end" className="w-48">
+          <DropdownGroup>
+            <DropdownItem asChild>
+              <Link to={memorySchemaPath(schema.iri)}>
+                <span className="flex size-5 shrink-0 items-center justify-center">
+                  <Eye className="size-4" />
+                </span>
+                View
+              </Link>
+            </DropdownItem>
+            <DropdownItem asChild>
+              <Link to={memorySchemaEditPath(schema.iri)}>
+                <span className="flex size-5 shrink-0 items-center justify-center">
+                  <Pencil className="size-4" />
+                </span>
+                Edit
+              </Link>
+            </DropdownItem>
+            {!archived && onWriteRule && (
+              <DropdownItem icon={<FileCode2 className="size-4" />} onClick={() => onWriteRule(schema)}>
+                Write rule
+              </DropdownItem>
+            )}
+          </DropdownGroup>
+          <DropdownSeparator />
+          <DropdownGroup>
+            {archived
+              ? onRestore && (
+                  <DropdownItem icon={<ArchiveRestore className="size-4" />} onClick={() => onRestore(schema)}>
+                    Restore
+                  </DropdownItem>
+                )
+              : onArchive && (
+                  <GuardedDropdownItem
+                    icon={<Archive className="size-4" />}
+                    blocked={archiveBlocked}
+                    onClick={() => onArchive(schema)}
+                  >
+                    Archive
+                  </GuardedDropdownItem>
+                )}
+            {onDelete && (
+              <GuardedDropdownItem
+                icon={<Trash2 className="size-4" />}
+                blocked={deleteBlocked}
+                onClick={() => onDelete(schema)}
+              >
+                Delete
+              </GuardedDropdownItem>
+            )}
+          </DropdownGroup>
+        </DropdownContent>
+      </Dropdown>
+    </div>
   );
 }
 
-type SchemasTabProps = { query?: string };
+function countColumn(
+  key: SchemaCountKey,
+  ruleCounts: ReadonlyMap<string, number> | undefined,
+): ColumnDef<GQLMemorySchemaFieldsFragment> {
+  return {
+    id: key,
+    accessorFn: (schema) => schemaCounts(schema, ruleCounts)[key] ?? undefined,
+    header: countFilterConfig[key].label,
+    enableSorting: true,
+    sortUndefined: "last",
+    meta: { type: "number" },
+    cell: ({ row }) => <span>{schemaCounts(row.original, ruleCounts)[key] ?? "—"}</span>,
+  };
+}
+
+export type SchemasTabProps = SchemaRowActions & {
+  tabs?: ReactNode;
+  schemas: GQLMemorySchemaFieldsFragment[];
+  query?: string;
+  onQueryChange?: (query: string) => void;
+  isLoading: boolean;
+  errorMessage?: string | null;
+  canManage: boolean;
+  ruleCounts?: ReadonlyMap<string, number>;
+  onCreate?: () => void;
+};
 
 export function SchemasTab(props: SchemasTabProps) {
-  const { query = "" } = props;
-  const { mantaClient } = useMantaClient();
-  const { data, isLoading } = useMemorySchemasQuery(mantaClient);
-  const schemas = data?.memorySchemas.schemas ?? [];
+  const {
+    tabs,
+    schemas,
+    query = "",
+    onQueryChange,
+    isLoading,
+    errorMessage,
+    canManage,
+    ruleCounts,
+    onCreate,
+    onWriteRule,
+    onArchive,
+    onRestore,
+    onDelete,
+  } = props;
+  const navigate = useNavigate();
+  const [countFilters, setCountFilters] = useState<SchemaCountFilters>(anyCount);
+  const countKeys = canManage ? managerCountKeys : memberCountKeys;
+
+  const filtered = useMemo(
+    () => filterSchemas(schemas, query, countFilters, ruleCounts),
+    [schemas, query, countFilters, ruleCounts],
+  );
+
+  const columns = useMemo<ColumnDef<GQLMemorySchemaFieldsFragment>[]>(
+    () => [
+      {
+        id: "label",
+        accessorFn: (schema) => schema.label.toLowerCase(),
+        header: "Schema",
+        enableSorting: true,
+        meta: { wide: true },
+        cell: ({ row }) => <SchemaNameCell schema={row.original} canManage={canManage} />,
+      },
+      ...countKeys.map((key) => countColumn(key, ruleCounts)),
+      {
+        id: "createdBy",
+        accessorFn: (schema) => creatorLabels[schema.createdBy],
+        header: "Created by",
+        enableSorting: true,
+        cell: ({ row }) => (
+          <span className="typography-small whitespace-nowrap text-muted-foreground">
+            {creatorLabels[row.original.createdBy]}
+          </span>
+        ),
+      },
+      {
+        id: "updatedAt",
+        accessorFn: (schema) => schema.updatedAt ?? schema.createdAt ?? undefined,
+        header: "Updated",
+        enableSorting: true,
+        sortUndefined: "last",
+        cell: ({ row }) => <UpdatedCell schema={row.original} />,
+      },
+      ...(canManage
+        ? [
+            {
+              id: "actions",
+              enableSorting: false,
+              cell: ({ row }) => (
+                <SchemaActions
+                  schema={row.original}
+                  ruleCount={schemaCounts(row.original, ruleCounts).rules}
+                  onWriteRule={onWriteRule}
+                  onArchive={onArchive}
+                  onRestore={onRestore}
+                  onDelete={onDelete}
+                />
+              ),
+            } satisfies ColumnDef<GQLMemorySchemaFieldsFragment>,
+          ]
+        : []),
+    ],
+    [canManage, countKeys, ruleCounts, onWriteRule, onArchive, onRestore, onDelete],
+  );
+
+  const { sorting, setSorting, pagination, setPagination } = useTableState("memory-schemas", initialSorting, {
+    useLocalState: true,
+    defaultPageSize: 12,
+  });
+
+  const table = useReactTable(
+    createTableConfig({ data: filtered, columns, sorting, setSorting, pagination, setPagination }),
+  );
+
+  const activeCountFilters = countKeys.filter((key) => countFilters[key] !== "ANY").length;
+  const activeFilterCount = activeCountFilters + (isPresent(query) ? 1 : 0);
+
+  function setCountFilter(key: SchemaCountKey, value: CountFilter) {
+    setCountFilters((previous) => ({ ...previous, [key]: value }));
+  }
 
-  const filtered = query.trim() ? schemas.filter((s) => s.label.toLowerCase().includes(query.toLowerCase())) : schemas;
+  function clearFilters() {
+    onQueryChange?.("");
+    setCountFilters(anyCount);
+  }
 
   return (
-    <div className="flex flex-col gap-3">
-      {isLoading && (
-        <div className="flex flex-col w-full max-w-3xl mx-auto rounded-xl border border-muted-border overflow-hidden divide-y divide-muted-border">
-          {[0, 1, 2].map((i) => (
-            <div key={i} className="flex items-center gap-2 px-4 py-3">
-              <Skeleton className="size-3.5 rounded-sm" />
-              <Skeleton className="h-4 w-40 rounded-md" />
-              <Skeleton className="ml-auto h-4 w-16 rounded-md" />
+    <>
+      <div className="shrink-0 border-b border-muted-border px-5 py-3">
+        <div className="flex min-w-0 flex-col gap-3 3xl:flex-row 3xl:items-center">
+          {isPresent(tabs) && <div className="min-w-0 3xl:shrink">{tabs}</div>}
+          <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
+            <Input
+              containerClassName="min-w-0 flex-1 sm:w-64 sm:flex-none"
+              type="search"
+              variant="search"
+              placeholder="Search schemas..."
+              value={query}
+              onChange={(event) => onQueryChange?.(event.target.value)}
+            />
+            <div className="sm:hidden">
+              <FilterSheet activeCount={activeFilterCount} onReset={clearFilters}>
+                {countKeys.map((key) => (
+                  <FilterSection key={key} title={countFilterConfig[key].label}>
+                    <CountFilterDropdown
+                      countKey={key}
+                      value={countFilters[key]}
+                      onChange={(value) => setCountFilter(key, value)}
+                      fullWidth
+                    />
+                  </FilterSection>
+                ))}
+              </FilterSheet>
             </div>
-          ))}
+            <div className="hidden sm:contents">
+              {countKeys.map((key) => (
+                <CountFilterDropdown
+                  key={key}
+                  countKey={key}
+                  value={countFilters[key]}
+                  onChange={(value) => setCountFilter(key, value)}
+                />
+              ))}
+              {activeFilterCount > 0 && (
+                <Button variant="ghost" size="base" rounded="lg" onClick={clearFilters} icon={X}>
+                  Clear filters
+                </Button>
+              )}
+            </div>
+          </div>
         </div>
-      )}
+      </div>
 
-      {!isLoading && !isPresent(schemas) && (
-        <div className="flex flex-1 items-center justify-center">
-          <EmptyState
-            icon={Layers}
-            title="No schemas defined"
-            description="Memory schemas define structured properties for typed memories."
-          />
-        </div>
-      )}
+      <div className="flex-1 overflow-auto p-4">
+        {errorMessage && <Banner label={errorMessage} />}
 
-      {!isLoading && isPresent(schemas) && !isPresent(filtered) && (
-        <div className="flex flex-1 items-center justify-center">
-          <EmptyState icon={Layers} title="No schemas match" description={`No schemas found for "${query}".`} />
-        </div>
-      )}
+        {isLoading && (
+          <div className="flex flex-col divide-y divide-muted-border overflow-hidden rounded-xl border border-muted-border">
+            {[0, 1, 2].map((i) => (
+              <div key={i} className="flex items-center gap-2 px-4 py-3">
+                <Skeleton className="h-4 w-40 rounded-md" />
+                <Skeleton className="ml-auto h-4 w-16 rounded-md" />
+              </div>
+            ))}
+          </div>
+        )}
 
-      {!isLoading && isPresent(filtered) && (
-        <div className="w-full max-w-3xl mx-auto rounded-xl border border-muted-border bg-card overflow-hidden divide-y divide-muted-border">
-          {filtered.map((schema) => (
-            <SchemaRow key={schema.iri} schema={schema} />
-          ))}
-        </div>
-      )}
-    </div>
+        {!isLoading && !errorMessage && !isPresent(schemas) && (
+          <div className="flex h-full items-center justify-center">
+            <EmptyState
+              icon={Layers}
+              title="No schemas yet"
+              description="A schema gives memories of one type their own fields, so the agent records them consistently."
+            >
+              {canManage && onCreate && (
+                <Button icon={Plus} onClick={onCreate}>
+                  New schema
+                </Button>
+              )}
+            </EmptyState>
+          </div>
+        )}
+
+        {!isLoading && isPresent(schemas) && (
+          <section aria-label="Memory schemas" className="flex flex-col gap-3">
+            <div className="overflow-hidden rounded-xl border border-muted-border bg-card">
+              <DataTable
+                table={table}
+                noResultsMessage="No schemas match these filters."
+                onRowClick={(row) => void navigate(memorySchemaPath(row.original.iri))}
+              />
+            </div>
+            <TablePagination table={table} total={filtered.length} />
+          </section>
+        )}
+      </div>
+    </>
   );
 }

package/src/routes/memories/components/badges.tsx

@@ -8,7 +8,7 @@ import {
 } from "@manta-eu/client/shared/memory-preload-gate";
 import { formatEntityName } from "@manta-eu/client/shared/rdf-namespaces";
 import { isPresent } from "@manta-eu/lib/present";
-import { CopyCheck, Link2, Quote } from "lucide-react";
+import { CopyCheck, Link2, Quote, Sparkles } from "lucide-react";
 import { match, P } from "ts-pattern";
 import { unconfirmedHorizonLabel, type MemoryWindowState } from "../expiry-utils";
 import { Badge } from "#components/badge/index";
@@ -102,17 +102,29 @@ export function KindBadge(props: KindBadgeProps) {
   );
 }
 
+export function autoAssignedNote(memory: { schemaAssignment?: { confidence?: number | null } | null }): string | null {
+  const assignment = memory.schemaAssignment;
+  if (!assignment) return null;
+  return assignment.confidence == null
+    ? "Manta chose this schema automatically"
+    : `Manta chose this schema automatically (${Math.round(assignment.confidence * 100)}% sure)`;
+}
+
 export type SchemaBadgeProps = {
   label?: string | null;
+  autoAssigned?: boolean;
+  filledCount?: number;
 };
 
 export function SchemaBadge(props: SchemaBadgeProps) {
-  const { label } = props;
+  const { label, autoAssigned = false, filledCount } = props;
   if (!label) return null;
 
   return (
-    <Badge size="sm" variant="secondary" className="max-w-[28ch] truncate" title={label}>
-      {label}
+    <Badge size="sm" variant="secondary" className="max-w-[28ch]" title={filledCount ? undefined : label}>
+      {autoAssigned && <Sparkles role="img" aria-label="Assigned automatically" />}
+      <span className="min-w-0 truncate">{label}</span>
+      {filledCount ? <span className="shrink-0 text-muted-foreground">({filledCount})</span> : null}
     </Badge>
   );
 }