feat(sdk-android): snapshot property delegate + feature-scoped files + screen fix (#34)

* rename web to inspect ui

* feat(sdk-android): add camelToSnakeCase conversion

* feat(sdk-android): add snapshot() property delegate with tests

* feat(folio): add feature-scoped sanderling snapshot objects

* refactor(folio): slim FolioApplication to snapshot object references

* fix(folio): rename route snapshot to screen, update spec.ts

inspect-ui/src/components/ResidualNode.css

@@ -0,0 +1,59 @@
+.residual {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-primary);
+  line-height: 1.6;
+  word-break: break-word;
+}
+
+.residual-leaf,
+.residual-unary,
+.residual-binary,
+.residual-group {
+  display: inline;
+}
+
+.residual-unary,
+.residual-binary {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px;
+}
+
+.op-label {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+  padding: 1px 4px;
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  background: var(--surface);
+}
+
+.residual-bound {
+  color: var(--text-muted);
+  font-size: 11px;
+}
+
+.residual-error {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 6px;
+  border: 1px solid var(--accent-violation);
+  border-radius: 3px;
+  color: var(--accent-violation);
+}
+
+.residual-error .op-label {
+  color: var(--accent-violation);
+  border-color: var(--accent-violation);
+  background: transparent;
+}
+
+.residual-error-message {
+  font-size: 12px;
+}

inspect-ui/src/components/ResidualNode.tsx

@@ -0,0 +1,88 @@
+import type { ResidualNode } from "../types";
+import "./ResidualNode.css";
+
+export interface ResidualNodeProps {
+  node: ResidualNode;
+}
+
+function OperatorLabel({ children }: { children: string }) {
+  return <span className="op-label">{children}</span>;
+}
+
+function Wrapped({ node }: { node: ResidualNode }) {
+  return (
+    <span className="residual-group">
+      (<ResidualNodeView node={node} />)
+    </span>
+  );
+}
+
+function ResidualNodeView({ node }: ResidualNodeProps) {
+  switch (node.op) {
+    case "true":
+      return <span className="residual-leaf">true</span>;
+    case "false":
+      return <span className="residual-leaf">false</span>;
+    case "predicate":
+      return (
+        <span className="residual-leaf">
+          <OperatorLabel>pred</OperatorLabel>
+          {node.name ? <>({node.name})</> : null}
+        </span>
+      );
+    case "error":
+      return (
+        <span className="residual-error" role="status">
+          <OperatorLabel>error</OperatorLabel>
+          <span className="residual-error-message">{node.message}</span>
+        </span>
+      );
+    case "always":
+    case "now":
+    case "next":
+    case "not":
+      return (
+        <span className="residual-unary">
+          <OperatorLabel>{node.op}</OperatorLabel>
+          <Wrapped node={node.arg} />
+        </span>
+      );
+    case "eventually":
+      return (
+        <span className="residual-unary">
+          <OperatorLabel>eventually</OperatorLabel>
+          {node.within ? (
+            <span className="residual-bound">
+              within {node.within.amount} {node.within.unit}
+            </span>
+          ) : null}
+          <Wrapped node={node.arg} />
+        </span>
+      );
+    case "and":
+    case "or":
+      return (
+        <span className="residual-binary">
+          <Wrapped node={node.left} />
+          <OperatorLabel>{node.op}</OperatorLabel>
+          <Wrapped node={node.right} />
+        </span>
+      );
+    case "implies":
+      return (
+        <span className="residual-binary">
+          <Wrapped node={node.left} />
+          <OperatorLabel>{"=>"}</OperatorLabel>
+          <Wrapped node={node.right} />
+        </span>
+      );
+  }
+}
+
+export default function ResidualNodeRoot({ node }: ResidualNodeProps) {
+  return (
+    <span className="residual">
+      <ResidualNodeView node={node} />
+    </span>
+  );
+}

inspect-ui/src/components/Tabs.css

