kalfa 3.0.0.dev0__py3-none-any.whl

kalfa/board/static/views/record/curves.js

@@ -0,0 +1,137 @@
+import Chart from "../../components/chart.js";
+import { messageOf } from "../../components/error.js";
+
+
+const SETS = ["train", "val", "test"];
+const FAMILIES = ["loss", "lr", "grad_norm"];
+const AXES = ["turn", "update"];
+const LIMIT = 2000;
+
+function historyName(key) {
+  const cut = key.indexOf("/");
+  return cut > 0 && SETS.includes(key.slice(0, cut)) ? key.slice(cut + 1) : key;
+}
+
+function updateName(key) {
+  const cut = key.indexOf("/");
+  const family = cut > 0 ? key.slice(0, cut) : key;
+  return FAMILIES.includes(family) ? family : null;
+}
+
+function groupsOf(table, axis, nameOf) {
+  if (!table || !Array.isArray(table[axis])) return [];
+  const groups = new Map();
+  for (const key of Object.keys(table)) {
+    if (AXES.includes(key) || !Array.isArray(table[key])) continue;
+    const name = nameOf(key);
+    if (name === null) continue;
+    if (!groups.has(name)) groups.set(name, []);
+    groups.get(name).push({ name: key, x: table[axis], y: table[key] });
+  }
+  return Array.from(groups, ([title, series]) => ({ title, series }));
+}
+
+export default {
+  name: "CurvesTab",
+  components: { "k-chart": Chart },
+  props: {
+    record: { type: Object, default: null },
+    path: { type: String, default: "" },
+    api: { default: null },
+    version: { type: Number, default: 0 },
+  },
+  data() {
+    return { history: null, steps: null, error: "", loading: false, logy: false, filter: "", ruled: true };
+  },
+  computed: {
+    fired() { return this.record && Array.isArray(this.record.marks) ? this.record.marks : []; },
+    historyGroups() { return groupsOf(this.history, "turn", historyName); },
+    stepGroups() { return groupsOf(this.steps, "update", updateName); },
+    historyCharts() { return this.decorate(this.historyGroups, "turn"); },
+    stepCharts() { return this.decorate(this.stepGroups, "update"); },
+    turns() { return this.history && Array.isArray(this.history.turn) ? this.history.turn.length : 0; },
+    updates() { return this.steps && Array.isArray(this.steps.update) ? this.steps.update.length : 0; },
+    countText() { return this.turns + " turns, " + this.updates + " optimizer updates"; },
+    waiting() { return this.loading && !this.history; },
+  },
+  watch: {
+    record() { this.load(); },
+  },
+  mounted() { this.load(); },
+  methods: {
+    marksOn(axis) {
+      if (!this.ruled) return [];
+      return this.fired
+        .map(mark => ({ x: mark[axis], text: (mark.rules || []).join(", ") }))
+        .filter(mark => typeof mark.x === "number");
+    },
+    decorate(groups, xlabel) {
+      const wanted = this.filter.trim().toLowerCase();
+      const logy = this.logy;
+      const marks = this.marksOn(xlabel);
+      return groups
+        .filter(group => !wanted || group.title.toLowerCase().includes(wanted))
+        .map(group => ({
+          key: group.title + (logy ? " log" : ""),
+          title: group.title,
+          series: group.series,
+          options: { xlabel, ylabel: group.title, logy, marks },
+        }));
+    },
+    toggleLog() { this.logy = !this.logy; },
+    toggleRules() { this.ruled = !this.ruled; },
+    async load() {
+      if (!this.api) {
+        this.error = "the api prop is missing";
+        return;
+      }
+      const path = this.path;
+      this.loading = true;
+      try {
+        const found = await Promise.all([
+          this.api.getJson(this.api.recordUrl(path, "series", { limit: LIMIT })),
+          this.api.getJson(this.api.recordUrl(path, "updates", { limit: LIMIT })),
+        ]);
+        if (path !== this.path) return;
+        this.history = Object.freeze(found[0] || {});
+        this.steps = Object.freeze(found[1] || {});
+        this.error = "";
+      } catch (error) {
+        if (path === this.path) this.error = messageOf(error);
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  template: `
+  <div class="page pane-curves">
+    <div class="muted small">One chart per series of history.jsonl, one point per turn; train, val and test of the same name share
+      a chart. Below, the optimizer updates of updates.jsonl: the batch loss, the learning rate and the gradient norm of every
+      optimizer. A dotted line marks every turn a rule fired, with the names of the rules. Expand opens a chart large.</div>
+    <div class="toolbar">
+      <input class="filter" type="search" v-model="filter" placeholder="filter charts" spellcheck="false">
+      <button type="button" class="tool" :class="{ on: logy }" @click="toggleLog">log y on every chart</button>
+      <button type="button" class="tool" :class="{ on: ruled }" v-if="fired.length" @click="toggleRules">rule marks</button>
+      <button type="button" class="tool" :disabled="loading" @click="load">refresh</button>
+      <span class="muted small">{{ countText }}</span>
+    </div>
+    <div class="error-box" v-if="error">{{ error }}</div>
+    <div class="loading" v-if="waiting">reading the series</div>
+    <template v-if="history">
+      <h3 class="section-title">per turn</h3>
+      <div class="grid" v-if="historyCharts.length">
+        <k-chart v-for="chart in historyCharts" :key="chart.key" :title="chart.title" kind="lines" :data="chart.series"
+          :options="chart.options"></k-chart>
+      </div>
+      <div class="empty" v-else>no series written yet</div>
+    </template>
+    <template v-if="steps">
+      <h3 class="section-title">per optimizer update</h3>
+      <div class="grid" v-if="stepCharts.length">
+        <k-chart v-for="chart in stepCharts" :key="chart.key" :title="chart.title" kind="lines" :data="chart.series"
+          :options="chart.options"></k-chart>
+      </div>
+      <div class="empty" v-else>no update written yet</div>
+    </template>
+  </div>`,
+};

kalfa/board/static/views/record/data.js

@@ -0,0 +1,378 @@
+import { Diagram } from "../../components/diagram.js";
+import Table from "../../components/table.js";
+import { integer } from "../../format.js";
+
+
+const FACTS = ["kind", "labels", "image_shape", "mode", "transform", "train_transform", "drops", "spectators", "filter"];
+const SET_ORDER = ["train", "valid", "test"];
+const CROWDED = 40;
+const COLUMN_COLUMNS = [
+  { key: "name", label: "column", className: "mono" },
+  { key: "steps", label: "steps", className: "mono", sortable: false },
+];
+
+function present(value) {
+  if (value === null || value === undefined || value === "") return false;
+  return !(Array.isArray(value) && !value.length);
+}
+
+function shown(value) {
+  if (!present(value)) return "";
+  if (Array.isArray(value)) return value.map(shown).join(", ");
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+
+function listOf(value) {
+  if (Array.isArray(value)) return value.map(String);
+  if (value && typeof value === "object") return Object.keys(value);
+  return present(value) ? [String(value)] : [];
+}
+
+function chainOf(value) {
+  return Array.isArray(value) ? value.map(shown).join(" → ") : shown(value);
+}
+
+function fieldRow(name, value) {
+  if (value && typeof value === "object" && !Array.isArray(value)) {
+    return {
+      name,
+      type: shown(value.type || value.dtype),
+      role: value.target ? "target" : "input",
+      columns: listOf(value.columns),
+      chain: chainOf(value.preprocessors || value.chain),
+    };
+  }
+  return { name, type: shown(value), role: "", columns: [], chain: "" };
+}
+
+function isMapping(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+
+function setOrder(names) {
+  const known = SET_ORDER.filter(name => names.includes(name));
+  return [...known, ...names.filter(name => !SET_ORDER.includes(name))];
+}
+
+function perSet(value, sets) {
+  if (!isMapping(value)) return false;
+  const keys = Object.keys(value);
+  return keys.length > 0 && keys.every(key => sets.includes(key) && (value[key] === null || typeof value[key] === "number"));
+}
+
+export default {
+  name: "DataTab",
+  components: { KDiagram: Diagram, KTable: Table },
+  props: {
+    record: { type: Object, default: null },
+    path: { type: String, default: "" },
+    api: { default: null },
+    version: { type: Number, default: 0 },
+  },
+  data() {
+    return { selected: null };
+  },
+  created() {
+    this.drawn = null;
+  },
+  watch: {
+    path() { this.selected = null; },
+  },
+  computed: {
+    dataReport() {
+      const found = this.record && this.record.data_report;
+      return isMapping(found) ? found : null;
+    },
+    report() { return this.dataReport && isMapping(this.dataReport.report) ? this.dataReport.report : {}; },
+    kind() { return this.dataReport ? shown(this.dataReport.kind) : ""; },
+    pipeline() {
+      const found = this.dataReport && this.dataReport.pipeline;
+      if (!isMapping(found) || !Array.isArray(found.nodes) || !found.nodes.length) return null;
+      const key = JSON.stringify(found);
+      if (this.drawn && this.drawn.key === key) return this.drawn.graph;
+      const graph = { nodes: found.nodes, edges: Array.isArray(found.edges) ? found.edges : [], groups: Array.isArray(found.groups) ? found.groups : [] };
+      this.drawn = { key, graph };
+      return graph;
+    },
+    crowded() { return Boolean(this.pipeline) && this.pipeline.nodes.length > CROWDED; },
+    collapsed() {
+      if (!this.crowded) return [];
+      return this.pipeline.groups.filter(group => !group.parent).map(group => group.id);
+    },
+    diagramHeight() { return this.crowded ? 560 : 420; },
+    diagramTitle() {
+      const name = String(this.path || "").split("/").filter(Boolean).pop() || "record";
+      return name + "_data";
+    },
+    groupLabels() {
+      const labels = {};
+      for (const group of this.pipeline ? this.pipeline.groups : []) labels[group.id] = shown(group.label);
+      return labels;
+    },
+    selectedRows() {
+      const node = this.selected;
+      if (!node) return [];
+      const rows = [{ name: "kind", value: shown(node.kind) }];
+      if (present(node.detail)) rows.push({ name: "detail", value: shown(node.detail) });
+      if (typeof node.count === "number") rows.push({ name: "count", value: integer(node.count) });
+      if (node.group) rows.push({ name: "group", value: this.groupLabels[node.group] || shown(node.group) });
+      const into = this.pipeline ? this.pipeline.edges.filter(edge => edge.to === node.id && present(edge.label)) : [];
+      if (into.length) rows.push({ name: "arrives as", value: into.map(edge => shown(edge.label)).join(", ") });
+      return rows;
+    },
+    setCounts() { return isMapping(this.report.rows) ? this.report.rows : {}; },
+    setExtras() {
+      const known = [...Object.keys(this.setCounts), ...SET_ORDER];
+      return Object.keys(this.report).filter(key => key !== "rows" && perSet(this.report[key], known));
+    },
+    sets() {
+      const names = new Set(Object.keys(this.setCounts));
+      for (const key of this.setExtras) Object.keys(this.report[key]).forEach(name => names.add(name));
+      return setOrder([...names]);
+    },
+    setRows() {
+      return this.sets.map(name => {
+        const row = { name, rows: this.setCounts[name] };
+        for (const key of this.setExtras) row[key] = this.report[key][name];
+        return row;
+      });
+    },
+    setTotal() { return Object.values(this.setCounts).reduce((sum, count) => sum + (Number(count) || 0), 0); },
+    columnColumns() { return COLUMN_COLUMNS; },
+    columnRows() {
+      if (!isMapping(this.report.columns)) return [];
+      return Object.entries(this.report.columns).map(([name, steps]) => ({ name, steps: chainOf(steps) || "as read" }));
+    },
+    manyColumns() { return this.columnRows.length > 12; },
+    reportFacts() {
+      const skipped = new Set(["rows", "columns", ...this.setExtras]);
+      return Object.entries(this.report)
+        .filter(([key, value]) => !skipped.has(key) && present(value))
+        .map(([name, value]) => ({ name, value: shown(value) }));
+    },
+    plan() { return (this.record && this.record.plan) || {}; },
+    planData() { return this.plan.data && typeof this.plan.data === "object" ? this.plan.data : {}; },
+    source() {
+      const nodes = this.plan.nodes && typeof this.plan.nodes === "object" ? this.plan.nodes : {};
+      return nodes.data && typeof nodes.data === "object" ? nodes.data : null;
+    },
+    sourceRows() {
+      const params = this.source && this.source.params && typeof this.source.params === "object" ? this.source.params : {};
+      return Object.entries(params).map(([name, value]) => ({ name, value: shown(value) }));
+    },
+    targets() {
+      const params = (this.source && this.source.params) || {};
+      return listOf(params.targets);
+    },
+    inputs() { return listOf(this.planData.inputs); },
+    exposes() { return listOf(this.planData.exposes); },
+    classes() { return listOf(this.planData.classes); },
+    fieldRows() {
+      const fields = this.planData.fields && typeof this.planData.fields === "object" ? this.planData.fields : {};
+      const targets = this.targets;
+      return Object.entries(fields).map(([name, value]) => {
+        const row = fieldRow(name, value);
+        if (!row.role && targets.includes(name)) row.role = "target";
+        return row;
+      });
+    },
+    fitted() { return this.record && this.record.fields && typeof this.record.fields === "object" ? this.record.fields : null; },
+    features() {
+      const features = this.fitted && Array.isArray(this.fitted.features) ? this.fitted.features : [];
+      return features.map((item, index) => ({
+        key: String(index),
+        pattern: shown(item.pattern),
+        columns: listOf(item.columns),
+        names: listOf(item.names),
+        chain: chainOf(item.chain),
+      }));
+    },
+    targetFields() {
+      const fields = this.fitted && Array.isArray(this.fitted.target_fields) ? this.fitted.target_fields : [];
+      return fields.map((item, index) => ({
+        key: String(index),
+        name: shown(item.name),
+        width: shown(item.width),
+        chain: chainOf(item.chain),
+        classes: listOf(item.classes),
+        weights: Array.isArray(item.class_weights) ? item.class_weights.map(shown).join(", ") : "",
+      }));
+    },
+    fittedTargets() {
+      if (!this.fitted || this.targetFields.length) return [];
+      return listOf(this.fitted.targets);
+    },
+    fittedClasses() { return this.fitted ? listOf(this.fitted.classes) : []; },
+    featureCount() { return this.fitted && Array.isArray(this.fitted.feature_names) ? this.fitted.feature_names.length : 0; },
+    facts() {
+      if (!this.fitted) return [];
+      return FACTS.filter(name => present(this.fitted[name])).map(name => ({ name, value: shown(this.fitted[name]) }));
+    },
+  },
+  methods: {
+    integer,
+    pick(node) { this.selected = node || null; },
+  },
+  template: `
+  <div class="page pane-data">
+    <template v-if="dataReport">
+      <div class="muted small">The data as the run read it (data.json): where the rows come from, how they are filtered and split
+        into sets, the chains fitted on the train rows and the tensors every batch carries. Click a box for its details.
+        Below, the sets and columns the run reported, then the data as the plan saw it and as the run fitted it.</div>
+      <section class="card" v-if="pipeline">
+        <div class="card-head"><span class="card-title">pipeline</span><span class="muted mono" v-if="kind">{{ kind }}</span></div>
+        <k-diagram :graph="pipeline" direction="LR" :height="diagramHeight" :collapsed="collapsed" :title="diagramTitle"
+          @select="pick"></k-diagram>
+        <div class="table-wrap" v-if="selected">
+          <table class="data">
+            <thead><tr><th colspan="2">{{ selected.label }}</th></tr></thead>
+            <tbody>
+              <tr v-for="row in selectedRows" :key="row.name">
+                <td class="muted">{{ row.name }}</td>
+                <td class="mono" style="white-space: normal; overflow-wrap: anywhere">{{ row.value }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+      <div class="empty" v-else>the run could not draw the data flowchart; the tables below still describe the data</div>
+      <div class="grid">
+        <section class="card" v-if="setRows.length">
+          <div class="card-head"><span class="card-title">sets</span><span class="muted small">{{ integer(setTotal) }} rows in all</span></div>
+          <div class="table-wrap">
+            <table class="data">
+              <thead><tr><th>set</th><th class="num">rows</th><th class="num" v-for="key in setExtras" :key="key">{{ key }}</th></tr></thead>
+              <tbody>
+                <tr v-for="row in setRows" :key="row.name">
+                  <td class="mono">{{ row.name }}</td>
+                  <td class="num mono">{{ integer(row.rows) }}</td>
+                  <td class="num mono" v-for="key in setExtras" :key="key">{{ integer(row[key]) }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </section>
+        <section class="card" v-if="reportFacts.length">
+          <div class="card-head"><span class="card-title">report</span></div>
+          <div class="table-wrap">
+            <table class="data">
+              <tbody>
+                <tr v-for="row in reportFacts" :key="row.name">
+                  <td class="muted">{{ row.name }}</td>
+                  <td class="mono" style="white-space: normal; overflow-wrap: anywhere">{{ row.value }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </section>
+      </div>
+      <section class="card" v-if="columnRows.length">
+        <div class="card-head"><span class="card-title">columns into the model</span><span class="muted small">{{ columnRows.length }}</span></div>
+        <k-table :columns="columnColumns" :rows="columnRows" row-key="name" :filterable="manyColumns" placeholder="filter columns"
+          empty="no columns"></k-table>
+      </section>
+    </template>
+    <div class="muted small" v-if="!dataReport">The data as the plan saw it before training (plan.json) and as the run fitted it (fitted/fields.json):
+      the feature blocks with their columns and preprocessor chains, the targets and their classes.</div>
+    <div class="grid">
+      <section class="card">
+        <div class="card-head"><span class="card-title">source</span><span class="muted mono" v-if="source">{{ source.use }}</span></div>
+        <div class="table-wrap" v-if="sourceRows.length">
+          <table class="data">
+            <tbody>
+              <tr v-for="row in sourceRows" :key="row.name">
+                <td class="muted">{{ row.name }}</td>
+                <td class="mono" style="white-space: normal; overflow-wrap: anywhere">{{ row.value }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="empty" v-if="!source">the plan has no data node</div>
+      </section>
+      <section class="card">
+        <div class="card-head"><span class="card-title">wiring</span></div>
+        <div class="table-wrap">
+          <table class="data">
+            <tbody>
+              <tr><td class="muted">inputs</td><td class="mono">{{ inputs.join(", ") }}</td></tr>
+              <tr v-if="exposes.length"><td class="muted">exposes</td><td class="mono">{{ exposes.join(", ") }}</td></tr>
+              <tr v-if="targets.length"><td class="muted">targets</td><td class="mono">{{ targets.join(", ") }}</td></tr>
+              <tr v-if="classes.length"><td class="muted">classes</td><td class="mono" style="white-space: normal">{{ classes.join(", ") }}</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+    <section class="card" v-if="fieldRows.length">
+      <div class="card-head"><span class="card-title">fields in the plan</span><span class="muted small">{{ fieldRows.length }}</span></div>
+      <div class="table-wrap">
+        <table class="data">
+          <thead><tr><th>name</th><th>type</th><th>role</th><th>columns</th><th>preprocessors</th></tr></thead>
+          <tbody>
+            <tr v-for="row in fieldRows" :key="row.name">
+              <td class="mono">{{ row.name }}</td>
+              <td class="mono">{{ row.type }}</td>
+              <td>{{ row.role }}</td>
+              <td class="mono" style="white-space: normal">{{ row.columns.join(", ") }}</td>
+              <td class="mono">{{ row.chain }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+    <template v-if="fitted">
+      <section class="card" v-if="features.length">
+        <div class="card-head"><span class="card-title">fitted features</span><span class="muted small">{{ featureCount }} columns into the model</span></div>
+        <div class="table-wrap">
+          <table class="data">
+            <thead><tr><th>pattern</th><th>columns</th><th>chain</th></tr></thead>
+            <tbody>
+              <tr v-for="item in features" :key="item.key">
+                <td class="mono">{{ item.pattern }}</td>
+                <td style="white-space: normal">
+                  <details>
+                    <summary style="cursor: pointer">{{ item.columns.length }} columns</summary>
+                    <div class="mono">{{ item.columns.join(", ") }}</div>
+                    <div class="muted mono" v-if="item.names.length">model names: {{ item.names.join(", ") }}</div>
+                  </details>
+                </td>
+                <td class="mono">{{ item.chain }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+      <section class="card" v-if="targetFields.length || fittedTargets.length">
+        <div class="card-head"><span class="card-title">fitted targets</span></div>
+        <div class="table-wrap" v-if="targetFields.length">
+          <table class="data">
+            <thead><tr><th>name</th><th class="num">width</th><th>chain</th><th>classes</th><th>class weights</th></tr></thead>
+            <tbody>
+              <tr v-for="item in targetFields" :key="item.key">
+                <td class="mono">{{ item.name }}</td>
+                <td class="num mono">{{ item.width }}</td>
+                <td class="mono">{{ item.chain }}</td>
+                <td class="mono" style="white-space: normal">{{ item.classes.join(", ") }}</td>
+                <td class="mono" style="white-space: normal">{{ item.weights }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="mono" v-else>{{ fittedTargets.join(", ") }}</div>
+      </section>
+      <section class="card" v-if="facts.length || fittedClasses.length">
+        <div class="card-head"><span class="card-title">fitted settings</span></div>
+        <div class="table-wrap">
+          <table class="data">
+            <tbody>
+              <tr v-if="fittedClasses.length"><td class="muted">classes</td><td class="mono" style="white-space: normal">{{ fittedClasses.join(", ") }}</td></tr>
+              <tr v-for="row in facts" :key="row.name"><td class="muted">{{ row.name }}</td><td class="mono" style="white-space: normal">{{ row.value }}</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </template>
+    <div class="empty" v-else>no fitted/fields.json in this record</div>
+  </div>`,
+};

kalfa/board/static/views/record/files.js

@@ -0,0 +1,128 @@
+import { messageOf } from "../../components/error.js";
+import { bytes, when } from "../../format.js";
+
+
+const TEXTS = [".yaml", ".yml", ".json", ".jsonl", ".txt", ".md", ".csv", ".py", ".sh", ".sub", ".log"];
+const IMAGES = [".png", ".jpg", ".jpeg", ".gif", ".svg"];
+const TAIL = 200;
+const LINK = "border: 0; background: none; padding: 0; font: inherit; cursor: pointer; text-align: left";
+const CODE = "overflow: auto; max-height: 70vh; padding: 10px; background: var(--surface-2); border-radius: 6px; white-space: pre";
+
+function kindOf(name) {
+  const lower = String(name).toLowerCase();
+  if (TEXTS.some(suffix => lower.endsWith(suffix))) return "text";
+  if (IMAGES.some(suffix => lower.endsWith(suffix))) return "image";
+  return "binary";
+}
+
+function basename(name) {
+  const parts = String(name).split("/");
+  return parts[parts.length - 1];
+}
+
+export default {
+  name: "FilesTab",
+  props: {
+    record: { type: Object, default: null },
+    path: { type: String, default: "" },
+    api: { default: null },
+    version: { type: Number, default: 0 },
+  },
+  data() {
+    return { filter: "", view: null, error: "", loading: false };
+  },
+  computed: {
+    link() { return LINK; },
+    code() { return CODE; },
+    tail() { return TAIL; },
+    all() { return this.record && Array.isArray(this.record.files) ? this.record.files : []; },
+    files() {
+      const wanted = this.filter.trim().toLowerCase();
+      return wanted ? this.all.filter(item => String(item.path).toLowerCase().includes(wanted)) : this.all;
+    },
+    countText() {
+      if (this.files.length === this.all.length) return this.all.length + " files";
+      return this.files.length + " of " + this.all.length + " files";
+    },
+    partial() { return Boolean(this.view && this.view.kind === "text" && !this.view.whole); },
+    splitClass() { return this.view ? "grid" : ""; },
+  },
+  watch: {
+    record() {
+      if (this.partial) this.open(this.view.name, false, true);
+    },
+  },
+  methods: {
+    bytes,
+    basename,
+    moment(value) { return when(value); },
+    url(name, tail) { return this.api ? this.api.fileUrl(this.path, name, tail || null) : ""; },
+    isOpen(name) { return Boolean(this.view && this.view.name === name); },
+    rowClass(name) { return this.isOpen(name) ? "selected" : ""; },
+    close() { this.view = null; },
+    async open(name, whole, quiet) {
+      const kind = kindOf(name);
+      if (kind !== "text") {
+        this.view = { name, kind, text: "", whole: true };
+        return;
+      }
+      if (!this.api) {
+        this.error = "the api prop is missing";
+        return;
+      }
+      const path = this.path;
+      if (!quiet) this.loading = true;
+      try {
+        const text = await this.api.getText(this.url(name, whole ? 0 : TAIL));
+        if (path !== this.path) return;
+        this.view = { name, kind, text, whole: Boolean(whole) };
+        this.error = "";
+      } catch (error) {
+        if (path === this.path) this.error = messageOf(error);
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  template: `
+  <div class="page pane-files">
+    <div class="muted small">Every file of the record with its size and the time it last changed. A name opens it here: the last
+      lines of a text file, images inline; save downloads any file as it is. An open text file follows the record while it runs.</div>
+    <div class="toolbar">
+      <input class="filter" type="search" v-model="filter" placeholder="filter files" spellcheck="false">
+      <span class="muted small">{{ countText }}</span>
+      <span class="muted small" v-if="loading">reading</span>
+    </div>
+    <div class="error-box" v-if="error">{{ error }}</div>
+    <div :class="splitClass" style="align-items: start">
+      <div class="table-wrap">
+        <table class="data">
+          <thead><tr><th>file</th><th class="num">size</th><th>modified</th><th></th></tr></thead>
+          <tbody>
+            <tr v-for="item in files" :key="item.path" :class="rowClass(item.path)">
+              <td class="mono"><button type="button" class="link" :style="link" @click="open(item.path, false)">{{ item.path }}</button></td>
+              <td class="num mono">{{ bytes(item.size) }}</td>
+              <td class="muted">{{ moment(item.modified) }}</td>
+              <td><a class="tool" :href="url(item.path, 0)" :download="basename(item.path)">save</a></td>
+            </tr>
+            <tr v-if="!files.length"><td class="empty" colspan="4">no files</td></tr>
+          </tbody>
+        </table>
+      </div>
+      <section class="card" v-if="view">
+        <div class="card-head">
+          <span class="card-title mono">{{ view.name }}</span>
+          <span class="card-tools">
+            <span class="muted small" v-if="partial">the last {{ tail }} lines</span>
+            <button type="button" class="tool" v-if="partial" @click="open(view.name, true)">whole file</button>
+            <a class="tool" :href="url(view.name, 0)" :download="basename(view.name)">save</a>
+            <button type="button" class="tool" @click="close">close</button>
+          </span>
+        </div>
+        <pre class="mono" v-if="view.kind === 'text'" :style="code">{{ view.text }}</pre>
+        <img v-else-if="view.kind === 'image'" :src="url(view.name, 0)" :alt="view.name" style="max-width: 100%; background: #fff">
+        <div class="muted" v-else>{{ view.name }} is not shown here; save downloads it</div>
+      </section>
+    </div>
+  </div>`,
+};