Initialize governed Views module

webui/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@govoplan/views-webui",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    },
+    "./styles/views.css": "./src/styles/views.css"
+  },
+  "peerDependencies": {
+    "@govoplan/core-webui": "^0.1.14",
+    "lucide-react": "^1.23.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.1.1"
+  },
+  "peerDependenciesMeta": {
+    "@govoplan/core-webui": {
+      "optional": true
+    }
+  }
+}
+

webui/src/api/views.ts

@@ -0,0 +1,280 @@
+import {
+  apiFetch,
+  apiPath,
+  type ApiSettings,
+  type EffectiveViewProjection
+} from "@govoplan/core-webui";
+
+export type ViewScopeType = "system" | "tenant";
+export type ViewAssignmentScopeType = "system" | "tenant" | "group" | "user";
+export type ViewAssignmentMode = "available" | "default" | "required";
+
+export type ViewRevision = {
+  id: string;
+  definition_id: string;
+  revision: number;
+  surface_contract_version: string;
+  visible_surface_ids: string[];
+  content_hash: string;
+  created_by?: string | null;
+  created_at: string;
+};
+
+export type ViewDefinition = {
+  id: string;
+  tenant_id?: string | null;
+  scope_type: ViewScopeType;
+  scope_id?: string | null;
+  definition_key: string;
+  name: string;
+  description?: string | null;
+  status: "draft" | "published" | "archived";
+  current_revision: number;
+  latest_revision: ViewRevision;
+  published_revision?: ViewRevision | null;
+  readonly: boolean;
+  stale_surface_ids: string[];
+  created_by?: string | null;
+  updated_by?: string | null;
+  created_at: string;
+  updated_at: string;
+};
+
+export type ViewAssignment = {
+  id: string;
+  tenant_id?: string | null;
+  scope_type: ViewAssignmentScopeType;
+  scope_id?: string | null;
+  definition_id: string;
+  revision_id?: string | null;
+  mode: ViewAssignmentMode;
+  priority: number;
+  is_active: boolean;
+  metadata: Record<string, unknown>;
+  created_by?: string | null;
+  updated_by?: string | null;
+  created_at: string;
+  updated_at: string;
+};
+
+type EffectiveViewApiResponse = {
+  active_view_id?: string | null;
+  active_revision_id?: string | null;
+  active_view_name?: string | null;
+  visible_surface_ids: string[];
+  locked: boolean;
+  available_views: Array<{
+    id: string;
+    name: string;
+    description?: string | null;
+    revision_id: string;
+  }>;
+  provenance: Array<{
+    source: string;
+    scope_type?: string | null;
+    scope_id?: string | null;
+    detail?: string | null;
+  }>;
+  diagnostics?: Array<{
+    severity: "warning" | "error";
+    code: string;
+    message: string;
+    surface_ids: string[];
+  }>;
+};
+
+function jsonBody(payload: unknown): RequestInit {
+  return {
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload)
+  };
+}
+
+function projection(response: EffectiveViewApiResponse): EffectiveViewProjection {
+  return {
+    activeViewId: response.active_view_id ?? null,
+    activeRevisionId: response.active_revision_id ?? null,
+    activeViewName: response.active_view_name ?? null,
+    visibleSurfaceIds: response.visible_surface_ids,
+    locked: response.locked,
+    availableViews: response.available_views.map((view) => ({
+      id: view.id,
+      name: view.name,
+      description: view.description,
+      revisionId: view.revision_id
+    })),
+    provenance: response.provenance.map((item) => ({
+      source: item.source,
+      scopeType: item.scope_type,
+      scopeId: item.scope_id,
+      detail: item.detail
+    })),
+    diagnostics: (response.diagnostics ?? []).map((item) => ({
+      severity: item.severity,
+      code: item.code,
+      message: item.message,
+      surfaceIds: item.surface_ids
+    }))
+  };
+}
+
+export async function fetchEffectiveView(
+  settings: ApiSettings
+): Promise<EffectiveViewProjection> {
+  return projection(
+    await apiFetch<EffectiveViewApiResponse>(
+      settings,
+      "/api/v1/views/effective",
+      { cache: "no-store" }
+    )
+  );
+}
+
+export async function selectEffectiveView(
+  settings: ApiSettings,
+  viewId: string | null
+): Promise<EffectiveViewProjection> {
+  return projection(
+    await apiFetch<EffectiveViewApiResponse>(
+      settings,
+      "/api/v1/views/selection",
+      {
+        method: "PUT",
+        ...jsonBody({ view_id: viewId })
+      }
+    )
+  );
+}
+
+export async function fetchViewDefinitions(
+  settings: ApiSettings,
+  scopeType: ViewScopeType
+): Promise<ViewDefinition[]> {
+  const response = await apiFetch<{ definitions: ViewDefinition[] }>(
+    settings,
+    apiPath("/api/v1/views/definitions", {
+      scope_type: scopeType,
+      include_inherited: scopeType === "tenant"
+    })
+  );
+  return response.definitions;
+}
+
+export function createViewDefinition(
+  settings: ApiSettings,
+  payload: {
+    scope_type: ViewScopeType;
+    name: string;
+    description?: string | null;
+    visible_surface_ids: string[];
+  }
+): Promise<ViewDefinition> {
+  return apiFetch(settings, "/api/v1/views/definitions", {
+    method: "POST",
+    ...jsonBody(payload)
+  });
+}
+
+export function updateViewDefinition(
+  settings: ApiSettings,
+  definitionId: string,
+  payload: { name: string; description?: string | null }
+): Promise<ViewDefinition> {
+  return apiFetch(settings, `/api/v1/views/definitions/${definitionId}`, {
+    method: "PATCH",
+    ...jsonBody(payload)
+  });
+}
+
+export function createViewRevision(
+  settings: ApiSettings,
+  definitionId: string,
+  visibleSurfaceIds: string[]
+): Promise<ViewDefinition> {
+  return apiFetch(
+    settings,
+    `/api/v1/views/definitions/${definitionId}/revisions`,
+    {
+      method: "POST",
+      ...jsonBody({ visible_surface_ids: visibleSurfaceIds })
+    }
+  );
+}
+
+export function publishViewRevision(
+  settings: ApiSettings,
+  definitionId: string,
+  revisionId: string
+): Promise<ViewDefinition> {
+  return apiFetch(
+    settings,
+    `/api/v1/views/definitions/${definitionId}/revisions/${revisionId}/publish`,
+    { method: "POST" }
+  );
+}
+
+export function archiveViewDefinition(
+  settings: ApiSettings,
+  definitionId: string
+): Promise<ViewDefinition> {
+  return apiFetch(settings, `/api/v1/views/definitions/${definitionId}`, {
+    method: "DELETE"
+  });
+}
+
+export async function fetchViewAssignments(
+  settings: ApiSettings,
+  scopeType: ViewScopeType
+): Promise<ViewAssignment[]> {
+  const response = await apiFetch<{ assignments: ViewAssignment[] }>(
+    settings,
+    apiPath("/api/v1/views/assignments", {
+      scope_type: scopeType,
+      include_inherited: scopeType === "tenant"
+    })
+  );
+  return response.assignments;
+}
+
+export function createViewAssignment(
+  settings: ApiSettings,
+  payload: {
+    scope_type: ViewAssignmentScopeType;
+    scope_id?: string | null;
+    definition_id: string;
+    revision_id?: string | null;
+    mode: ViewAssignmentMode;
+    priority: number;
+    is_active: boolean;
+  }
+): Promise<ViewAssignment> {
+  return apiFetch(settings, "/api/v1/views/assignments", {
+    method: "POST",
+    ...jsonBody(payload)
+  });
+}
+
+export function updateViewAssignment(
+  settings: ApiSettings,
+  assignmentId: string,
+  payload: {
+    revision_id?: string | null;
+    mode?: ViewAssignmentMode;
+    priority?: number;
+    is_active?: boolean;
+  }
+): Promise<ViewAssignment> {
+  return apiFetch(settings, `/api/v1/views/assignments/${assignmentId}`, {
+    method: "PATCH",
+    ...jsonBody(payload)
+  });
+}
+
+export function deleteViewAssignment(
+  settings: ApiSettings,
+  assignmentId: string
+): Promise<void> {
+  return apiFetch(settings, `/api/v1/views/assignments/${assignmentId}`, {
+    method: "DELETE"
+  });
+}

