@manta-eu/react 0.1.8 → 0.1.10

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

@@ -0,0 +1,148 @@
+import { humanPlural } from "@manta-eu/lib/humanize";
+import { isPresent } from "@manta-eu/lib/present";
+import { ChevronRight, Layers, TriangleAlert } from "lucide-react";
+import { useLiveContext, type EntityProperty, type LiveContextGroup } from "../hooks/useLiveContext";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "#components/collapsible/index";
+import { EmptyState } from "#components/empty-state/index";
+import { Skeleton } from "#components/skeleton/index";
+
+type LiveContextTabProps = { query?: string };
+
+export function LiveContextTab(props: LiveContextTabProps) {
+  const { query = "" } = props;
+  const { data: groups, isLoading, error } = useLiveContext();
+
+  if (isLoading) {
+    return <LiveContextSkeleton />;
+  }
+
+  if (error) {
+    return (
+      <EmptyState
+        icon={TriangleAlert}
+        iconClassName="text-error-foreground"
+        title="Failed to load Live Context"
+        description={error instanceof Error ? error.message : "An unexpected error occurred."}
+      />
+    );
+  }
+
+  if (!isPresent(groups)) {
+    return (
+      <EmptyState
+        icon={Layers}
+        title="No Live Context yet"
+        description='Live Context surfaces high-importance company memories and facts. Add company memories with importance "high" or "critical" to see them here.'
+      />
+    );
+  }
+
+  const parsedQuery = String(query).trim().toLowerCase();
+  const filtered = isPresent(parsedQuery)
+    ? groups.filter((g) => g.typeLabel.toLowerCase().includes(parsedQuery))
+    : groups;
+
+  return (
+    <div className="flex flex-col gap-6 max-w-3xl mx-auto">
+      {!isPresent(filtered) && (
+        <EmptyState icon={Layers} title="No groups match" description={`No groups found for "${query}".`} />
+      )}
+      {filtered.map((group) => (
+        <EntityGroupSection key={group.type} group={group} />
+      ))}
+    </div>
+  );
+}
+
+type EntityGroupSectionProps = {
+  group: LiveContextGroup;
+};
+
+function EntityGroupSection(props: EntityGroupSectionProps) {
+  const { group } = props;
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center gap-2">
+        <span className="typography-small-medium text-default-foreground">{group.typeLabel}</span>
+        <span className="inline-flex items-center rounded-full px-2 py-0.5 typography-tiny bg-faint text-muted-foreground">
+          {group.entities.length}
+        </span>
+        <span className="typography-tiny text-muted-foreground font-mono">{group.type}</span>
+      </div>
+      <div className="flex flex-col rounded-xl border border-muted-border bg-card overflow-hidden divide-y divide-muted-border">
+        {group.entities.map((entity) => (
+          <EntityCard key={entity.iri} compactedIri={entity.compactedIri} properties={entity.properties} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+type EntityCardProps = {
+  compactedIri: string;
+  properties: EntityProperty[];
+};
+
+function EntityCard(props: EntityCardProps) {
+  const { compactedIri, properties } = props;
+
+  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 font-mono text-default-foreground truncate">{compactedIri}</span>
+        <span className="ml-auto shrink-0 typography-tiny text-muted-foreground">
+          {properties.length} {humanPlural("property", properties.length)}
+        </span>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="border-t border-muted-border">
+          <table className="w-full text-left">
+            <tbody>
+              {properties.map((prop) => (
+                <tr key={prop.predicate} className="border-b border-muted-border last:border-0">
+                  <td className="px-4 py-2 align-top w-52 shrink-0">
+                    <span className="typography-tiny font-mono text-muted-foreground">{prop.predicate}</span>
+                  </td>
+                  <td className="px-4 py-2 align-top break-all">
+                    <span
+                      className={`typography-small ${prop.isUri ? "text-accent-foreground font-mono" : "text-default-foreground"}`}
+                    >
+                      {prop.value}
+                    </span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+function LiveContextSkeleton() {
+  return (
+    <div className="flex flex-col gap-6 max-w-3xl mx-auto">
+      {Array.from({ length: 3 }, (_, i) => (
+        <div key={`lc-skel-group-${i}`} className="flex flex-col gap-2">
+          <div className="flex items-center gap-2">
+            <Skeleton className="h-4 w-32 rounded-md" />
+            <Skeleton className="h-4 w-6 rounded-full" />
+          </div>
+          <div className="rounded-xl border border-muted-border overflow-hidden">
+            {Array.from({ length: i + 1 }, (_, j) => (
+              <div
+                key={`lc-skel-entity-${i}-${j}`}
+                className="flex items-center gap-2 px-4 py-3 border-b border-muted-border last:border-0"
+              >
+                <Skeleton className="size-3.5 rounded-sm" />
+                <Skeleton className="h-4 flex-1 rounded-md" />
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,27 @@
+import { Skeleton } from "#components/skeleton/index";
+import { TableSkeleton } from "#components/table-skeleton/index";
+
+const gridColsClassName = "grid-cols-[16fr_24fr_11fr_9fr_7fr_10fr_9fr_10fr_4fr]";
+
+export function LoadingSkeleton() {
+  return (
+    <TableSkeleton
+      gridColsClassName={gridColsClassName}
+      headerColumnCount={9}
+      rows={5}
+      renderRow={() => (
+        <>
+          <Skeleton className="h-4 w-3/4 rounded-md" />
+          <Skeleton className="h-4 w-5/6 rounded-md" />
+          <Skeleton className="h-5 w-3/4 rounded-full" />
+          <Skeleton className="h-5 w-2/3 rounded-full" />
+          <Skeleton className="size-5 rounded-md" />
+          <Skeleton className="h-4 w-3/4 rounded-md" />
+          <Skeleton className="h-4 w-2/3 rounded-md" />
+          <Skeleton className="h-4 w-3/4 rounded-md" />
+          <Skeleton className="size-4 rounded-md" />
+        </>
+      )}
+    />
+  );
+}

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

@@ -0,0 +1,400 @@
+import { GQLMemoryKind, type GQLMemorySchema } from "@manta-eu/client";
+import { isPresent } from "@manta-eu/lib/present";
+import type { Table } from "@tanstack/react-table";
+import { ChevronDown, X } from "lucide-react";
+import type { ReactNode } from "react";
+import { defaultColumnOrder, memoryColumnLabels } from "../hooks/useMemoryColumns";
+import type { ImportanceFilter, StatusFilterKey } from "../hooks/useMemoryTable";
+import { Button } from "#components/button/index";
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxTrigger,
+} from "#components/combobox/index";
+import {
+  Dropdown,
+  DropdownCheckboxItem,
+  DropdownContent,
+  DropdownGroup,
+  DropdownItem,
+  DropdownTrigger,
+} from "#components/dropdown/index";
+import { FilterChip, FilterSection, FilterSheet } from "#components/filter-sheet/index";
+import { Input } from "#components/input/index";
+import { TableColumnRearrangePopover } from "#components/table/index";
+
+export type KindFilter = "ALL" | GQLMemoryKind;
+export type SchemaFilter = "ALL" | "NONE" | string;
+
+type StatusFilterOption = {
+  id: string;
+  label: string;
+  active: boolean;
+  onChange: (value: boolean) => void;
+  title?: string;
+};
+
+const statusFilterConfig: { key: StatusFilterKey; label: string; title?: string }[] = [
+  { key: "autoCaptured", label: "Auto-captured" },
+  {
+    key: "hideStale",
+    label: "Still trusted",
+    title: "Within its trust horizon - says nothing about the validity window",
+  },
+  { key: "promotion", label: "Promotion candidates" },
+  { key: "deadWeight", label: "Dead weight", title: "Eligible for pre-loading but nothing has touched it in 90 days" },
+  { key: "unused", label: "Never used", title: "Eligible for pre-loading, but the agent has never drawn on it" },
+  {
+    key: "needsReview",
+    label: "Needs review",
+    title: "No longer trusted, or about to be - re-confirm it to keep it in context",
+  },
+];
+
+export const kindFilterOptions: { id: KindFilter; label: string }[] = [
+  { id: "ALL", label: "All kinds" },
+  { id: GQLMemoryKind.Preference, label: "Preference" },
+  { id: GQLMemoryKind.Fact, label: "Fact" },
+  { id: GQLMemoryKind.Objective, label: "Objective" },
+  { id: GQLMemoryKind.Context, label: "Context" },
+];
+
+const importanceFilterOptions: { id: ImportanceFilter; label: string }[] = [
+  { id: 0, label: "All importance" },
+  { id: 1, label: "Disabled" },
+  { id: 2, label: "Low" },
+  { id: 3, label: "Medium" },
+  { id: 4, label: "High" },
+  { id: 5, label: "Critical" },
+];
+
+type MemoriesFiltersProps<TData> = {
+  tabs?: ReactNode;
+  kindFilter: KindFilter;
+  onKindFilterChange: (kind: KindFilter) => void;
+  searchQuery: string;
+  onSearchQueryChange: (query: string) => void;
+  importanceFilter: ImportanceFilter;
+  onImportanceFilterChange: (importance: ImportanceFilter) => void;
+  table: Table<TData>;
+  columnLabels?: Record<string, string>;
+  columnDefaultOrder?: string[];
+  schemas?: GQLMemorySchema[];
+  schemaFilter?: SchemaFilter;
+  onSchemaFilterChange?: (iri: SchemaFilter) => void;
+  statusFilters?: Record<StatusFilterKey, boolean>;
+  onStatusFilterChange?: (key: StatusFilterKey, value: boolean) => void;
+  visibleStatusFilters?: StatusFilterKey[];
+};
+
+export function MemoriesFilters<TData>(props: MemoriesFiltersProps<TData>) {
+  const {
+    tabs,
+    kindFilter,
+    onKindFilterChange,
+    searchQuery,
+    onSearchQueryChange,
+    importanceFilter,
+    onImportanceFilterChange,
+    table,
+    columnLabels = memoryColumnLabels,
+    columnDefaultOrder = defaultColumnOrder,
+    schemas,
+    schemaFilter = "ALL",
+    onSchemaFilterChange,
+    statusFilters,
+    onStatusFilterChange,
+    visibleStatusFilters = [],
+  } = props;
+  const allKindsSelected = kindFilter === "ALL";
+  const allImportancesSelected = importanceFilter === 0;
+  const allSchemasSelected = schemaFilter === "ALL";
+  const selectedKindLabel = kindFilterOptions.find((o) => o.id === kindFilter)?.label;
+  const selectedSchemaLabel =
+    schemaFilter === "NONE" ? "No schema" : schemas?.find((s) => s.iri === schemaFilter)?.label;
+  const selectedImportanceOption = importanceFilterOptions.find((o) => o.id === importanceFilter);
+
+  const statusFilterOptions: StatusFilterOption[] = onStatusFilterChange
+    ? statusFilterConfig
+        .filter((cfg) => visibleStatusFilters.includes(cfg.key))
+        .map((cfg) => ({
+          id: cfg.key,
+          label: cfg.label,
+          active: !!statusFilters?.[cfg.key],
+          onChange: (value: boolean) => onStatusFilterChange(cfg.key, value),
+          ...(cfg.title ? { title: cfg.title } : {}),
+        }))
+    : [];
+  const activeStatusCount = statusFilterOptions.filter((option) => option.active).length;
+
+  const hasActiveFilters =
+    isPresent(searchQuery) ||
+    !allKindsSelected ||
+    !allImportancesSelected ||
+    !allSchemasSelected ||
+    activeStatusCount > 0;
+
+  function handleClearFilters() {
+    onSearchQueryChange("");
+    onKindFilterChange("ALL");
+    onImportanceFilterChange(0);
+    onSchemaFilterChange?.("ALL");
+    for (const option of statusFilterOptions) {
+      if (option.active) option.onChange(false);
+    }
+  }
+
+  const activeFilterCount =
+    (isPresent(searchQuery) ? 1 : 0) +
+    (allKindsSelected ? 0 : 1) +
+    (allImportancesSelected ? 0 : 1) +
+    (allSchemasSelected ? 0 : 1) +
+    activeStatusCount;
+
+  function filterControls() {
+    return (
+      <>
+        <Dropdown>
+          <DropdownTrigger asChild>
+            <Button variant="tertiary" size="base" rounded="lg">
+              <span>{allKindsSelected ? "Kind" : selectedKindLabel}</span>
+              <ChevronDown className="size-4" />
+            </Button>
+          </DropdownTrigger>
+          <DropdownContent align="start" className="w-44">
+            <DropdownGroup label="Filter by kind">
+              {kindFilterOptions.map((option) => (
+                <DropdownItem
+                  key={option.id}
+                  selected={option.id === kindFilter}
+                  onClick={() => onKindFilterChange(option.id)}
+                >
+                  {option.label}
+                </DropdownItem>
+              ))}
+            </DropdownGroup>
+          </DropdownContent>
+        </Dropdown>
+        {isPresent(schemas) && onSchemaFilterChange && (
+          <Combobox>
+            <ComboboxTrigger asChild>
+              <Button variant="tertiary" size="base" rounded="lg">
+                <span>{allSchemasSelected ? "Schema" : selectedSchemaLabel}</span>
+                <ChevronDown className="size-4" />
+              </Button>
+            </ComboboxTrigger>
+            <ComboboxContent align="start" className="w-52">
+              <ComboboxInput placeholder="Search schemas…" />
+              <ComboboxList>
+                <ComboboxEmpty>No schemas found</ComboboxEmpty>
+                <ComboboxItem
+                  value="All schemas"
+                  selected={allSchemasSelected}
+                  onSelect={() => onSchemaFilterChange("ALL")}
+                >
+                  All schemas
+                </ComboboxItem>
+                <ComboboxItem
+                  value="No schema"
+                  selected={schemaFilter === "NONE"}
+                  onSelect={() => onSchemaFilterChange("NONE")}
+                >
+                  No schema
+                </ComboboxItem>
+                {schemas.map((schema) => (
+                  <ComboboxItem
+                    key={schema.iri}
+                    value={schema.label}
+                    selected={schemaFilter === schema.iri}
+                    onSelect={() => onSchemaFilterChange(schema.iri)}
+                  >
+                    {schema.label}
+                  </ComboboxItem>
+                ))}
+              </ComboboxList>
+            </ComboboxContent>
+          </Combobox>
+        )}
+        <Dropdown>
+          <DropdownTrigger asChild>
+            <Button variant="tertiary" size="base" rounded="lg">
+              <span>{allImportancesSelected ? "Importance" : selectedImportanceOption?.label}</span>
+              <ChevronDown className="size-4" />
+            </Button>
+          </DropdownTrigger>
+          <DropdownContent align="start" className="w-44">
+            <DropdownGroup label="Filter by importance">
+              {importanceFilterOptions.map((option) => (
+                <DropdownItem
+                  key={option.id}
+                  selected={option.id === importanceFilter}
+                  onClick={() => onImportanceFilterChange(option.id)}
+                >
+                  {option.label}
+                </DropdownItem>
+              ))}
+            </DropdownGroup>
+          </DropdownContent>
+        </Dropdown>
+        {isPresent(statusFilterOptions) && (
+          <Dropdown>
+            <DropdownTrigger asChild>
+              <Button variant={activeStatusCount > 0 ? "secondary" : "tertiary"} size="base" rounded="lg">
+                <span>{activeStatusCount > 0 ? `Status (${activeStatusCount})` : "Status"}</span>
+                <ChevronDown className="size-4" />
+              </Button>
+            </DropdownTrigger>
+            <DropdownContent align="start" className="w-56">
+              <DropdownGroup label="Filter by status">
+                {statusFilterOptions.map((option) => (
+                  <DropdownCheckboxItem
+                    key={option.id}
+                    checked={option.active}
+                    onCheckedChange={option.onChange}
+                    {...(option.title ? { title: option.title } : {})}
+                  >
+                    {option.label}
+                  </DropdownCheckboxItem>
+                ))}
+              </DropdownGroup>
+            </DropdownContent>
+          </Dropdown>
+        )}
+        {hasActiveFilters && (
+          <Button variant="ghost" size="base" rounded="lg" onClick={handleClearFilters} icon={X}>
+            Clear filters
+          </Button>
+        )}
+      </>
+    );
+  }
+
+  const filterSheetContent = (
+    <>
+      <FilterSection title="Kind">
+        <Dropdown>
+          <DropdownTrigger asChild>
+            <Button variant="tertiary" size="base" rounded="lg" className="w-full justify-between">
+              <span>{selectedKindLabel}</span>
+              <ChevronDown className="size-4" />
+            </Button>
+          </DropdownTrigger>
+          <DropdownContent align="start" className="w-(--radix-dropdown-menu-trigger-width)">
+            <DropdownGroup label="Filter by kind">
+              {kindFilterOptions.map((option) => (
+                <DropdownItem
+                  key={option.id}
+                  selected={option.id === kindFilter}
+                  onClick={() => onKindFilterChange(option.id)}
+                >
+                  {option.label}
+                </DropdownItem>
+              ))}
+            </DropdownGroup>
+          </DropdownContent>
+        </Dropdown>
+      </FilterSection>
+      {isPresent(schemas) && onSchemaFilterChange && (
+        <FilterSection title="Schema">
+          <Dropdown>
+            <DropdownTrigger asChild>
+              <Button variant="tertiary" size="base" rounded="lg" className="w-full justify-between">
+                <span>{allSchemasSelected ? "All schemas" : selectedSchemaLabel}</span>
+                <ChevronDown className="size-4" />
+              </Button>
+            </DropdownTrigger>
+            <DropdownContent align="start" className="max-h-64 w-(--radix-dropdown-menu-trigger-width) overflow-y-auto">
+              <DropdownGroup label="Filter by schema">
+                <DropdownItem selected={allSchemasSelected} onClick={() => onSchemaFilterChange("ALL")}>
+                  All schemas
+                </DropdownItem>
+                <DropdownItem selected={schemaFilter === "NONE"} onClick={() => onSchemaFilterChange("NONE")}>
+                  No schema
+                </DropdownItem>
+                {schemas.map((schema) => (
+                  <DropdownItem
+                    key={schema.iri}
+                    selected={schemaFilter === schema.iri}
+                    onClick={() => onSchemaFilterChange(schema.iri)}
+                  >
+                    {schema.label}
+                  </DropdownItem>
+                ))}
+              </DropdownGroup>
+            </DropdownContent>
+          </Dropdown>
+        </FilterSection>
+      )}
+      <FilterSection title="Importance">
+        <Dropdown>
+          <DropdownTrigger asChild>
+            <Button variant="tertiary" size="base" rounded="lg" className="w-full justify-between">
+              <span>{selectedImportanceOption?.label}</span>
+              <ChevronDown className="size-4" />
+            </Button>
+          </DropdownTrigger>
+          <DropdownContent align="start" className="w-(--radix-dropdown-menu-trigger-width)">
+            <DropdownGroup label="Filter by importance">
+              {importanceFilterOptions.map((option) => (
+                <DropdownItem
+                  key={option.id}
+                  selected={option.id === importanceFilter}
+                  onClick={() => onImportanceFilterChange(option.id)}
+                >
+                  {option.label}
+                </DropdownItem>
+              ))}
+            </DropdownGroup>
+          </DropdownContent>
+        </Dropdown>
+      </FilterSection>
+      {isPresent(statusFilterOptions) && (
+        <FilterSection title="Status">
+          {statusFilterOptions.map((option) => (
+            <FilterChip
+              key={option.id}
+              selected={option.active}
+              label={option.label}
+              description={option.title}
+              onClick={() => option.onChange(!option.active)}
+            />
+          ))}
+        </FilterSection>
+      )}
+    </>
+  );
+
+  return (
+    <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 flex-wrap items-center gap-2 flex-1 min-w-0">
+        <Input
+          containerClassName="min-w-0 flex-1 sm:w-64 sm:flex-none"
+          type="search"
+          variant="search"
+          placeholder="Search memories..."
+          value={searchQuery}
+          onChange={(event) => onSearchQueryChange(event.target.value)}
+        />
+        <div className="sm:hidden">
+          <FilterSheet activeCount={activeFilterCount} onReset={handleClearFilters}>
+            {filterSheetContent}
+          </FilterSheet>
+        </div>
+        <div className="hidden sm:contents">{filterControls()}</div>
+        <div className="ml-auto hidden shrink-0 sm:block">
+          <TableColumnRearrangePopover
+            enableReset
+            table={table}
+            columnLabels={columnLabels}
+            defaultOrder={columnDefaultOrder}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}