customer-presentation/architecture boxes/design_handoff_architecture_diagram/reference/approach-fenja.jsx

/* eslint-disable */
// Fenja architecture — right-side diagram for the section page.
// Sibling of Approach 1 (Editorial Stack). Same paper-on-paper
// language: tonal nested cards, no borders, eyebrow + italic
// descriptor in the group header. No connectors between layers.
//
// Three layers, top → bottom: FOUNDATION → TOOLS → AGENTS.
// Foundation has 2 boxes (Knowledge intentionally taller).
// Tools and Agents each have 4 boxes.

const fenjaArchData = {
  layers: [
    {
      id: "foundation",
      label: "Foundation",
      caption: "Sovereign by design",
      columns: 2,
      align: "start", // intentional asymmetry — Knowledge is taller
      cards: [
        {
          id: "model",
          name: "Language model",
          rows: [
            { kind: "italic", text: "State-of-the-art, open-source" },
            { kind: "mono", text: "On-prem" },
          ],
        },
        {
          id: "knowledge",
          name: "Knowledge",
          rows: [
            { kind: "italic", text: "Organizational memory at every level" },
            { kind: "mono", text: "Organizational · Departmental · Personal" },
            { kind: "italic", text: "Facts, context, and how things get done" },
            { kind: "mono", text: "Wiki · Routines · Working memory" },
          ],
        },
      ],
    },
    {
      id: "tools",
      label: "Tools",
      caption: "How Fenja acts",
      columns: 4,
      cards: [
        { id: "retrieval", name: "Document retrieval",
          rows: [{ kind: "italic", text: "Find and cite" }, { kind: "mono", text: "RAG" }] },
        { id: "structured", name: "Structured data",
          rows: [{ kind: "italic", text: "Query and extract" }, { kind: "mono", text: "NL → SQL" }] },
        { id: "actions", name: "System actions",
          rows: [{ kind: "italic", text: "Read and write" }, { kind: "mono", text: "APIs · integrations" }] },
        { id: "custom", name: "Custom tools",
          rows: [{ kind: "italic", text: "Your specific work" }, { kind: "mono", text: "Defined by you" }] },
      ],
    },
    {
      id: "agents",
      label: "Agents",
      caption: "How Fenja scales",
      columns: 4,
      cards: [
        { id: "supervisor", name: "Supervisor",
          rows: [{ kind: "italic", text: "Plan and dispatch" }, { kind: "mono", text: "Orchestration" }] },
        { id: "specialists", name: "Specialists",
          rows: [{ kind: "italic", text: "Focused expertise" }, { kind: "mono", text: "Subagents" }] },
        { id: "skills", name: "Skills",
          rows: [{ kind: "italic", text: "Reusable capability" }, { kind: "mono", text: "Portable across specialists" }] },
        { id: "workflows", name: "Workflows",
          rows: [{ kind: "italic", text: "Composed by you" }, { kind: "mono", text: "Governed end-to-end" }] },
      ],
    },
  ],
};

const fenjaStyles = {
  artboard: {
    width: "100%",
    minHeight: "100%",
    background: "var(--surface)",
    padding: "56px 56px 64px",
    fontFamily: "var(--font-sans)",
    color: "var(--on-surface)",
    boxSizing: "border-box",
  },
  stage: {
    display: "flex",
    flexDirection: "column",
    gap: "20px",
  },
  group: {
    background: "var(--surface-container)",
    borderRadius: "20px",
    padding: "24px 24px 28px",
  },
  groupHeader: {
    display: "flex",
    alignItems: "baseline",
    justifyContent: "space-between",
    marginBottom: "18px",
    paddingLeft: "4px",
  },
  groupLabel: {
    fontFamily: "var(--font-sans)",
    fontSize: "11px",
    fontWeight: 600,
    letterSpacing: "0.14em",
    textTransform: "uppercase",
    color: "var(--on-surface-variant)",
  },
  groupCaption: {
    fontFamily: "var(--font-serif)",
    fontStyle: "italic",
    fontSize: "14px",
    color: "var(--on-surface-muted)",
  },
  cards: {
    display: "grid",
    gap: "14px",
  },
  cardsStretch: { alignItems: "stretch" },
  cardsStart: { alignItems: "start" },
  card: {
    background: "var(--surface-container-lowest)",
    borderRadius: "12px",
    padding: "18px 20px",
    display: "flex",
    flexDirection: "column",
    gap: "6px",
    minHeight: "76px",
    justifyContent: "flex-start",
    boxShadow: "0 1px 0 rgba(56,56,49,0.04), 0 8px 20px -16px rgba(56,56,49,0.18)",
  },
  cardName: {
    fontFamily: "var(--font-sans)",
    fontSize: "15px",
    fontWeight: 600,
    letterSpacing: "-0.005em",
    color: "var(--on-surface)",
    marginBottom: "2px",
  },
  rowItalic: {
    fontFamily: "var(--font-serif)",
    fontStyle: "italic",
    fontSize: "13px",
    color: "var(--on-surface-variant)",
    lineHeight: 1.35,
  },
  rowMono: {
    fontFamily: "var(--font-mono)",
    fontSize: "10.5px",
    letterSpacing: "0.04em",
    color: "var(--on-surface-muted)",
    lineHeight: 1.4,
  },
};

function FenjaArchitecture({ data = fenjaArchData }) {
  return (
    <div style={fenjaStyles.artboard}>
      <div style={fenjaStyles.stage}>
        {data.layers.map((layer) => (
          <section key={layer.id} style={fenjaStyles.group}>
            <div style={fenjaStyles.groupHeader}>
              <div style={fenjaStyles.groupLabel}>{layer.label}</div>
              <div style={fenjaStyles.groupCaption}>{layer.caption}</div>
            </div>
            <div
              style={{
                ...fenjaStyles.cards,
                ...(layer.align === "start" ? fenjaStyles.cardsStart : fenjaStyles.cardsStretch),
                gridTemplateColumns: `repeat(${layer.columns}, 1fr)`,
              }}
            >
              {layer.cards.map((c) => (
                <div key={c.id} style={fenjaStyles.card}>
                  <div style={fenjaStyles.cardName}>{c.name}</div>
                  {c.rows.map((r, i) => (
                    <div
                      key={i}
                      style={r.kind === "mono" ? fenjaStyles.rowMono : fenjaStyles.rowItalic}
                    >
                      {r.text}
                    </div>
                  ))}
                </div>
              ))}
            </div>
          </section>
        ))}
      </div>
    </div>
  );
}

window.FenjaArchitecture = FenjaArchitecture;
window.FENJA_ARCH_DATA = fenjaArchData;