mulmoterminal 8.1.0 → 8.3.0

package/README.md

@@ -1753,6 +1753,11 @@ narrow and tall for one record you are discussing — and each position keeps it
 
 ## More features
 
+- **Skills viewer** — **More features** → **Skills** lists every Claude skill on disk in three
+  columns — where it lives, its skills, its `SKILL.md`. The places are your `~/.claude/skills`,
+  each enabled plugin (skills shown as `plugin:skill`), and the `.claude/skills` of each folder a
+  terminal has run in (folders with none are left out). A project skill with the same name as one
+  of yours is marked as overriding it. The search (name, description or folder) narrows both lists.
 - **Grid of parallel sessions** — the ＋ Terminal / grid view runs many sessions at once,
   auto-sizing by count across pages. Cell borders signal state at a glance — **working**
   (pulsing blue), **blocked** (amber — needs a permission / answer), **done** (blue —

package/blueprints/adopt/templates/chaff.yml

@@ -21,7 +21,7 @@ jobs:
       - uses: actions/setup-node@v7
         with:
           node-version: 24
-      - run: npx -y chaffjs@0.17 {{PATHS}} --sarif chaff.sarif
+      - run: npx -y chaffjs@0.18 {{PATHS}} --sarif chaff.sarif
         continue-on-error: true
       - uses: github/codeql-action/upload-sarif@1c5b675653bb5c22dbe9b12b556ec555138e09fd # v4.38.1
         with:

package/blueprints/docs/checks/chaff.sh

@@ -4,4 +4,4 @@
 if [ -n "${CHAFF_BIN:-}" ]; then
   exec sh -c "$CHAFF_BIN \"\$@\"" chaff "$@"
 fi
-exec npx -y chaffjs@0.17 "$@"
+exec npx -y chaffjs@0.18 "$@"

package/blueprints/docs/skills/workspace/SKILL.md

@@ -12,7 +12,7 @@ repository, `.git/info/exclude`) until the person has approved the models.
 1. `.blueprint/` already exists (the build created it). Everything this build records goes there.
 2. Run chaff once through the base pack's wrapper, so its first download happens now and not in the
    middle of a later step: `sh <base pack>/checks/chaff.sh rules --json > /dev/null`. The wrapper runs the
-   pinned chaff (`npx -y chaffjs@0.17`) unless `CHAFF_BIN` names another. If it fails, show the person the
+   pinned chaff (`npx -y chaffjs@0.18`) unless `CHAFF_BIN` names another. If it fails, show the person the
    error and stop — do not work around it.
 3. If the folder is a git repository, add `.blueprint/` to `.git/info/exclude`. That keeps the build's
    working files out of commits without touching `.gitignore`, which belongs to the person.

package/blueprints/from-collection/checks/actions.sh

@@ -44,7 +44,16 @@ const problems = entries.flatMap(({ name, decision }) => {
   if (decision === "manual" && !inHeading(name)) return [`${name} is left to a person, and README.md has no heading naming it`];
   return [];
 });
-if (problems.length > 0) { console.error(problems.join("\n")); process.exit(1); }
+// Said with the titles it read and the rule it reads them by, so the one fixing it sees what is missing rather than guessing.
+const untested = entries.some(({ name, decision }) => decision === "feature" && !inTestTitle(name));
+const hint = untested
+  ? [
+      "",
+      `The test titles ${tests} declares, as this check reads them: ${titles.length === 0 ? "(none)" : titles.map((title) => JSON.stringify(title)).join(", ")}.`,
+      "Only the title of a test counts: the first argument, written as a plain string, of it(...) or test(...) imported from \"vitest\" in that file. A describe(...) name does not count, so put the whole name in each test title.",
+    ]
+  : [];
+if (problems.length > 0) { console.error([...problems, ...hint].join("\n")); process.exit(1); }
 process.stdout.write(String(entries.filter((entry) => entry.decision === "feature").length));
 ' "$file" "$tests" "$titles")
 [ "$features" -gt 0 ] || exit 0

package/blueprints/from-collection/checks/design.mjs