webui/src/components/ViewSelector.tsx

@@ -0,0 +1,70 @@
+import { Eye, LockKeyhole } from "lucide-react";
+import { useState } from "react";
+import {
+  dispatchPlatformViewChanged,
+  useUnsavedChanges,
+  type ViewSelectorProps
+} from "@govoplan/core-webui";
+import { selectEffectiveView } from "../api/views";
+
+
+export default function ViewSelector({
+  settings,
+  projection
+}: ViewSelectorProps) {
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const { requestNavigation } = useUnsavedChanges();
+  const options = projection?.availableViews ?? [];
+
+  if (!projection?.activeViewId && options.length === 0) return null;
+
+  async function performSelect(viewId: string) {
+    setBusy(true);
+    setError("");
+    try {
+      await selectEffectiveView(settings, viewId || null);
+      dispatchPlatformViewChanged();
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : "View selection failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  function select(viewId: string) {
+    requestNavigation(() => {
+      void performSelect(viewId);
+    });
+  }
+
+  const locked = Boolean(projection?.locked);
+  const diagnostic = projection?.diagnostics.find((item) => item.severity === "error")
+    ?? projection?.diagnostics[0];
+  const title = error || diagnostic?.message || (
+    locked
+      ? "This View is required by an administrator."
+      : "Choose which parts of GovOPlaN are shown."
+  );
+
+  return (
+    <label className="titlebar-view-selector" title={title}>
+      {locked
+        ? <LockKeyhole size={16} aria-hidden="true" />
+        : <Eye size={16} aria-hidden="true" />}
+      <span className="sr-only">Current View</span>
+      <select
+        value={projection?.activeViewId ?? ""}
+        disabled={busy || locked}
+        aria-label="Current View"
+        aria-invalid={Boolean(error) || undefined}
+        onChange={(event) => select(event.target.value)}
+      >
+        {!locked && <option value="">Full interface</option>}
+        {options.map((option) => (
+          <option key={option.id} value={option.id}>{option.name}</option>
+        ))}
+      </select>
+    </label>
+  );
+}

webui/src/index.ts

@@ -0,0 +1,3 @@
+export { default, viewsModule } from "./module";
+export * from "./api/views";
+

webui/src/module.ts

@@ -0,0 +1,102 @@
+import { createElement, lazy } from "react";
+import {
+  hasScope,
+  type AdminSectionsUiCapability,
+  type PlatformWebModule,
+  type ViewsRuntimeUiCapability
+} from "@govoplan/core-webui";
+import ViewSelector from "./components/ViewSelector";
+import { fetchEffectiveView, selectEffectiveView } from "./api/views";
+import "./styles/views.css";
+
+
+const ViewsAdminPanel = lazy(
+  () => import("./features/views/ViewsAdminPanel")
+);
+
+const viewsAdminSections: AdminSectionsUiCapability = {
+  sections: [
+    {
+      id: "system-views",
+      label: "Views",
+      group: "SYSTEM",
+      order: 15,
+      surfaceId: "views.admin.system",
+      anyOf: [
+        "views:system_definition:read",
+        "views:system_definition:write",
+        "views:system_assignment:read",
+        "views:system_assignment:write"
+      ],
+      render: ({ settings, auth }) => createElement(ViewsAdminPanel, {
+        settings,
+        scopeType: "system",
+        canWriteDefinitions: hasScope(auth, "views:system_definition:write"),
+        canWriteAssignments: hasScope(auth, "views:system_assignment:write")
+      })
+    },
+    {
+      id: "tenant-views",
+      label: "Views",
+      group: "TENANT",
+      order: 15,
+      surfaceId: "views.admin.tenant",
+      anyOf: [
+        "views:definition:read",
+        "views:definition:write",
+        "views:assignment:read",
+        "views:assignment:write"
+      ],
+      render: ({ settings, auth }) => createElement(ViewsAdminPanel, {
+        settings,
+        scopeType: "tenant",
+        canWriteDefinitions: hasScope(auth, "views:definition:write"),
+        canWriteAssignments: hasScope(auth, "views:assignment:write")
+      })
+    }
+  ]
+};
+
+const viewsRuntime: ViewsRuntimeUiCapability = {
+  loadEffectiveView: (settings) => fetchEffectiveView(settings),
+  activateView: (settings, viewId) => selectEffectiveView(settings, viewId),
+  Selector: ViewSelector
+};
+
+export const viewsModule: PlatformWebModule = {
+  id: "views",
+  label: "Views",
+  version: "0.1.0",
+  optionalDependencies: ["access", "admin", "policy", "workflow"],
+  viewSurfaces: [
+    {
+      id: "views.selector",
+      moduleId: "views",
+      kind: "selector",
+      label: "View selector",
+      order: 1,
+      required: true
+    },
+    {
+      id: "views.admin.system",
+      moduleId: "views",
+      kind: "section",
+      label: "System Views administration",
+      order: 20
+    },
+    {
+      id: "views.admin.tenant",
+      moduleId: "views",
+      kind: "section",
+      label: "Tenant Views administration",
+      order: 30
+    }
+  ],
+  uiCapabilities: {
+    "admin.sections": viewsAdminSections,
+    "views.runtime": viewsRuntime
+  }
+};
+
+export default viewsModule;
+

webui/src/styles/views.css

@@ -0,0 +1,364 @@
+.titlebar-view-selector {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  gap: 7px;
+  color: var(--muted);
+}
+
+.titlebar-view-selector select {
+  width: min(190px, 24vw);
+  height: 32px;
+  padding: 0 28px 0 8px;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background-color: transparent;
+  color: var(--text);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.titlebar-view-selector select:hover,
+.titlebar-view-selector select:focus-visible {
+  background-color: var(--titlebar-hover-bg);
+}
+
+.titlebar-view-selector select:disabled {
+  cursor: default;
+  opacity: .78;
+}
+
+.views-admin-shell {
+  display: grid;
+  grid-template-columns: 280px minmax(0, 1fr);
+  min-height: 620px;
+  max-height: calc(100vh - 190px);
+  overflow: hidden;
+  border: var(--border-line);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+}
+
+.views-definition-pane {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  border-right: var(--border-line);
+  background: var(--surface-muted);
+}
+
+.views-pane-heading,
+.views-editor-heading,
+.views-section-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.views-pane-heading {
+  align-items: center;
+  min-height: 50px;
+  padding: 0 14px;
+  border-bottom: var(--border-line);
+}
+
+.views-pane-heading > span {
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.views-definition-list {
+  min-height: 0;
+  overflow: auto;
+  padding: 6px;
+}
+
+.views-definition-item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto 18px;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 58px;
+  padding: 9px 8px 9px 10px;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.views-definition-item:hover {
+  background: var(--hover-tint-soft);
+}
+
+.views-definition-item.active {
+  background: var(--accent-hover-bg);
+  color: var(--text-strong);
+}
+
+.views-definition-item-main {
+  min-width: 0;
+}
+
+.views-definition-item-main strong,
+.views-definition-item-main small {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.views-definition-item-main small {
+  margin-top: 3px;
+  color: var(--muted);
+}
+
+.views-editor-pane {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  padding: 18px;
+}
+
+.views-editor-heading {
+  min-height: 44px;
+}
+
+.views-editor-heading h3,
+.views-section-heading h4,
+.views-empty-editor h3 {
+  margin: 0;
+  font-size: 16px;
+  letter-spacing: 0;
+}
+
+.views-editor-title-row {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+
+.views-editor-heading p,
+.views-section-heading p {
+  margin: 4px 0 0;
+}
+
+.views-definition-form {
+  display: grid;
+  grid-template-columns: minmax(220px, .65fr) minmax(300px, 1.35fr);
+  gap: 14px;
+  margin-top: 16px;
+}
+
+.views-definition-form textarea {
+  resize: vertical;
+}
+
+.views-surface-section,
+.views-assignments-section {
+  margin-top: 22px;
+  padding-top: 18px;
+  border-top: var(--border-line);
+}
+
+.views-section-heading {
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.views-stale-surface-warning {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.views-surface-selector {
+  overflow: hidden;
+  border: var(--border-line);
+  border-radius: var(--radius-sm);
+}
+
+.views-surface-filter {
+  padding: 8px;
+  border-bottom: var(--border-line);
+  background: var(--surface-muted);
+}
+
+.views-surface-filter input {
+  width: 100%;
+}
+
+.views-surface-modules {
+  height: 350px;
+  overflow: auto;
+  padding: 6px;
+}
+
+.views-surface-modules details {
+  border-bottom: var(--border-line);
+}
+
+.views-surface-modules details:last-child {
+  border-bottom: 0;
+}
+
+.views-surface-modules summary {
+  list-style: none;
+}
+
+.views-surface-modules summary::-webkit-details-marker {
+  display: none;
+}
+
+.views-surface-children {
+  display: grid;
+  gap: 2px;
+  padding: 0 0 6px 24px;
+}
+
+.views-surface-row {
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr) 18px;
+  align-items: center;
+  gap: 9px;
+  min-height: 42px;
+  padding: 6px 8px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+
+.views-surface-row:hover {
+  background: var(--hover-tint-soft);
+}
+
+.views-surface-row.disabled {
+  cursor: default;
+  opacity: .7;
+}
+
+.views-surface-row strong,
+.views-surface-row small {
+  display: block;
+  letter-spacing: 0;
+}
+
+.views-surface-row small {
+  margin-top: 2px;
+  overflow-wrap: anywhere;
+  color: var(--muted);
+}
+
+.views-assignment-list {
+  max-height: 280px;
+  overflow: auto;
+  border: var(--border-line);
+  border-radius: var(--radius-sm);
+}
+
+.views-assignment-row {
+  display: grid;
+  grid-template-columns: minmax(180px, 1.3fr) auto auto minmax(120px, .7fr) auto auto;
+  align-items: center;
+  gap: 12px;
+  min-height: 58px;
+  padding: 8px 10px;
+  border-bottom: var(--border-line);
+}
+
+.views-assignment-row:last-child {
+  border-bottom: 0;
+}
+
+.views-assignment-row:hover {
+  background: var(--hover-tint-soft);
+}
+
+.views-assignment-view strong,
+.views-assignment-view span {
+  display: block;
+}
+
+.views-assignment-view span,
+.views-assignment-priority,
+.views-assignment-revision {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.views-empty-list,
+.views-empty-editor {
+  padding: 24px 16px;
+  color: var(--muted);
+  text-align: center;
+}
+
+.views-empty-editor {
+  display: grid;
+  place-content: center;
+  min-height: 420px;
+}
+
+.views-assignment-dialog {
+  width: min(760px, calc(100vw - 40px));
+}
+
+.views-assignment-toggles {
+  display: grid;
+  align-content: end;
+  gap: 10px;
+  min-height: 70px;
+}
+
+@media (max-width: 1100px) {
+  .views-admin-shell {
+    grid-template-columns: 230px minmax(0, 1fr);
+  }
+
+  .views-assignment-row {
+    grid-template-columns: minmax(170px, 1fr) auto auto;
+  }
+
+  .views-assignment-priority,
+  .views-assignment-revision {
+    display: none;
+  }
+}
+
+@media (max-width: 760px) {
+  .titlebar-view-selector select {
+    width: 120px;
+  }
+
+  .views-admin-shell {
+    display: flex;
+    flex-direction: column;
+    max-height: none;
+  }
+
+  .views-definition-pane {
+    max-height: 220px;
+    border-right: 0;
+    border-bottom: var(--border-line);
+  }
+
+  .views-definition-form {
+    grid-template-columns: 1fr;
+  }
+
+  .views-editor-heading,
+  .views-section-heading,
+  .views-stale-surface-warning {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .views-assignment-row {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+}