Console "Memoria & IA" — concept + screen design
reference· designer · updated 2026-06-27 · source
The operator-tool section that was called "Datos & Memoria" and that nobody could read at a
glance (José: "I don't understand it as it stands"). This spec gives it a clear concept, an IA
placement, and a screen design so it stops being a vague Registros/Actividad/Conectores triple
and becomes the org's legible AI layer. Sibling to console-nav-ia-spec.md
(where it sits in the nav), console-design.md (Aurea Ink matiz), and the
ADR-007 substrate. Hues: color-scope.md — AI violet --color-ai is the group
hue here (the one surface in the console where it belongs), never sharing a group with the Amber
accent.
Frontend implements off this; Designer reviews the rendered result against
design-principles.md.
Naming. Recommend renaming the section "Datos & Memoria" → "Memoria & IA" (ratify with José). The data now lives in the modules (alumnos, pagos, certificados…), so "Datos" duplicated the module nav and muddied the meaning. What is left here is the AI substrate. The nav spec already assumes the new name. Spanish UI label "Memoria & IA"; route slug
memoria.
1. The concept — in one paragraph
Every org the operator runs has an AI layer that powers its agents — the bots that actually do the client's work (answer WhatsApp, draft the weekly report, reconcile a payment). That AI layer has two halves, and this section is where the operator sees and tends them:
- Conectores — the senses. Where the AI gets information and where it can act: the org's integrations (WhatsApp, email, Stripe/CFDI, Google, the client's own systems). Inputs + outputs.
- Memoria — the brain. What the AI has learned and remembers about this org: people, facts, documents, context — a structured second-brain the agents read from and write back to.
That's it. Conectores feed Memoria; Memoria + the agents act through Conectores. Business data is the modules; this section is the intelligence behind them, not a second copy of them.
external world Memoria & IA (this section) the org's work
┌───────────────┐ ingest ┌──────────────────────────────┐ reads ┌──────────────────┐
│ WhatsApp · mail│ ─────────► │ CONECTORES → MEMORIA │ ───────► │ agents act / the │
│ Stripe · Google│ │ (senses) (brain) │ writes │ modules surface │
└───────────────┘ ◄───────── └──────────────────────────────┘ ◄─────── └──────────────────┘
act updates
This mental model is the screen: two sub-tabs, Conectores and Memoria.
2. What it stores / shows / does
| Half | Stores | Shows | Does |
|---|---|---|---|
| Conectores | per-provider connection records (status, scope, last sync, capability) | a card grid of connected sources + their health | connect / reconnect / configure / disconnect a provider; see what each feeds |
| Memoria | the AI knowledge layer — entities, facts, documents/notes, with source (which connector), updated, confidence | a searchable list (default) + an optional graph view of how knowledge links | inspect what the AI knows; trace a fact to its source; (later) edit/forget an item |
Dropped from the old version: the vague "Actividad" tab (it never had a wired source) and a
standalone "Registros" tab as a primary concern — raw business records are the modules now.
The live entity browser that "Registros" wired (GET /console/projects/:id/entities) is retained
only as a raw underlay inside Memoria (a "ver datos crudos" affordance, deferred), not a
top-level tab. This is the de-confusion: two halves, not three vague lists.
3. IA placement
- Class: operator tool (not a module) — it is cross-module intelligence, per
console-nav-ia-spec.md§1. - Where in the nav: the
Operador ▾dropdown → Organización group (org-scoped; stays in org context after the L1 lift). - Route:
/org/<slug>/memoria(redirect the old/datos), with the §2 sub-tabs as the module sub-tab strip pattern (console-nav-ia-spec.md§2 — neutral active state, no second Amber):/org/<slug>/memoria/conectores— Conectores (default; redirect bare/memoriahere)/org/<slug>/memoria/memoria— the Memoria knowledge layer (slug TBD —grafo/conocimientoif the doubled word reads oddly; Frontend's call, English perlanguage.md)
- Scope: locked to the route's org (no cross-org picker — the console's
Proyectoswitcher in Row 1 already chose the org).
4. Screen design
Highest-restraint console surface (data-first). Grid v2 canvas; full-width (G5); overflow-x: clip
(G6). Compact page header ("Memoria & IA" + one-line subtitle) → the neutral sub-tab strip →
section body.
4.1 Conectores — card grid (the senses)
Reuse the shipped connections-view.tsx pattern (@tedos/ui/admin/screens) re-skinned by the
.console scope — do not re-author. A responsive card grid over a ConnectionItem
({id, name, capability, status, lastSync?}).
- Card:
bg-surface rounded-xl border border-border-subtle p-5. Header = provider glyph (app-ownediconFor, 18px) + name (type-h2) + a status chip. Body = capability line (type-small fg-muted)lastSync(type-meta fg-muted).
- Status chips are categories, never the accent:
success= conectado ·warning= alerta ·muted= sin configurar.alertis a per-card degraded tone, not the page error. - The ONE Amber moment (G17): the header
Conectarprimary action (starts per-provider OAuth). The only accent on the screen. - AI-generated cards (a connector that is itself an AI capability, e.g. an LLM source) may carry
the AI-violet
--color-aiisolate — never in the same visual group as the AmberConectar(color-scope).
4.2 Memoria — list + graph (the brain)
The heart of the section, and the part that was missing. Data-first: the list is the default; the graph is an opt-in delight beat, not the landing.
View toggle — a Segmented control (Lista · Grafo), top-right of the section body. Neutral
(no Amber). Default Lista.
Lista (default): a DataTable of memory items —
| Column | Content |
|---|---|
| Elemento | the entity/fact label (type-small text-fg-primary) |
| Tipo | category chip (info/muted) — persona · hecho · documento · nota |
| Fuente | originating connector (type-meta, provider glyph + name) |
| Actualizado | type-mono relative time |
| Confianza | a quiet inline bar or type-mono % — fg-muted, not a status color unless low (warning) |
Toolbar = search + a Tipo filter + a Fuente filter (reuse DataTableToolbar). Row →
DetailPanel (right slide-in) showing the item's full record + provenance (which connector, when
ingested, source excerpt) — trace a fact to its origin. Raw underlay ("ver datos crudos", the old
Registros entity browser) lives at the foot of the panel, deferred.
Grafo (opt-in): the phyllotaxis-echo node view — the brand-fit delight beat
(console-design.md §4). Nodes = memory entities, edges = relations; --color-ai violet is the
node hue (the AI brain, literally). Calm: nodes are small dots (the seed-head DNA), one focused
node brightens on hover/select → opens the same DetailPanel. This is the single ornamental beat of
the console — it must stay legible and data-true, never a decorative particle cloud (AI-slop ban).
prefers-reduced-motion → a static layout, no drift. Defer the graph if it can't be data-true at
build time — ship Lista first; the toggle hides until Grafo is real.
5. Tokens (the .console ink scope — packages/ui/src/admin/console/console-theme.css)
No new tokens; no raw hex. All resolve through the .console scope on <body>.
| Element | Token / utility |
|---|---|
| Page canvas | bg-canvas |
| Sub-tab strip | per console-nav-ia-spec.md §2/§4 (neutral: active bg-elevated text-fg-primary rounded-md) |
| Conector card | bg-surface border border-border-subtle rounded-xl (R1); AI card may add border-ai/bg-ai-soft |
| Status chip | success / warning / muted (+-soft) — categories |
Conectar (the one Amber) | foundation Button (accent) — one per screen |
| Memoria table | DataTable on bg-surface, header bg-sunken; type-mono for time/confidence |
| View toggle | Segmented (neutral) |
| Graph nodes | --color-ai (violet); focused node brighter; edges border-border-subtle tone |
DetailPanel | bg-elevated, slides translateX (the shared panel component) |
| Provenance / source excerpt | bg-sunken block, type-mono |
| Type roles | type-h2 (card/section), type-small/type-meta/type-mono (data) — all existing |
| Radii / icons | G19 radii; HugeIcons stroke 1.5 (provider glyphs app-owned via iconFor) |
Accent budget (reviewable): count surfaces resolving to accent ≤ 1 per screen — only
Conectar. AI violet is a group hue, not the accent, and never co-occurs with Amber in one
group (color-scope).
6. The 4 states (each section owns them — frontend-guardrails.md H1)
| State | Conectores | Memoria |
|---|---|---|
| loading | card-grid skeleton (animate-pulse on bg-sunken), layout-matched | table skeleton; graph → skeletal node cluster or spinner-free shimmer |
| empty | "Sin conectores todavía" + the Conectar CTA + seed mark (a calm, honest empty) | "La memoria está vacía" — no connectors have fed it yet; link to Conectores. Never fake knowledge. |
| error | inline ReadError (danger, role="alert"); a single failed card uses its own alert tone, not the page error (DF4) | inline ReadError; never infer "empty" from a failed read |
| success | the card grid | the table (or graph) |
7. Motion (console tokens, transform/opacity only — console-design.md §6)
| Interaction | Spec |
|---|---|
| Sub-tab / view toggle | color/bg only, instant — --duration-press (120ms) --ease-out; no sliding indicator (no second Amber) |
DetailPanel open | translateX slide, --duration-enter (220ms) --ease-out, interruptible; exit --duration-exit (160ms) |
| Conector card hover | border + shadow-sm only (no card transform); @media (hover:hover) |
| Graph focus | focused node scale/opacity up, --duration-press --ease-out; no perpetual drift |
| Press | scale(0.97) --duration-press on Conectar |
prefers-reduced-motion → kill transforms/loops (incl. the graph), keep ≤200ms opacity crossfades.
The graph is the only ornamental beat — restraint governs ornament, not the data.
8. Principle check + open items
Rubric: Purpose + Simplicity — the two-halves model (Conectores = senses, Memoria = brain)
makes a previously-opaque section legible in one sentence; dropping "Actividad" and demoting raw
"Registros" removes the muddle. Familiarity — Conectores reuses the shipped connections card
pattern; Memoria reuses DataTable + DetailPanel. Craft/Delight — one Amber (Conectar), AI
violet as the brain's hue, the phyllotaxis graph as the single ornament.
Named trade-off — Simplicity vs Flexibility: collapsing the data lake out of the top level trades a power-user raw browser for a clear concept; mitigated by the "ver datos crudos" underlay in the Memoria panel (the old entity browser is retained, not deleted).
Open items (assumed, not decided — for José / Tech-Lead):
- Rename "Datos & Memoria" → "Memoria & IA" (recommended; the whole spec assumes it).
- The memory contract — ADR-007 substrate has no typed
@tedos/sharedcontract yet (entities read live; memory items + provenance are fixture-shaped today). Lift when the API lands. - Graph scope — ship Lista first; the Grafo toggle appears only when it can be data-true.
- Raw "Registros" — confirm it belongs as a deferred underlay in the Memoria panel vs a hidden power-user route. Recommended: underlay.