@@ -0,0 +1,71 @@
+// The design step's check, run after `yarn build`: reads the built stylesheets and the app's files and holds them to
+// designRules.mjs. Prints each problem and exits 1 when there is any. The pack's templates are read from beside this
+// file.
+import { existsSync, readdirSync, readFileSync, statSync } from "node:fs";
+import path from "node:path";
+import { designOf, designProblems } from "./designRules.mjs";
+
+const SKIPPED = new Set(["node_modules", "dist", ".blueprint", ".git", "test", "functions", "coverage", ".wrangler", "supabase"]);
+// Where Vite writes the build in every base (dist/, dist/client/, client/dist/).
+const BUILD_DIR = "dist";
+// design.sh notes when it started the build; a stylesheet older than that is left over from another build.
+const builtSince = Number(process.env.DESIGN_BUILD_STARTED_MS ?? 0);
+const THEMES = path.join(import.meta.dirname, "..", "design", "themes");
+
+const readJson = (file) => {
+  try {
+    return JSON.parse(readFileSync(file, "utf8"));
+  } catch {
+    return null;
+  }
+};
+const readText = (file) => (existsSync(file) ? readFileSync(file, "utf8") : null);
+
+// Every file under the app whose name ends in one of `extensions`, skipping what the build makes or does not ship.
+const filesUnder = (dir, extensions) =>
+  readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+    const file = path.join(dir, entry.name);
+    if (entry.isDirectory()) return SKIPPED.has(entry.name) ? [] : filesUnder(file, extensions);
+    return extensions.some((extension) => entry.name.endsWith(extension)) ? [{ path: file, text: readFileSync(file, "utf8") }] : [];
+  });
+
+// Every stylesheet this build wrote, joined; null when it wrote none.
+function builtCss(dir = ".") {
+  const found = readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+    const file = path.join(dir, entry.name);
+    if (!entry.isDirectory()) return [];
+    if (entry.name === BUILD_DIR) return filesUnderAll(file, ".css");
+    return SKIPPED.has(entry.name) || entry.name.startsWith(".") ? [] : [builtCss(file)].filter((css) => css !== null);
+  });
+  return found.length > 0 ? found.join("\n") : null;
+}
+
+const filesUnderAll = (dir, extension) =>
+  readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+    const file = path.join(dir, entry.name);
+    if (entry.isDirectory()) return filesUnderAll(file, extension);
+    return entry.name.endsWith(extension) && statSync(file).mtimeMs >= builtSince ? [readFileSync(file, "utf8")] : [];
+  });
+
+// Every copied collection's schema (source.json lists them by slug, whether the source was a collection or a shared
+// app): each one's icon is shown in its header, and its fields decide whether there is a kanban and a calendar.
+const schemas = (readJson(".blueprint/source/source.json")?.collections ?? [])
+  .map((slug) => readJson(`.blueprint/source/collections/${slug}/schema.json`))
+  .filter((schema) => schema !== null);
+
+const answer = readJson(".blueprint/answers.json")?.design;
+const design = designOf(answer);
+const problems = designProblems({
+  answer,
+  packageJson: readJson("package.json"),
+  builtCss: builtCss(),
+  tailwindTheme: readText(path.join("node_modules", "tailwindcss", "theme.css")),
+  sources: filesUnder(".", [".vue", ".ts", ".tsx"]),
+  designMd: readText("DESIGN.md"),
+  icons: schemas.map((schema) => schema.icon).filter((icon) => typeof icon === "string" && icon !== ""),
+  views: { kanban: schemas.some((schema) => schema.kanbanField), calendar: schemas.some((schema) => schema.calendarField) },
+  template: design?.theme ? readText(path.join(THEMES, `${design.theme}.css`)) : null,
+});
+problems.forEach((problem) => console.error(problem));
+if (problems.length > 0) process.exit(1);
+console.log(`the screens follow the design "${design.option}"`);

package/blueprints/from-collection/checks/design.sh

@@ -0,0 +1,8 @@
+#!/bin/sh
+# The app builds, and what the build produced follows the design the build chose (design.mjs reads the built CSS).
+set -eu
+# Whole seconds, rounded down, so a stylesheet written in the starting second still counts as this build's.
+DESIGN_BUILD_STARTED_MS=$(($(date +%s) * 1000))
+export DESIGN_BUILD_STARTED_MS
+yarn build
+node --no-warnings "$(dirname "$0")/design.mjs"

package/blueprints/from-collection/checks/designRules.d.mts

@@ -0,0 +1,21 @@
+export declare const SAME_AS_MULMOTERMINAL: string;
+export declare const DESIGNS: readonly { option: string; theme: string | null }[];
+export declare const SCREEN_ANCHORS: readonly { screen: string; className: string; when?: string }[];
+export declare function designOf(answer: string | undefined): { option: string; theme: string | null } | null;
+export declare function canonicalValue(value: string): string;
+export declare function declarations(css: string): { name: string; value: string }[];
+export interface FileText {
+  path: string;
+  text: string;
+}
+export declare function designProblems(input: {
+  answer: string | undefined;
+  packageJson: { dependencies?: Record<string, string>; devDependencies?: Record<string, string> } | null;
+  builtCss: string | null;
+  tailwindTheme: string | null;
+  template: string | null;
+  sources: readonly FileText[];
+  designMd: string | null;
+  icons: readonly string[];
+  views?: { kanban?: boolean; calendar?: boolean };
+}): string[];

package/blueprints/from-collection/checks/designRules.mjs

