Add a page to the dashboard

A part (your own folder in src/parts/, see Make Pepper yours) can add tabs to the dashboard. This one adds a Books tab that reads Pepper's facts table and lists the books people mention.

import { db } from "../../store/db.js";
import { esc, type Part } from "../contract.js";

export const part: Part = {
  name: "books",
  about: "a page of the books people mention",
  tabs: [{
    id: "books",
    label: "Books",
    render: () => {
      const rows = db.prepare("SELECT value FROM facts WHERE predicate='recommended_book' LIMIT 50").all() as Array<{ value: string }>;
      return `<ul>${rows.map((r) => `<li>${esc(r.value)}</li>`).join("")}</ul>`;
    },
  }],
};

Save it as src/parts/books/index.ts, add books: () => import("./books/index.js"), to src/parts/mine.ts, and restart Pepper. The tab then appears after the ones Pepper comes with, at /p/books.

The facts come from the model, which names each one in its own words, so recommended_book is only an example: look at what Pepper actually called a book mention and use that name. The query also lists facts you haven't approved yet; add AND status='active' to show only the ones you have.

Anything that came from a message goes through esc, which turns it into plain text for the page: other people wrote it, and without esc a message could carry code that runs in your browser. The dashboard's content security policy applies to your tab too, so a script written into the HTML won't run. Phone screens have room for only a few tabs, so keep the label short.