app/routes/admin._index.tsx

Functions

Imports

It imports app/lib/admin/check-copy.mjs, app/lib/context.ts, app/lib/health/checks.server.ts, app/lib/operator/api.server.ts, app/lib/search/ask.server.ts, app/lib/timing.ts. No module of this repo imports it.

Source

1import { Form, data } from "react-router";
2
3import { Banner } from "capsomer/react/banner";
4import { Button } from "capsomer/react/button";
5import { Disclosure } from "capsomer/react/disclosure";
6import { Panel } from "capsomer/react/panel";
7import { Row, RowList } from "capsomer/react/row-list";
8import { Pill, Status } from "capsomer/react/status";
9import { StatTile, StatTiles } from "capsomer/react/stat-tile";
10
11import { PageHead } from "capsomer/react/page-head";
12import { timed, timedLoader } from "~/lib/timing";
13import { humanCheck, statusSentence } from "~/lib/admin/check-copy.mjs";
14import { runHealthChecks } from "~/lib/health/checks.server";
15import { syncStatus } from "~/lib/operator/api.server";
16import { getEnv } from "~/lib/context";
17import { askStatusContext } from "~/lib/search/ask.server";
18import type { Route } from "./+types/admin._index";
19
20export function meta() {
21  return [{ title: "Overview · Admin" }, { name: "robots", content: "noindex" }];
22}
23
24/** Reads the same instruments as /api/health and the operator tool, so it cannot disagree with them. */
25export async function loader({ context }: Route.LoaderArgs) {
26  return timedLoader(context, async (timings) => {
27    const env = getEnv(context);
28
29    const [health, stores] = await Promise.all([
30      /* The same memoized Ask listing the layout's badge uses, so the page lists the index once, not twice. */
31      timed(timings, "overview_health", () => runHealthChecks(env, { timings, askStatus: context.get(askStatusContext) })),
32      timed(timings, "overview_stores", () => syncStatus(env)),
33    ]);
34
35    return data({
36      checks: health.checks,
37      stores: {
38        headSha: stores.headSha,
39        artifactPosts: stores.artifactPosts,
40        d1Posts: stores.d1Posts,
41        d1PubliclyVisible: stores.d1PubliclyVisible,
42        searchIndexDocs: stores.searchIndexDocs,
43        askConfigured: stores.askConfigured,
44        githubConfigured: stores.githubConfigured,
45        divergences: stores.divergences,
46      },
47    });
48  });
49}
50
51type Check = Route.ComponentProps["loaderData"]["checks"][number];
52
53/** The passing checks, each named in words with what it found, folded away: nothing in it needs a person. */
54function PassingChecks({ checks }: { checks: Check[] }) {
55  return (
56    <Disclosure summary={`The ${checks.length} passing check${checks.length === 1 ? "" : "s"}`}>
57      <RowList label="Passing checks" gap="xs">
58        {checks.map((check) => {
59          const copy = humanCheck(check);
60          return <Row key={check.name} size="sm" title={copy.name} detail={copy.finding} />;
61        })}
62      </RowList>
63    </Disclosure>
64  );
65}
66
67export default function AdminOverview({ loaderData }: Route.ComponentProps) {
68  const { checks, stores } = loaderData;
69
70  const failing = checks.filter((check) => !check.ok);
71  const worst = failing[0];
72  const worstCopy = worst ? humanCheck(worst) : null;
73
74  const passing = checks.filter((check) => check.ok);
75  const lag = stores.d1Posts === stores.artifactPosts;
76
77  return (
78    <div className="app-page">
79      <PageHead title="Overview" lead={statusSentence(checks)} />
80
81      {/* A banner, not an alert: a standing condition is not announced on every load. */}
82      {worst && worstCopy ? (
83        <Banner
84          tone="crit"
85          title={`${worstCopy.name} needs attention`}
86          actions={
87            worstCopy.repair ? (
88              <Form method="post" action={worstCopy.repair.action}>
89                <input type="hidden" name="intent" value={worstCopy.repair.intent} />
90                <Button type="submit">{worstCopy.repair.label}</Button>
91              </Form>
92            ) : null
93          }
94        >
95          {worstCopy.finding}
96        </Banner>
97      ) : null}
98
99      {/* Failures first and loud; the passing checks are a count in the heading and a list one click away
100          (Dustin's review, 2026-10-11: a green pill on every row hid the one red one). A repair sits with the
101          finding it repairs, so there is no column that is empty whenever nothing fails. */}
102      <Panel
103        title={failing.length > 0 ? `Checks: ${failing.length} failing, ${passing.length} passing` : `Checks: all ${checks.length} passing`}
104        flush={failing.length > 0}
105        footer={failing.length > 0 && passing.length > 0 ? <PassingChecks checks={passing} /> : undefined}
106      >
107        {failing.length > 0 ? (
108          <div className="cap-table-wrap" role="region" aria-label="Failing checks" tabIndex={0}>
109            <table className="cap-table">
110              <thead>
111                <tr>
112                  <th scope="col">Check</th>
113                  <th scope="col">What it found</th>
114                </tr>
115              </thead>
116              <tbody>
117                {failing.map((check) => {
118                  const copy = humanCheck(check);
119                  return (
120                    <tr key={check.name}>
121                      <th scope="row">
122                        {copy.name}
123                        {/* Word, shape and colour: three channels, so it still reads under forced-colors. */}
124                        <Status tone="crit">failing</Status>
125                      </th>
126                      <td>
127                        {copy.finding}
128                        {copy.repair ? (
129                          <Form method="post" action={copy.repair.action}>
130                            <input type="hidden" name="intent" value={copy.repair.intent} />
131                            <Button type="submit" size="sm" aria-label={`${copy.repair.label}: ${copy.name}`}>
132                              {copy.repair.label}
133                            </Button>
134                          </Form>
135                        ) : null}
136                      </td>
137                    </tr>
138                  );
139                })}
140              </tbody>
141            </table>
142          </div>
143        ) : (
144          <PassingChecks checks={passing} />
145        )}
146      </Panel>
147
148      <StatTiles label="Content">
149        <StatTile
150          label="In the repository"
151          figure={stores.artifactPosts}
152          unit="posts"
153          detail="posts written and committed"
154        />
155        <StatTile
156          label="Live on the site"
157          tone={lag ? "ok" : "warn"}
158          figure={stores.d1Posts}
159          unit="posts"
160          word={lag ? undefined : "Out of step"}
161          detail={`${stores.d1PubliclyVisible} of them public to readers`}
162        />
163      </StatTiles>
164
165      <Disclosure summary="Everything else this page could show">
166        <dl>
167          <dt>Search records</dt>
168          <dd>{stores.searchIndexDocs} entries.</dd>
169          <dt>Connections</dt>
170          <dd>
171            {stores.askConfigured && stores.githubConfigured
172              ? "Search and the repository are both configured."
173              : `Search ${stores.askConfigured ? "is" : "is NOT"} configured, the repository ${
174                  stores.githubConfigured ? "is" : "is NOT"
175                }.`}
176          </dd>
177        </dl>
178        <p>
179          Both are read from the same function the operator tool calls. They sit
180          here rather than at the top because neither has ever been the answer to
181          a question this page was opened with.
182        </p>
183      </Disclosure>
184
185      {/* No block is not evidence of health: `known: false` means unreadable, not empty. */}
186      {stores.divergences.known && stores.divergences.entries.length > 0 ? (
187        <Panel title="Changes the site did not pick up" count={stores.divergences.entries.length} flush>
188          <RowList label="Changes the site did not pick up">
189            {stores.divergences.entries.map((entry) => (
190              <Row
191                key={`${entry.slug}-${entry.commitSha}`}
192                title={
193                  <>
194                    {entry.slug} <Pill variant="outline">{entry.commitSha.slice(0, 7)}</Pill>
195                  </>
196                }
197                detail={entry.error}
198                status={<Status tone="crit">not updated</Status>}
199              />
200            ))}
201          </RowList>
202        </Panel>
203      ) : null}
204    </div>
205  );
206}