@@ -0,0 +1,77 @@
+.tabs {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1 1 auto;
+  font-family: var(--font-mono);
+}
+
+.tabs-header {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--border);
+  flex: 0 0 auto;
+  padding: 0 4px;
+}
+
+.tabs-tab {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  padding: 4px 10px;
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  margin-bottom: -1px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  outline: none;
+}
+
+.tabs-tab:focus-visible {
+  outline: 1px solid var(--text-primary);
+  outline-offset: -1px;
+}
+
+.tabs-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  padding: 0 4px;
+  border: 1px solid var(--border-strong);
+  border-radius: 999px;
+  font-size: 9px;
+  line-height: 1;
+  letter-spacing: 0;
+}
+
+.tabs-tab[data-active="true"] .tabs-badge {
+  border-color: var(--text-primary);
+}
+
+.tabs-badge[data-kind="violation"] {
+  border-color: var(--accent-violation);
+  color: var(--accent-violation);
+}
+
+.tabs-tab:hover {
+  color: var(--text-primary);
+}
+
+.tabs-tab[data-active="true"] {
+  color: var(--text-primary);
+  border-bottom-color: var(--text-primary);
+}
+
+.tabs-panel {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}

inspect-ui/src/components/Tabs.tsx

@@ -0,0 +1,110 @@
+import { useRef, useState, type KeyboardEvent, type ReactNode } from "react";
+import "./Tabs.css";
+
+export interface TabDefinition {
+  id: string;
+  label: string;
+  content: ReactNode;
+  badge?: ReactNode;
+}
+
+export interface TabsProps {
+  tabs: TabDefinition[];
+  defaultTabId?: string;
+  ariaLabel?: string;
+}
+
+export default function Tabs({ tabs, defaultTabId, ariaLabel }: TabsProps) {
+  const initial = defaultTabId && tabs.some((t) => t.id === defaultTabId) ? defaultTabId : tabs[0]?.id;
+  const [activeId, setActiveId] = useState<string | undefined>(initial);
+  const buttonRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
+
+  if (tabs.length === 0) return null;
+  const active = tabs.find((t) => t.id === activeId) ?? tabs[0];
+
+  const focusTab = (id: string) => {
+    setActiveId(id);
+    const node = buttonRefs.current.get(id);
+    if (node) node.focus();
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    const currentIndex = tabs.findIndex((t) => t.id === active.id);
+    if (currentIndex < 0) return;
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowDown": {
+        event.preventDefault();
+        const next = tabs[(currentIndex + 1) % tabs.length];
+        focusTab(next.id);
+        return;
+      }
+      case "ArrowLeft":
+      case "ArrowUp": {
+        event.preventDefault();
+        const prev = tabs[(currentIndex - 1 + tabs.length) % tabs.length];
+        focusTab(prev.id);
+        return;
+      }
+      case "Home": {
+        event.preventDefault();
+        focusTab(tabs[0].id);
+        return;
+      }
+      case "End": {
+        event.preventDefault();
+        focusTab(tabs[tabs.length - 1].id);
+        return;
+      }
+    }
+  };
+
+  const panelId = `${ariaLabel ?? "tabs"}-panel`.replace(/\s+/g, "-");
+
+  return (
+    <div className="tabs">
+      <div
+        className="tabs-header"
+        role="tablist"
+        aria-label={ariaLabel}
+        onKeyDown={handleKeyDown}
+      >
+        {tabs.map((tab) => {
+          const isActive = tab.id === active.id;
+          return (
+            <button
+              key={tab.id}
+              ref={(node) => {
+                if (node) {
+                  buttonRefs.current.set(tab.id, node);
+                } else {
+                  buttonRefs.current.delete(tab.id);
+                }
+              }}
+              type="button"
+              role="tab"
+              id={`${panelId}-tab-${tab.id}`}
+              className="tabs-tab"
+              data-active={isActive ? "true" : "false"}
+              aria-selected={isActive}
+              aria-controls={panelId}
+              tabIndex={isActive ? 0 : -1}
+              onClick={() => setActiveId(tab.id)}
+            >
+              <span>{tab.label}</span>
+              {tab.badge !== undefined ? <span className="tabs-badge">{tab.badge}</span> : null}
+            </button>
+          );
+        })}
+      </div>
+      <div
+        className="tabs-panel"
+        role="tabpanel"
+        id={panelId}
+        aria-labelledby={`${panelId}-tab-${active.id}`}
+      >
+        {active.content}
+      </div>
+    </div>
+  );
+}