kalfa 3.0.0.dev0__py3-none-any.whl

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

@@ -0,0 +1,164 @@
+import { messageOf } from "../../components/error.js";
+import { when } from "../../format.js";
+
+
+const LIMIT = 200;
+const TAIL = 300;
+const OUTPUT = "log.txt";
+const CODE = "overflow: auto; max-height: 50vh; margin: 0; padding: 10px; background: var(--surface-2); border-radius: 6px; white-space: pre";
+const SKIP = ["at", "turn", "kind"];
+const TONES = {
+  run_start: "var(--done)",
+  run_end: "var(--done)",
+  resume: "var(--running)",
+  checkpoint: "var(--running)",
+  patch: "var(--stale)",
+  rule: "var(--stale)",
+  warning: "var(--stale)",
+  stop: "var(--failed)",
+  stopping: "var(--failed)",
+  failure: "var(--failed)",
+  error: "var(--failed)",
+};
+const ROW = "display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; padding: 3px 0";
+
+function shown(value) {
+  if (value === null || value === undefined) return "none";
+  if (Array.isArray(value)) return value.map(shown).join(", ");
+  if (typeof value === "object") {
+    if (typeof value.ref === "string") return "@" + value.ref;
+    return JSON.stringify(value);
+  }
+  return String(value);
+}
+
+export default {
+  name: "LogTab",
+  props: {
+    record: { type: Object, default: null },
+    path: { type: String, default: "" },
+    api: { default: null },
+    version: { type: Number, default: 0 },
+  },
+  data() {
+    return { fetched: null, error: "", loading: false, kind: "", output: "", outputError: "" };
+  },
+  computed: {
+    row() { return ROW; },
+    code() { return CODE; },
+    tail() { return TAIL; },
+    hasOutput() {
+      const files = this.record && Array.isArray(this.record.files) ? this.record.files : [];
+      return files.some(item => item && item.path === OUTPUT);
+    },
+    outputUrl() { return this.api ? this.api.fileUrl(this.path, OUTPUT, null) : ""; },
+    events() {
+      if (Array.isArray(this.fetched)) return this.fetched;
+      return this.record && Array.isArray(this.record.events) ? this.record.events : [];
+    },
+    kinds() {
+      const found = [];
+      for (const event of this.events) {
+        if (event && event.kind && !found.includes(event.kind)) found.push(event.kind);
+      }
+      return found;
+    },
+    groups() {
+      const groups = [];
+      for (const event of this.events) {
+        if (!event || (this.kind && event.kind !== this.kind)) continue;
+        const turn = event.turn === undefined || event.turn === null ? null : event.turn;
+        const last = groups[groups.length - 1];
+        if (last && last.turn === turn) last.events.push(event);
+        else groups.push({ key: String(groups.length), turn, events: [event] });
+      }
+      return groups.reverse().map(group => ({ ...group, events: group.events.slice().reverse() }));
+    },
+    countText() {
+      const asked = Array.isArray(this.fetched) ? ", up to " + LIMIT + " asked" : ", the latest the record carries";
+      return this.events.length + " events" + asked;
+    },
+    button() { return Array.isArray(this.fetched) ? "refresh" : "load the last " + LIMIT; },
+  },
+  watch: {
+    record() {
+      if (Array.isArray(this.fetched)) this.load();
+      this.loadOutput();
+    },
+  },
+  mounted() { this.loadOutput(); },
+  methods: {
+    async loadOutput() {
+      if (!this.api || !this.hasOutput) return;
+      const path = this.path;
+      try {
+        const text = await this.api.getText(this.api.fileUrl(path, OUTPUT, TAIL));
+        if (path !== this.path) return;
+        this.output = text;
+        this.outputError = "";
+      } catch (error) {
+        if (path === this.path) this.outputError = messageOf(error);
+      }
+    },
+    moment(value) { return when(value); },
+    title(group) { return group.turn === null ? "no turn" : "turn " + group.turn; },
+    tone(kind) { return { "--tone": TONES[kind] || "var(--muted)", minWidth: "84px", textAlign: "center" }; },
+    details(event) {
+      return Object.entries(event).filter(([key]) => !SKIP.includes(key)).map(([key, value]) => key + " " + shown(value))
+        .join(", ");
+    },
+    async load() {
+      if (!this.api) {
+        this.error = "the api prop is missing";
+        return;
+      }
+      const path = this.path;
+      this.loading = true;
+      try {
+        const found = await this.api.getJson(this.api.recordUrl(path, "events", { limit: LIMIT }));
+        if (path !== this.path) return;
+        this.fetched = Object.freeze(Array.isArray(found) ? found : []);
+        this.error = "";
+      } catch (error) {
+        if (path === this.path) this.error = messageOf(error);
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  template: `
+  <div class="page pane-log">
+    <section class="card" v-if="hasOutput">
+      <div class="card-head">
+        <span class="card-title">output</span>
+        <span class="card-tools">
+          <span class="muted small">the last {{ tail }} lines of log.txt, followed while the record runs</span>
+          <a class="tool" :href="outputUrl" download="log.txt">save</a>
+        </span>
+      </div>
+      <div class="error-box" v-if="outputError">{{ outputError }}</div>
+      <pre class="mono" :style="code">{{ output }}</pre>
+    </section>
+    <div class="muted small">The events of the record from events.jsonl, newest first and grouped by turn: the start and the end
+      of the run, checkpoints, the patches rules applied, stops and failures.</div>
+    <div class="toolbar">
+      <button type="button" class="tool" :disabled="loading" @click="load">{{ button }}</button>
+      <select class="filter" v-model="kind" style="width: auto">
+        <option value="">every kind</option>
+        <option v-for="item in kinds" :key="item" :value="item">{{ item }}</option>
+      </select>
+      <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="empty" v-if="!groups.length">no events yet</div>
+    <section class="card" v-for="group in groups" :key="group.key">
+      <div class="card-head"><span class="card-title">{{ title(group) }}</span><span class="muted small">{{ group.events.length }}</span></div>
+      <div v-for="(event, index) in group.events" :key="index" :style="row">
+        <span class="badge" :style="tone(event.kind)">{{ event.kind || "event" }}</span>
+        <span class="muted mono">{{ moment(event.at) }}</span>
+        <span class="mono" style="overflow-wrap: anywhere">{{ details(event) }}</span>
+      </div>
+    </section>
+  </div>`,
+};

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

@@ -0,0 +1,286 @@
+import { Diagram, shapeText } from "../../components/diagram.js";
+import { integer, percent } from "../../format.js";
+
+
+const COLUMNS = "minmax(120px, 1.3fr) minmax(100px, 1fr) 96px minmax(80px, 160px) 44px";
+const ROW = "display: inline-grid; grid-template-columns: " + COLUMNS + "; gap: 10px; align-items: center; width: calc(100% - 20px)";
+const LEAF = "display: grid; grid-template-columns: " + COLUMNS + "; gap: 10px; align-items: center; padding: 2px 0 2px 20px";
+
+function shapeOf(value) {
+  if (Array.isArray(value)) return value.join(" × ");
+  if (value && typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+
+function shown(value) {
+  if (value === null || value === undefined) return "";
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+
+const ModuleNode = {
+  name: "ModuleNode",
+  props: {
+    node: { type: Object, required: true },
+    total: { type: Number, default: 0 },
+    depth: { type: Number, default: 0 },
+  },
+  computed: {
+    row() { return ROW; },
+    leaf() { return LEAF; },
+    children() { return Array.isArray(this.node.children) ? this.node.children : []; },
+    type() { return this.node.class || ""; },
+    parameters() { return integer(Number(this.node.parameters) || 0); },
+    share() {
+      const own = Number(this.node.parameters) || 0;
+      return this.total > 0 ? Math.max(0, Math.min(1, own / this.total)) : 0;
+    },
+    shareText() { return percent(this.share); },
+    fill() { return { width: (this.share * 100).toFixed(1) + "%" }; },
+    opened() { return this.depth === 0; },
+  },
+  template: `
+    <details v-if="children.length" class="module" :open="opened">
+      <summary style="cursor: pointer">
+        <span :style="row">
+          <span class="mono">{{ node.name }}</span>
+          <span class="muted small">{{ type }}</span>
+          <span class="num mono">{{ parameters }}</span>
+          <span class="progress-track"><span class="progress-fill" :style="fill"></span></span>
+          <span class="num muted small">{{ shareText }}</span>
+        </span>
+      </summary>
+      <div class="module-children" style="padding-left: 18px">
+        <module-node v-for="(child, index) in children" :key="index" :node="child" :total="total" :depth="depth + 1"></module-node>
+      </div>
+    </details>
+    <div v-else class="module" :style="leaf">
+      <span class="mono">{{ node.name }}</span>
+      <span class="muted small">{{ type }}</span>
+      <span class="num mono">{{ parameters }}</span>
+      <span class="progress-track"><span class="progress-fill" :style="fill"></span></span>
+      <span class="num muted small">{{ shareText }}</span>
+    </div>`,
+};
+
+ModuleNode.components = { "module-node": ModuleNode };
+
+const CROWDED = 60;
+
+function graphOf(model) {
+  const graph = model.graph;
+  return graph && typeof graph === "object" && Array.isArray(graph.nodes) && graph.nodes.length ? graph : null;
+}
+
+function missingText(model) {
+  if (!Object.prototype.hasOwnProperty.call(model, "graph")) {
+    return "This record was written before kalfa drew model diagrams, so the module tree is shown instead.";
+  }
+  const note = model.graph_note ? " (" + model.graph_note + ")" : "";
+  return "kalfa drew no diagram for this model" + note + ". It traces a model on the first batch with the fields the " +
+    "model reads, and when a loss calls the model with inputs of its own, such as a diffusion denoiser or a generator, " +
+    "on the inputs of its first call in training, which exist once the first turn is over. The module tree is shown " +
+    "instead.";
+}
+
+function topGroups(graph) {
+  const groups = Array.isArray(graph.groups) ? graph.groups : [];
+  return groups.filter(group => group && (group.parent === null || group.parent === undefined)).map(group => String(group.id));
+}
+
+function outputRows(outputs) {
+  return Object.entries(outputs || {}).map(([label, shape]) => ({ label, shape: shapeOf(shape) }));
+}
+
+function shapeRows(outputs, perSample) {
+  const sampled = new Map(perSample.map(item => [item.label, item.shape]));
+  const rows = outputs.map(item => ({ key: item.label, label: item.label, batch: item.shape, sample: sampled.get(item.label) || "" }));
+  const named = new Set(outputs.map(item => item.label));
+  for (const item of perSample) {
+    if (!named.has(item.label)) rows.push({ key: "sample:" + item.label, label: item.label, batch: "", sample: item.shape });
+  }
+  return rows;
+}
+
+export default {
+  name: "ModelTab",
+  components: { "module-node": ModuleNode, "k-diagram": Diagram },
+  props: {
+    record: { type: Object, default: null },
+    path: { type: String, default: "" },
+    api: { default: null },
+    version: { type: Number, default: 0 },
+  },
+  data() {
+    return { views: {}, picked: {} };
+  },
+  computed: {
+    nodes() {
+      const plan = (this.record && this.record.plan) || {};
+      return plan.nodes && typeof plan.nodes === "object" ? plan.nodes : {};
+    },
+    models() {
+      const summary = (this.record && this.record.model_summary) || {};
+      return Object.entries(summary).map(([name, entry]) => {
+        const model = entry && typeof entry === "object" ? entry : {};
+        const node = this.nodes["models." + name] || {};
+        const params = node.params && typeof node.params === "object" ? node.params : {};
+        const parameters = Number(model.parameters) || 0;
+        const trainable = Number(model.trainable) || 0;
+        const graph = graphOf(model);
+        const kinds = graph ? graph.nodes.map(item => item && item.kind) : [];
+        const outputs = outputRows(model.outputs);
+        const perSample = graph ? graph.nodes.filter(item => item && item.kind === "output")
+          .map(item => ({ label: String(item.label), shape: shapeText(item.shape) || "?" })) : [];
+        return {
+          name,
+          type: model.class || node.use || "",
+          parameters,
+          total: integer(parameters),
+          trainable: integer(trainable),
+          frozen: model.trainable !== undefined && model.trainable !== null && trainable !== parameters,
+          tree: Array.isArray(model.tree) ? model.tree : [],
+          shapes: shapeRows(outputs, perSample),
+          params: Object.entries(params).map(([key, value]) => ({ key, value: shown(value) })),
+          graph,
+          drawnFromCall: Boolean(graph) && model.graph_from === "first training call",
+          missing: graph ? "" : missingText(model),
+          collapsed: graph && graph.nodes.length > CROWDED ? topGroups(graph) : [],
+          modules: kinds.filter(kind => kind === "module").length,
+          ops: kinds.filter(kind => kind === "op").length,
+          truncated: Boolean(graph && graph.truncated),
+        };
+      });
+    },
+    details() {
+      return Object.fromEntries(this.models.map(model => [model.name, this.detail(model)]));
+    },
+  },
+  methods: {
+    viewOf(model) {
+      const chosen = this.views[model.name];
+      if (chosen === "diagram" && !model.graph) return "tree";
+      return chosen || (model.graph ? "diagram" : "tree");
+    },
+    show(model, view) {
+      this.views = { ...this.views, [model.name]: view };
+    },
+    select(model, node) {
+      this.picked = { ...this.picked, [model.name]: node ? String(node.id) : null };
+    },
+    detail(model) {
+      const id = this.picked[model.name];
+      if (!model.graph || id === null || id === undefined) return null;
+      const byId = new Map(model.graph.nodes.filter(Boolean).map(item => [String(item.id), item]));
+      const node = byId.get(id);
+      if (!node) return null;
+      const groups = new Map((model.graph.groups || []).filter(Boolean).map(group => [String(group.id), group]));
+      const name = (other) => {
+        const found = byId.get(String(other));
+        return found ? String(found.label) + (found.path ? " " + found.path : "") : String(other);
+      };
+      const edges = Array.isArray(model.graph.edges) ? model.graph.edges.filter(Boolean) : [];
+      const group = node.group === null || node.group === undefined ? null : groups.get(String(node.group));
+      const rows = [
+        ["path", node.path || ""],
+        ["class", node.class || ""],
+        ["detail", node.detail && node.detail !== node.path ? node.detail : ""],
+        ["shape", shapeText(node.shape)],
+        ["parameters", typeof node.parameters === "number" ? integer(node.parameters) : ""],
+        ["inside", group ? [group.label, group.detail].filter(Boolean).join(", ") : ""],
+      ].filter(row => row[1] !== "" && row[1] !== null && row[1] !== undefined);
+      return {
+        label: String(node.label),
+        kind: String(node.kind || ""),
+        rows,
+        inputs: edges.filter(edge => String(edge.to) === id).map(edge => ({ name: name(edge.from), shape: shapeText(edge.shape) })),
+        outputs: edges.filter(edge => String(edge.from) === id).map(edge => ({ name: name(edge.to), shape: shapeText(edge.shape) })),
+      };
+    },
+  },
+  template: `
+  <div class="page pane-model">
+    <div class="muted small">Every model of the run from model_summary.json, written when the run starts and again when it
+      ends: its parameter counts, a diagram of one forward pass on the first batch, its modules as a tree and the shapes of
+      its outputs. In the diagram, shapes are per sample (the batch size left out) and the corner number is the parameter
+      count; in the tree, the bar is the share of the model's parameters a module holds.</div>
+    <div class="empty" v-if="!models.length">no model_summary.json yet; the run writes it before its first turn</div>
+    <section class="card" v-for="model in models" :key="model.name">
+      <div class="card-head">
+        <span class="card-title">{{ model.name }}</span>
+        <span class="muted mono">{{ model.type }}</span>
+      </div>
+      <div class="toolbar">
+        <span class="chip">{{ model.total }} parameters</span>
+        <span class="chip">{{ model.trainable }} trainable<span v-if="model.frozen">, the rest frozen</span></span>
+        <span class="chip" v-if="model.graph">{{ model.modules }} module calls, {{ model.ops }} operations</span>
+        <span class="chip" v-if="model.drawnFromCall"
+          title="the batch does not hold this model's inputs, so the diagram follows its first call in training">drawn from its first call in training</span>
+      </div>
+      <div class="muted small mono" v-if="model.params.length">
+        <span class="chip" v-for="item in model.params" :key="item.key">{{ item.key }} {{ item.value }}</span>
+      </div>
+      <div class="model-views">
+        <button type="button" class="tab" :class="{ active: viewOf(model) === 'diagram' }" :disabled="!model.graph"
+          :title="model.graph ? 'one forward pass on the first batch' : 'no diagram for this model'" @click="show(model, 'diagram')">diagram</button>
+        <button type="button" class="tab" :class="{ active: viewOf(model) === 'tree' }" @click="show(model, 'tree')">module tree</button>
+        <button type="button" class="tab" :class="{ active: viewOf(model) === 'outputs' }" @click="show(model, 'outputs')">output shapes</button>
+      </div>
+      <template v-if="viewOf(model) === 'diagram'">
+        <div class="notice-box model-note" v-if="model.truncated">The diagram stops after the first {{ model.modules + model.ops }}
+          module calls and operations; the module tree shows the whole model.</div>
+        <div class="muted small model-note" v-if="model.collapsed.length">This model has many nodes, so its top groups start
+          folded; click a folded group to open it, or use expand all.</div>
+        <div class="model-diagram">
+          <k-diagram :graph="model.graph" :collapsed="model.collapsed" :height="540" :title="model.name + '_diagram'"
+                     @select="select(model, $event)"></k-diagram>
+          <div class="model-detail">
+            <template v-if="details[model.name]">
+              <div class="model-detail-title">{{ details[model.name].label }} <span class="chip">{{ details[model.name].kind }}</span></div>
+              <dl>
+                <template v-for="row in details[model.name].rows" :key="row[0]">
+                  <dt>{{ row[0] }}</dt>
+                  <dd :class="{ mono: row[0] !== 'inside' }">{{ row[1] }}</dd>
+                </template>
+              </dl>
+              <div v-if="details[model.name].inputs.length">
+                <div class="muted small">takes</div>
+                <ul><li v-for="(item, index) in details[model.name].inputs" :key="index">{{ item.name }} <span class="mono muted">{{ item.shape }}</span></li></ul>
+              </div>
+              <div v-if="details[model.name].outputs.length">
+                <div class="muted small">feeds</div>
+                <ul><li v-for="(item, index) in details[model.name].outputs" :key="index">{{ item.name }} <span class="mono muted">{{ item.shape }}</span></li></ul>
+              </div>
+            </template>
+            <div class="muted small" v-else>Click a node to see its path, class, shape, parameters and the nodes it takes from
+              and feeds.</div>
+          </div>
+        </div>
+      </template>
+      <template v-else-if="viewOf(model) === 'tree'">
+        <div class="notice-box model-note" v-if="model.missing">{{ model.missing }}</div>
+        <div class="module-tree" v-if="model.tree.length" style="margin-top: 8px">
+          <module-node v-for="(node, index) in model.tree" :key="index" :node="node" :total="model.parameters" :depth="0"></module-node>
+        </div>
+        <div class="empty" v-else>no submodules recorded</div>
+      </template>
+      <template v-else>
+        <div class="muted small model-note">The shapes the model's outputs had on the first batch, the batch size first; the
+          per sample column comes from the diagram.</div>
+        <div class="table-wrap" v-if="model.shapes.length">
+          <table class="data">
+            <thead><tr><th>output</th><th>shape on the first batch</th><th>per sample</th></tr></thead>
+            <tbody>
+              <tr v-for="item in model.shapes" :key="item.key">
+                <td class="mono">{{ item.label }}</td>
+                <td class="mono">{{ item.batch }}</td>
+                <td class="mono">{{ item.sample }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="empty" v-else>no output shapes recorded: the model could not run on the first batch with the fields it reads</div>
+      </template>
+    </section>
+  </div>`,
+};

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

@@ -0,0 +1,216 @@
+import Badge from "../../components/badge.js";
+import Table from "../../components/table.js";
+import { left, number, percent, seconds, when, withinText } from "../../format.js";
+
+
+const LAST_COLUMNS = [
+  { key: "name", label: "series", className: "mono" },
+  { key: "value", label: "last value", numeric: true },
+];
+const TRACE = "overflow: auto; max-height: 50vh; margin: 8px 0 0; white-space: pre; font-size: 12px";
+const PARAM_COLUMNS = [
+  { key: "name", label: "param", className: "mono" },
+  { key: "value", label: "value", numeric: true },
+];
+
+function present(value) {
+  return value !== null && value !== undefined && value !== "";
+}
+
+function shown(value) {
+  if (!present(value)) return "";
+  if (typeof value === "number") return number(value);
+  if (Array.isArray(value)) return "[" + value.map(shown).join(", ") + "]";
+  if (typeof value === "object") {
+    if (typeof value.ref === "string") return "@" + value.ref;
+    return JSON.stringify(value);
+  }
+  return String(value);
+}
+
+function described(value) {
+  if (value && typeof value === "object" && !Array.isArray(value) && typeof value.use === "string") {
+    const rest = Object.entries(value).filter(([key]) => key !== "use").map(([key, item]) => key + " " + shown(item));
+    return [value.use].concat(rest).join(", ");
+  }
+  return shown(value);
+}
+
+export default {
+  name: "OverviewTab",
+  components: { "k-badge": Badge, "k-table": Table },
+  props: {
+    record: { type: Object, default: null },
+    path: { type: String, default: "" },
+    api: { default: null },
+    version: { type: Number, default: 0 },
+  },
+  computed: {
+    lastColumns() { return LAST_COLUMNS; },
+    paramColumns() { return PARAM_COLUMNS; },
+    summary() { return (this.record && this.record.summary) || {}; },
+    progress() { return (this.record && this.record.progress) || {}; },
+    plan() { return (this.record && this.record.plan) || {}; },
+    status() { return this.summary.status || this.progress.status || "unknown"; },
+    best() { return this.summary.best || (this.record && this.record.best) || null; },
+    bestValue() { return this.best && present(this.best.value) ? number(this.best.value) : "no value yet"; },
+    bestMode() { return this.best && this.best.mode === "max" ? "highest" : "lowest"; },
+    bestTurn() { return this.best && present(this.best.turn) ? String(this.best.turn) : ""; },
+    turn() { return present(this.summary.turn) ? this.summary.turn : (this.progress.turn || 0); },
+    total() { return present(this.summary.total) ? this.summary.total : this.progress.total; },
+    unit() { return this.summary.unit || this.progress.unit || ""; },
+    elapsed() { return present(this.summary.seconds) ? seconds(this.summary.seconds) : seconds(0); },
+    started() { return present(this.summary.started) ? "started " + when(this.summary.started) : ""; },
+    fraction() {
+      const known = this.progress.fraction;
+      if (typeof known === "number" && Number.isFinite(known)) return Math.max(0, Math.min(1, known));
+      const total = Number(this.total);
+      const turn = Number(this.turn);
+      if (!total || !Number.isFinite(total) || !Number.isFinite(turn)) return null;
+      return Math.max(0, Math.min(1, turn / total));
+    },
+    within() { return withinText(this.progress.within); },
+    remaining() { return left(this.progress.eta); },
+    failure() { return (this.record && this.record.failure) || null; },
+    traceback() { return this.failure && this.failure.traceback ? String(this.failure.traceback) : ""; },
+    failureTitle() {
+      if (!this.failure) return "";
+      return [this.failure.type, this.failure.message].filter(Boolean).join(": ");
+    },
+    trace() { return TRACE; },
+    hasFraction() { return this.fraction !== null; },
+    fractionText() { return this.hasFraction ? percent(this.fraction) : ""; },
+    fill() { return { width: (this.hasFraction ? (this.fraction * 100).toFixed(1) : "0") + "%" }; },
+    turnText() { return present(this.total) ? "turn " + this.turn + " of " + this.total : "turn " + this.turn; },
+    lastRows() {
+      const watched = this.best ? this.best.series : null;
+      return Object.entries(this.summary.last || {}).map(([name, value]) => ({ name, value, best: name === watched }));
+    },
+    manyLast() { return this.lastRows.length > 8; },
+    minimizes() { return Object.entries(this.summary.minimizes || {}).map(([name, loss]) => ({ name, loss: String(loss) })); },
+    params() {
+      return Object.entries(this.summary.params || {}).map(([name, value]) => ({
+        name,
+        value: typeof value === "number" || typeof value === "string" ? value : shown(value),
+      }));
+    },
+    manyParams() { return this.params.length > 8; },
+    fired() { return Array.isArray(this.summary.rules) ? this.summary.rules : []; },
+    rules() {
+      const fired = this.fired;
+      const planned = Array.isArray(this.plan.rules) ? this.plan.rules : [];
+      return planned.map((rule, index) => ({
+        key: rule.id || String(index),
+        id: rule.id || "rule " + (index + 1),
+        fired: fired.includes(rule.id),
+        when: described(rule.when),
+        patch: (Array.isArray(rule.patch) ? rule.patch : []).map(item => item.path + " = " + shown(item.value)).join("; "),
+        stop: Boolean(rule.stop),
+        once: Boolean(rule.once),
+      }));
+    },
+    identity() {
+      const summary = this.summary;
+      const sweep = summary.sweep;
+      const rows = [
+        ["name", summary.name],
+        ["device", summary.device],
+        ["host", summary.host],
+        ["started", present(summary.started) ? when(summary.started) : ""],
+        ["updated", present(summary.updated) ? when(summary.updated) : ""],
+        ["finished", present(summary.finished) ? when(summary.finished) : ""],
+        ["elapsed", present(summary.seconds) ? seconds(summary.seconds) : ""],
+        ["failure", summary.failure],
+        ["stopped by", summary.stopped_by],
+        ["stop reason", summary.stop_reason],
+        ["resumed from", summary.resumed_from],
+        ["sweep point", sweep && present(sweep.id) ? String(sweep.id) : ""],
+        ["seed", this.plan.seed],
+        ["kalfa", this.plan.kalfa],
+      ];
+      return rows.filter(row => present(row[1])).map(([name, value]) => ({ name, value: shown(value) }));
+    },
+  },
+  methods: {
+    bestRow(row) { return row && row.best ? "selected" : ""; },
+  },
+  template: `
+  <div class="page pane-overview">
+    <div class="error-box" v-if="summary.failure">failed: {{ failureTitle || summary.failure }}
+      <details v-if="traceback">
+        <summary>traceback</summary>
+        <pre class="mono" :style="trace">{{ traceback }}</pre>
+      </details>
+    </div>
+    <div class="notice-box" v-if="summary.stop_reason">stopped: {{ summary.stop_reason }}</div>
+    <div class="cards">
+      <section class="card">
+        <div class="stat-label">status</div>
+        <div class="stat-value"><k-badge :status="status"></k-badge></div>
+        <span class="progress" v-if="hasFraction" style="width: 100%">
+          <span class="progress-track"><span class="progress-fill" :style="fill"></span></span>
+          <span class="progress-text">{{ fractionText }}</span>
+        </span>
+        <div class="muted small">{{ turnText }}<span v-if="unit"> {{ unit }}</span></div>
+        <div class="muted small" v-if="within">{{ within }}</div>
+      </section>
+      <section class="card">
+        <div class="stat-label">best</div>
+        <div class="stat-value mono">{{ bestValue }}</div>
+        <div class="muted small" v-if="best">{{ best.series }}, {{ bestMode }} is best<span v-if="bestTurn">, reached at turn {{ bestTurn }}</span></div>
+        <div class="muted small" v-else>the plan names no checkpoint watch series</div>
+      </section>
+      <section class="card">
+        <div class="stat-label">elapsed</div>
+        <div class="stat-value">{{ elapsed }}</div>
+        <div class="muted small">{{ started }}</div>
+        <div class="muted small" v-if="remaining">{{ remaining }}</div>
+      </section>
+      <section class="card">
+        <div class="stat-label">rules fired</div>
+        <div class="stat-value">{{ fired.length }}</div>
+        <div class="muted small" v-if="fired.length"><span class="chip mono" v-for="name in fired" :key="name">{{ name }}</span></div>
+        <div class="muted small" v-else>no rule has fired yet</div>
+      </section>
+    </div>
+    <div class="grid">
+      <section class="card">
+        <div class="card-head"><span class="card-title">last values</span><span class="muted small">the last line of history.jsonl</span></div>
+        <k-table :columns="lastColumns" :rows="lastRows" row-key="name" :filterable="manyLast" placeholder="filter series"
+          :row-class="bestRow" empty="no values yet"></k-table>
+        <div class="muted small" v-for="row in minimizes" :key="row.name">optimizer {{ row.name }} minimizes {{ row.loss }}</div>
+      </section>
+      <section class="card">
+        <div class="card-head"><span class="card-title">params</span></div>
+        <k-table :columns="paramColumns" :rows="params" row-key="name" :filterable="manyParams" placeholder="filter params"
+          empty="no params"></k-table>
+      </section>
+      <section class="card">
+        <div class="card-head"><span class="card-title">identity</span></div>
+        <div class="table-wrap">
+          <table class="data">
+            <tbody>
+              <tr v-for="row in identity" :key="row.name"><td class="muted">{{ row.name }}</td><td class="mono">{{ row.value }}</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+    <section class="card" v-if="rules.length">
+      <div class="card-head"><span class="card-title">rules of the plan</span></div>
+      <div class="table-wrap">
+        <table class="data">
+          <thead><tr><th>rule</th><th>when</th><th>patch</th><th>fired</th></tr></thead>
+          <tbody>
+            <tr v-for="rule in rules" :key="rule.key" :class="{ selected: rule.fired }">
+              <td class="mono">{{ rule.id }}<span class="muted" v-if="rule.once"> once</span><span class="muted" v-if="rule.stop"> stops</span></td>
+              <td class="mono">{{ rule.when }}</td>
+              <td class="mono">{{ rule.patch }}</td>
+              <td>{{ rule.fired ? "yes" : "" }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+  </div>`,
+};