@@ -0,0 +1,146 @@
+// What the design step must leave in an app made from a collection. The answer picks MulmoTerminal's own look or a
+// template; a template is MulmoTerminal's classes with their colours and corners redefined, so every design is written
+// with the same classes and only the template's @theme differs. Whether Tailwind runs and which colours won is read
+// from the BUILT CSS, not from the sources: a build is what the person gets, and no comment or stray import can fake it.
+
+export const SAME_AS_MULMOTERMINAL = "MulmoTerminal と同じ";
+
+/** The design answers, each with the template under design/themes/ it takes (none for MulmoTerminal's own). */
+export const DESIGNS = [
+  { option: SAME_AS_MULMOTERMINAL, theme: null },
+  { option: "やわらかい（暖かい紙の色・丸い角）", theme: "soft" },
+  { option: "くっきり（白と黒・小さな角）", theme: "crisp" },
+  { option: "落ち着いた（深い緑・やさしい灰色）", theme: "calm" },
+];
+
+/** The design an answer names; an unanswered question takes MulmoTerminal's, as the question's default does. */
+export const designOf = (answer) => DESIGNS.find((design) => design.option === (answer ?? SAME_AS_MULMOTERMINAL)) ?? null;
+
+const PACKAGES = ["tailwindcss", "@tailwindcss/vite", "material-symbols"];
+// The main button of MulmoTerminal's look, as Tailwind writes it: present only when Tailwind ran over screens using it.
+const MAIN_BUTTON_RULE = /\.bg-indigo-600\s*\{\s*background-color:\s*var\(--color-indigo-600\)/u;
+// One class per screen of MulmoTerminal's look that appears in no other section of design/mulmoterminal.md. Tailwind
+// writes a rule only for a class some screen uses, so a screen left in its own look shows up as its class missing.
+// The screens every collection has, plus the kanban and the calendar when its schema asks for them; the toolbar is
+// left out because a collection without search or views may have none.
+export const SCREEN_ANCHORS = [
+  { screen: "header (the icon box)", className: "w-9" },
+  { screen: "list (the table's cells)", className: "px-5" },
+  { screen: "record panel (its field grid)", className: "gap-x-6" },
+  { screen: "kanban (its columns)", className: "w-72", when: "kanban" },
+  { screen: "calendar (its day cells)", className: "min-h-[5.5rem]", when: "calendar" },
+];
+// A class name as a CSS selector writes it: `bg-slate-900/40` is `.bg-slate-900\/40`.
+const selectorOf = (className) => "." + className.replaceAll(/[^\w-]/gu, (character) => "\\" + character);
+// The selector followed by something that ends a class name, so `.w-72` is not found in `.w-720` nor
+// `.border-indigo-100` in `.border-indigo-100\/50` (an escape continues the name).
+const hasRule = (css, className) =>
+  css
+    .split(selectorOf(className))
+    .slice(1)
+    .some((rest) => !/^[\w\\-]/u.test(rest));
+const ICON_FONT = /font-family:\s*["']?Material Symbols Outlined/u;
+// The tokens a template redefines; the ones the build kept must hold the chosen design's values.
+const DESIGN_TOKEN = /^--(?:color-(?:indigo|slate|gray)-\d+|color-white|radius-[\w-]+)$/u;
+
+// A class or an icon name left in a comment shows nothing. A `//` counts as a comment only at a line's start or after
+// a space, so the `//` of a URL in a string is kept.
+const withoutComments = (text) =>
+  String(text)
+    .replaceAll("\r\n", "\n")
+    .replaceAll(/\/\*[\s\S]*?\*\//gu, "")
+    .replaceAll(/<!--[\s\S]*?-->/gu, "")
+    .replaceAll(/(^|\s)\/\/.*$/gmu, "$1");
+
+/** A CSS value as minification leaves it comparable: `oklch(0.52 0.13 35)` and `oklch(52% .13 35)` are one value. */
+export const canonicalValue = (value) => {
+  const text = String(value).trim().toLowerCase();
+  const oklch = /^oklch\(\s*([\d.]+)(%?)\s+([\d.]+)\s+([\d.]+)\s*\)$/u.exec(text);
+  if (oklch) return `oklch(${Number(oklch[1]) / (oklch[2] ? 100 : 1)} ${Number(oklch[3])} ${Number(oklch[4])})`;
+  const length = /^([\d.]+)([a-z%]*)$/u.exec(text);
+  return length ? `${Number(length[1])}${length[2]}` : text.replaceAll(/\s+/gu, "");
+};
+
+/** Every `--name: value` a stylesheet declares, comments aside, in order (a name may repeat). */
+export const declarations = (css) =>
+  withoutComments(css)
+    .split(/[;{}]/u)
+    .map((part) => part.trim())
+    .filter((part) => part.startsWith("--") && part.includes(":"))
+    .map((part) => ({ name: part.slice(0, part.indexOf(":")).trim(), value: part.slice(part.indexOf(":") + 1).trim() }));
+
+const dependencyProblems = (packageJson) => {
+  const declared = { ...packageJson?.dependencies, ...packageJson?.devDependencies };
+  const missing = PACKAGES.filter((name) => !Object.hasOwn(declared, name));
+  return missing.length > 0 ? [`package.json does not depend on ${missing.join(", ")}`] : [];
+};
+
+// The values each design token must have in the build: the template's, or Tailwind's own theme for MulmoTerminal's.
+const expectedTokens = (design, template, tailwindTheme) =>
+  new Map(
+    declarations(design.theme === null ? tailwindTheme : template)
+      .filter((token) => DESIGN_TOKEN.test(token.name))
+      .map((token) => [token.name, canonicalValue(token.value)]),
+  );
+
+function tokenProblems(design, builtCss, expected) {
+  const built = declarations(builtCss);
+  if (!built.some((token) => token.name === "--color-indigo-600"))
+    return ["the built CSS does not define --color-indigo-600: Tailwind's theme is not in the build"];
+  const wrong = built.filter((token) => expected.has(token.name) && canonicalValue(token.value) !== expected.get(token.name));
+  const names = [...new Set(wrong.map((token) => token.name))];
+  if (names.length === 0) return [];
+  const given = `the built CSS gives ${names.join(", ")} other values than`;
+  return design.theme === null
+    ? [`${given} Tailwind's own: MulmoTerminal's look redefines no colour or corner, so remove the @theme that sets them`]
+    : [`${given} design/themes/${design.theme}.css: import it right after "tailwindcss", unchanged, and redefine nothing else`];
+}
+
+function builtProblems(design, builtCss, template, tailwindTheme, views) {
+  if (builtCss === null) return ["no built CSS under dist/: yarn build did not produce the app's stylesheet"];
+  const css = withoutComments(builtCss);
+  if (!MAIN_BUTTON_RULE.test(css)) {
+    return [
+      "the built CSS has no .bg-indigo-600 rule as Tailwind writes it: Tailwind is not running in the build (tailwindcss() in vite.config's plugins, @import \"tailwindcss\" in the stylesheet), or no screen uses MulmoTerminal's main button",
+    ];
+  }
+  const expected = expectedTokens(design, template, tailwindTheme);
+  const source = design.theme === null ? "node_modules/tailwindcss/theme.css" : `design/themes/${design.theme}.css`;
+  if (!expected.has("--color-indigo-600")) return [`cannot read the design's colours (${source})`];
+  const missing = SCREEN_ANCHORS.filter((anchor) => (!anchor.when || views[anchor.when]) && !hasRule(css, anchor.className));
+  return [
+    ...missing.map((anchor) => `the ${anchor.screen} is not in MulmoTerminal's look: no screen uses "${anchor.className}" (design/mulmoterminal.md)`),
+    ...(ICON_FONT.test(css) ? [] : ["the built CSS has no Material Symbols Outlined font: import material-symbols/outlined.css where the app starts"]),
+    ...tokenProblems(design, builtCss, expected),
+  ];
+}
+
+const usageProblems = (sources, icons) => {
+  const text = sources.map((source) => withoutComments(source.text)).join("\n");
+  return [
+    ...(text.includes("material-symbols-outlined") ? [] : ['the screens never use "material-symbols-outlined"']),
+    ...[...new Set(icons)].filter((icon) => !text.includes(icon)).map((icon) => `the screens never show the collection's icon "${icon}"`),
+  ];
+};
+
+const recordProblems = (design, designMd) => {
+  if (designMd === null) return ["DESIGN.md is missing: it tells later steps which design the screens follow"];
+  return designMd.includes(design.option) ? [] : [`DESIGN.md does not name the design "${design.option}"`];
+};
+
+/**
+ * Every way the app falls short of the chosen design. `builtCss` is the build's stylesheets joined (null when there
+ * are none); `tailwindTheme` is the app's node_modules/tailwindcss/theme.css; `template` the chosen template's text;
+ * `sources` the screens' files as { path, text }; `icons` every copied collection's icon; `views` says whether any of
+ * them has a kanban and a calendar ({ kanban, calendar }).
+ */
+export function designProblems({ answer, packageJson, builtCss, tailwindTheme, template, sources, designMd, icons, views }) {
+  const design = designOf(answer);
+  if (design === null) return [`.blueprint/answers.json: the design "${answer}" is not one this pack has`];
+  return [
+    ...dependencyProblems(packageJson),
+    ...builtProblems(design, builtCss, template, tailwindTheme, views ?? {}),
+    ...usageProblems(sources, icons ?? []),
+    ...recordProblems(design, designMd),
+  ];
+}