opencode-backlog 0.1.6 → 0.2.1

package/dist/tui.js

@@ -11,12 +11,17 @@ import { watch } from "node:fs";
 import { join } from "node:path";
 import { Plugin } from "@opencode-ai/plugin/tui";
 import { createMemo, createSignal, For, onCleanup, onMount, Show } from "solid-js";
-import { BACKLOG_FILE, EMPTY_BACKLOG, STATUSES, moveItem } from "./backlog.js";
+import { addCategory, BACKLOG_FILE, CATEGORY_COLORS, EMPTY_BACKLOG, moveItem, moveCategory, purgeCategory, removeCategory, renameCategory, setCategoryColor } from "./backlog.js";
 import { readBacklog, readBacklogSync, updateBacklog } from "./store.js";
-function statusLabel(status) {
-  if (status === "todo") return "Todo";
-  if (status === "doing") return "Doing";
-  return "Done";
+function categoryTitle(categories, status) {
+  return categories.find(category => category.id === status)?.title ?? status;
+}
+function categoryColorName(category) {
+  if (category.color) return category.color;
+  if (category.id === "todo") return "subdued";
+  if (category.id === "doing") return "warning";
+  if (category.id === "done") return "success";
+  return "info";
 }
 function readSnapshot(directory) {
   try {
@@ -48,11 +53,6 @@ function BacklogView(props) {
     clearTimeout(refresh);
     watcher.close();
   });
-  const color = status => {
-    if (status === "doing") return theme.text.feedback.warning.default;
-    if (status === "done") return theme.text.feedback.success.default;
-    return theme.text.subdued;
-  };
   return (() => {
     var _el$ = _$createElement("box"),
       _el$2 = _$createElement("text"),
@@ -83,93 +83,81 @@ function BacklogView(props) {
       }
     }), null);
     _$insert(_el$, _$createComponent(For, {
-      each: STATUSES,
-      children: status => {
-        const items = createMemo(() => backlog().items.filter(item => item.status === status));
-        return _$createComponent(Show, {
-          get when() {
-            return items().length > 0;
-          },
-          get children() {
-            var _el$8 = _$createElement("box"),
-              _el$9 = _$createElement("text"),
-              _el$0 = _$createElement("b"),
-              _el$1 = _$createTextNode(` (`),
-              _el$10 = _$createTextNode(`)`);
-            _$insertNode(_el$8, _el$9);
-            _$setProp(_el$8, "marginTop", 1);
-            _$insertNode(_el$9, _el$0);
-            _$insertNode(_el$9, _el$1);
-            _$insertNode(_el$9, _el$10);
-            _$insert(_el$0, () => statusLabel(status));
-            _$insert(_el$9, () => items().length, _el$10);
-            _$insert(_el$8, _$createComponent(For, {
-              get each() {
-                return items();
-              },
-              children: item => (() => {
-                var _el$11 = _$createElement("box"),
-                  _el$12 = _$createElement("text"),
-                  _el$13 = _$createElement("text");
-                _$insertNode(_el$11, _el$12);
-                _$insertNode(_el$11, _el$13);
-                _$setProp(_el$11, "flexDirection", "row");
-                _$setProp(_el$11, "gap", 1);
-                _$setProp(_el$11, "minWidth", 0);
-                _$setProp(_el$11, "onMouseUp", () => void showTaskDetails(props.context, item));
-                _$setProp(_el$12, "flexShrink", 0);
-                _$insert(_el$12, status === "done" ? "✓" : status === "doing" ? "●" : "○");
-                _$setProp(_el$13, "wrapMode", "none");
-                _$setProp(_el$13, "truncate", true);
-                _$setProp(_el$13, "flexGrow", 1);
-                _$setProp(_el$13, "minWidth", 0);
-                _$insert(_el$13, () => item.title);
-                _$effect(_p$ => {
-                  var _v$ = color(status),
-                    _v$2 = theme.text.default;
-                  _v$ !== _p$.e && (_p$.e = _$setProp(_el$12, "fg", _v$, _p$.e));
-                  _v$2 !== _p$.t && (_p$.t = _$setProp(_el$13, "fg", _v$2, _p$.t));
-                  return _p$;
-                }, {
-                  e: undefined,
-                  t: undefined
-                });
-                return _el$11;
-              })()
-            }), null);
-            _$effect(_$p => _$setProp(_el$9, "fg", color(status), _$p));
-            return _el$8;
-          }
-        });
+      get each() {
+        return backlog().categories;
+      },
+      children: category => {
+        const items = createMemo(() => backlog().items.filter(item => item.status === category.id));
+        const color = () => {
+          const name = categoryColorName(category);
+          if (name === "default") return theme.text.default;
+          if (name === "subdued") return theme.text.subdued;
+          return theme.text.feedback[name].default;
+        };
+        return (() => {
+          var _el$8 = _$createElement("box"),
+            _el$9 = _$createElement("text"),
+            _el$0 = _$createElement("b"),
+            _el$1 = _$createTextNode(` (`),
+            _el$10 = _$createTextNode(`)`);
+          _$insertNode(_el$8, _el$9);
+          _$setProp(_el$8, "marginTop", 1);
+          _$insertNode(_el$9, _el$0);
+          _$insertNode(_el$9, _el$1);
+          _$insertNode(_el$9, _el$10);
+          _$insert(_el$0, () => category.title);
+          _$insert(_el$9, () => items().length, _el$10);
+          _$insert(_el$8, _$createComponent(For, {
+            get each() {
+              return items();
+            },
+            children: item => (() => {
+              var _el$11 = _$createElement("box"),
+                _el$12 = _$createElement("text");
+              _$insertNode(_el$11, _el$12);
+              _$setProp(_el$11, "minWidth", 0);
+              _$setProp(_el$11, "onMouseUp", () => void showTaskDetails(props.context, item, backlog().categories));
+              _$setProp(_el$12, "wrapMode", "none");
+              _$setProp(_el$12, "truncate", true);
+              _$setProp(_el$12, "flexGrow", 1);
+              _$setProp(_el$12, "minWidth", 0);
+              _$insert(_el$12, () => item.title);
+              _$effect(_$p => _$setProp(_el$12, "fg", theme.text.default, _$p));
+              return _el$11;
+            })()
+          }), null);
+          _$effect(_$p => _$setProp(_el$9, "fg", color(), _$p));
+          return _el$8;
+        })();
       }
     }), null);
     _$effect(_$p => _$setProp(_el$2, "fg", theme.text.default, _$p));
     return _el$;
   })();
 }
-function taskDetails(item) {
-  return [`Status: ${statusLabel(item.status)}`, `ID: ${item.id}`, "", item.notes ?? "No notes"].join("\n");
+function taskDetails(item, categories) {
+  return [`Category: ${categoryTitle(categories, item.status)}`, `ID: ${item.id}`, "", item.notes ?? "No notes"].join("\n");
 }
 function TaskAction(props) {
   return (() => {
-    var _el$14 = _$createElement("text"),
-      _el$15 = _$createElement("b"),
-      _el$16 = _$createTextNode(` `);
-    _$insertNode(_el$14, _el$15);
-    _$insertNode(_el$14, _el$16);
-    _$insert(_el$15, () => props.shortcut);
-    _$insert(_el$14, () => props.label, null);
+    var _el$13 = _$createElement("text"),
+      _el$14 = _$createElement("b"),
+      _el$15 = _$createTextNode(` `);
+    _$insertNode(_el$13, _el$14);
+    _$insertNode(_el$13, _el$15);
+    _$insert(_el$14, () => props.shortcut);
+    _$insert(_el$13, () => props.label, null);
     _$effect(_p$ => {
-      var _v$3 = props.danger ? props.context.theme.text.feedback.error.default : props.context.theme.text.subdued,
-        _v$4 = props.run;
-      _v$3 !== _p$.e && (_p$.e = _$setProp(_el$14, "fg", _v$3, _p$.e));
-      _v$4 !== _p$.t && (_p$.t = _$setProp(_el$14, "onMouseUp", _v$4, _p$.t));
+      var _v$ = props.danger ? props.context.theme.text.feedback.error.default : props.context.theme.text.subdued,
+        _v$2 = props.run;
+      _v$ !== _p$.e && (_p$.e = _$setProp(_el$13, "fg", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp(_el$13, "onMouseUp", _v$2, _p$.t));
       return _p$;
     }, {
       e: undefined,
       t: undefined
     });
-    return _el$14;
+    return _el$13;
   })();
 }
 function TaskDetailsDialog(props) {
@@ -207,37 +195,37 @@ function TaskDetailsDialog(props) {
     }]
   }));
   return (() => {
-    var _el$17 = _$createElement("box"),
-      _el$18 = _$createElement("box"),
-      _el$19 = _$createElement("text"),
-      _el$20 = _$createElement("b"),
-      _el$21 = _$createElement("text"),
-      _el$23 = _$createElement("text"),
-      _el$24 = _$createElement("box");
+    var _el$16 = _$createElement("box"),
+      _el$17 = _$createElement("box"),
+      _el$18 = _$createElement("text"),
+      _el$19 = _$createElement("b"),
+      _el$20 = _$createElement("text"),
+      _el$22 = _$createElement("text"),
+      _el$23 = _$createElement("box");
+    _$insertNode(_el$16, _el$17);
+    _$insertNode(_el$16, _el$22);
+    _$insertNode(_el$16, _el$23);
+    _$setProp(_el$16, "paddingLeft", 2);
+    _$setProp(_el$16, "paddingRight", 2);
+    _$setProp(_el$16, "gap", 1);
     _$insertNode(_el$17, _el$18);
-    _$insertNode(_el$17, _el$23);
-    _$insertNode(_el$17, _el$24);
-    _$setProp(_el$17, "paddingLeft", 2);
-    _$setProp(_el$17, "paddingRight", 2);
-    _$setProp(_el$17, "gap", 1);
+    _$insertNode(_el$17, _el$20);
+    _$setProp(_el$17, "flexDirection", "row");
+    _$setProp(_el$17, "justifyContent", "space-between");
+    _$setProp(_el$17, "gap", 2);
     _$insertNode(_el$18, _el$19);
-    _$insertNode(_el$18, _el$21);
-    _$setProp(_el$18, "flexDirection", "row");
-    _$setProp(_el$18, "justifyContent", "space-between");
-    _$setProp(_el$18, "gap", 2);
-    _$insertNode(_el$19, _el$20);
-    _$setProp(_el$19, "wrapMode", "word");
-    _$setProp(_el$19, "flexGrow", 1);
-    _$insert(_el$20, () => props.item.title);
-    _$insertNode(_el$21, _$createTextNode(`esc`));
-    _$setProp(_el$21, "onMouseUp", () => props.context.ui.dialog.clear());
-    _$setProp(_el$23, "wrapMode", "word");
-    _$insert(_el$23, () => taskDetails(props.item));
-    _$setProp(_el$24, "flexDirection", "row");
-    _$setProp(_el$24, "justifyContent", "flex-end");
-    _$setProp(_el$24, "gap", 2);
-    _$setProp(_el$24, "paddingBottom", 1);
-    _$insert(_el$24, _$createComponent(TaskAction, {
+    _$setProp(_el$18, "wrapMode", "word");
+    _$setProp(_el$18, "flexGrow", 1);
+    _$insert(_el$19, () => props.item.title);
+    _$insertNode(_el$20, _$createTextNode(`esc`));
+    _$setProp(_el$20, "onMouseUp", () => props.context.ui.dialog.clear());
+    _$setProp(_el$22, "wrapMode", "word");
+    _$insert(_el$22, () => taskDetails(props.item, props.categories));
+    _$setProp(_el$23, "flexDirection", "row");
+    _$setProp(_el$23, "justifyContent", "flex-end");
+    _$setProp(_el$23, "gap", 2);
+    _$setProp(_el$23, "paddingBottom", 1);
+    _$insert(_el$23, _$createComponent(TaskAction, {
       get context() {
         return props.context;
       },
@@ -245,7 +233,7 @@ function TaskDetailsDialog(props) {
       label: "status",
       run: changeStatus
     }), null);
-    _$insert(_el$24, _$createComponent(TaskAction, {
+    _$insert(_el$23, _$createComponent(TaskAction, {
       get context() {
         return props.context;
       },
@@ -253,7 +241,7 @@ function TaskDetailsDialog(props) {
       label: "edit",
       run: edit
     }), null);
-    _$insert(_el$24, _$createComponent(TaskAction, {
+    _$insert(_el$23, _$createComponent(TaskAction, {
       get context() {
         return props.context;
       },
@@ -263,25 +251,26 @@ function TaskDetailsDialog(props) {
       run: remove
     }), null);
     _$effect(_p$ => {
-      var _v$5 = props.context.theme.text.default,
-        _v$6 = props.context.theme.text.subdued,
-        _v$7 = props.context.theme.text.subdued;
-      _v$5 !== _p$.e && (_p$.e = _$setProp(_el$19, "fg", _v$5, _p$.e));
-      _v$6 !== _p$.t && (_p$.t = _$setProp(_el$21, "fg", _v$6, _p$.t));
-      _v$7 !== _p$.a && (_p$.a = _$setProp(_el$23, "fg", _v$7, _p$.a));
+      var _v$3 = props.context.theme.text.default,
+        _v$4 = props.context.theme.text.subdued,
+        _v$5 = props.context.theme.text.subdued;
+      _v$3 !== _p$.e && (_p$.e = _$setProp(_el$18, "fg", _v$3, _p$.e));
+      _v$4 !== _p$.t && (_p$.t = _$setProp(_el$20, "fg", _v$4, _p$.t));
+      _v$5 !== _p$.a && (_p$.a = _$setProp(_el$22, "fg", _v$5, _p$.a));
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined
     });
-    return _el$17;
+    return _el$16;
   })();
 }
-function showTaskDetails(context, item) {
+function showTaskDetails(context, item, categories) {
   context.ui.dialog.show(() => _$createComponent(TaskDetailsDialog, {
     context: context,
-    item: item
+    item: item,
+    categories: categories
   }));
 }
 async function browseBacklog(context) {
@@ -297,6 +286,9 @@ function backlogLocation(context) {
   };
 }
 async function addBacklogItem(context) {
+  const {
+    path
+  } = backlogLocation(context);
   const title = await context.ui.dialog.prompt({
     title: "New backlog task",
     placeholder: "Task title"
@@ -308,48 +300,52 @@ async function addBacklogItem(context) {
     placeholder: "Leave empty for no notes"
   });
   if (notes === undefined) return;
-  const item = {
-    id: randomUUID(),
-    title: title.trim(),
-    ...(notes.trim() ? {
-      notes: notes.trim()
-    } : {}),
-    status: "todo"
-  };
-  const {
-    path
-  } = backlogLocation(context);
-  await updateBacklog(path, current => ({
-    version: 1,
-    items: moveItem([...current.items, item], item.id, "todo", 0)
-  }));
+  let item;
+  await updateBacklog(path, current => {
+    const firstCategory = current.categories[0];
+    if (!firstCategory) throw new Error("Add a backlog category before adding a task");
+    item = {
+      id: randomUUID(),
+      title: title.trim(),
+      ...(notes.trim() ? {
+        notes: notes.trim()
+      } : {}),
+      status: firstCategory.id
+    };
+    return {
+      ...current,
+      items: moveItem([...current.items, item], item.id, firstCategory.id, 0, current.categories)
+    };
+  });
+  if (!item) throw new Error("Backlog update did not add a task");
   context.ui.toast.show({
     message: `Added "${item.title}".`,
     variant: "success"
   });
 }
 async function changeTaskStatus(context, item) {
+  const {
+    path
+  } = backlogLocation(context);
+  const backlog = await readBacklog(path);
   const status = await context.ui.dialog.select({
-    title: `Change status: ${item.title}`,
+    title: `Change category: ${item.title}`,
     current: item.status,
-    options: STATUSES.map(candidate => ({
-      title: statusLabel(candidate),
-      value: candidate,
-      ...(candidate === item.status ? {
-        description: "Current status"
+    options: backlog.categories.map(category => ({
+      title: category.title,
+      value: category.id,
+      ...(category.id === item.status ? {
+        description: "Current category"
       } : {})
     }))
   });
   if (!status || status === item.status) return;
-  const {
-    path
-  } = backlogLocation(context);
   await updateBacklog(path, current => ({
-    version: 1,
-    items: moveItem(current.items, item.id, status, undefined)
+    ...current,
+    items: moveItem(current.items, item.id, status, undefined, current.categories)
   }));
   context.ui.toast.show({
-    message: `Moved "${item.title}" to ${statusLabel(status)}.`,
+    message: `Moved "${item.title}" to ${categoryTitle(backlog.categories, status)}.`,
     variant: "success"
   });
 }
@@ -371,7 +367,7 @@ async function editBacklogItem(context, item) {
     path
   } = backlogLocation(context);
   await updateBacklog(path, current => ({
-    version: 1,
+    ...current,
     items: current.items.map(candidate => {
       if (candidate.id !== item.id) return candidate;
       return {
@@ -403,7 +399,7 @@ async function removeBacklogItem(context, item) {
     path
   } = backlogLocation(context);
   await updateBacklog(path, current => ({
-    version: 1,
+    ...current,
     items: current.items.filter(candidate => candidate.id !== item.id)
   }));
   context.ui.toast.show({
@@ -411,6 +407,234 @@ async function removeBacklogItem(context, item) {
     variant: "success"
   });
 }
+async function purgeConfirmedCategory(path, status, confirmedIDs) {
+  await updateBacklog(path, current => {
+    const currentIDs = current.items.filter(item => item.status === status).map(item => item.id);
+    const changed = currentIDs.length !== confirmedIDs.length || currentIDs.some(id => !confirmedIDs.includes(id));
+    if (changed) throw new Error("The category changed. Review its tasks and confirm the purge again.");
+    return purgeCategory(current, status);
+  });
+}
+async function purgeBacklogCategory(context) {
+  const {
+    path
+  } = backlogLocation(context);
+  const backlog = await readBacklog(path);
+  const status = await context.ui.dialog.select({
+    title: "Purge backlog category",
+    placeholder: "Select a category",
+    options: backlog.categories.map(category => {
+      const count = backlog.items.filter(item => item.status === category.id).length;
+      return {
+        title: category.title,
+        value: category.id,
+        description: `${count} ${count === 1 ? "task" : "tasks"}`
+      };
+    })
+  });
+  if (!status) return;
+  const category = backlog.categories.find(candidate => candidate.id === status);
+  if (!category) return;
+  const taskIDs = backlog.items.filter(item => item.status === status).map(item => item.id);
+  const count = taskIDs.length;
+  const confirmed = await context.ui.dialog.confirm({
+    title: `Purge ${category.title}`,
+    message: `Permanently delete ${count} ${count === 1 ? "task" : "tasks"} from this category?`,
+    label: {
+      confirm: "Purge",
+      cancel: "Cancel"
+    }
+  });
+  if (!confirmed) return;
+  await purgeConfirmedCategory(path, status, taskIDs);
+  context.ui.toast.show({
+    message: `Purged ${count} ${count === 1 ? "task" : "tasks"} from ${category.title}.`,
+    variant: "success"
+  });
+}
+async function addBacklogCategory(context) {
+  const title = await context.ui.dialog.prompt({
+    title: "New backlog category",
+    placeholder: "Category title"
+  });
+  if (!title?.trim()) return;
+  const suggestedID = title.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+  const id = await context.ui.dialog.prompt({
+    title: title.trim(),
+    description: "Stable category ID",
+    placeholder: "Category ID",
+    value: suggestedID
+  });
+  if (!id?.trim()) return;
+  const color = await context.ui.dialog.select({
+    title: title.trim(),
+    placeholder: "Category color",
+    current: "info",
+    options: CATEGORY_COLORS.map(value => ({
+      title: value,
+      value
+    }))
+  });
+  if (!color) return;
+  const category = {
+    id: id.trim(),
+    title: title.trim(),
+    color
+  };
+  const {
+    path
+  } = backlogLocation(context);
+  await updateBacklog(path, current => addCategory(current, category));
+  context.ui.toast.show({
+    message: `Added category "${category.title}".`,
+    variant: "success"
+  });
+}
+async function renameBacklogCategory(context, category) {
+  const title = await context.ui.dialog.prompt({
+    title: "Rename backlog category",
+    placeholder: "Category title",
+    value: category.title
+  });
+  if (!title?.trim() || title.trim() === category.title) return;
+  const {
+    path
+  } = backlogLocation(context);
+  await updateBacklog(path, current => renameCategory(current, category.id, title.trim()));
+  context.ui.toast.show({
+    message: `Renamed category to "${title.trim()}".`,
+    variant: "success"
+  });
+}
+async function colorBacklogCategory(context, category) {
+  const color = await context.ui.dialog.select({
+    title: `Color: ${category.title}`,
+    placeholder: "Category color",
+    current: categoryColorName(category),
+    options: CATEGORY_COLORS.map(value => ({
+      title: value,
+      value
+    }))
+  });
+  if (!color || color === categoryColorName(category)) return;
+  const {
+    path
+  } = backlogLocation(context);
+  await updateBacklog(path, current => setCategoryColor(current, category.id, color));
+  context.ui.toast.show({
+    message: `Updated color for "${category.title}".`,
+    variant: "success"
+  });
+}
+async function moveBacklogCategory(context, category) {
+  const {
+    path
+  } = backlogLocation(context);
+  const backlog = await readBacklog(path);
+  const position = await context.ui.dialog.select({
+    title: `Move ${category.title}`,
+    placeholder: "Select a position",
+    options: backlog.categories.map((candidate, index) => ({
+      title: `${index + 1}. ${candidate.title}`,
+      value: index,
+      ...(candidate.id === category.id ? {
+        description: "Current position"
+      } : {})
+    }))
+  });
+  if (position === undefined || backlog.categories[position]?.id === category.id) return;
+  await updateBacklog(path, current => moveCategory(current, category.id, position));
+  context.ui.toast.show({
+    message: `Moved category "${category.title}".`,
+    variant: "success"
+  });
+}
+async function deleteBacklogCategory(context, category) {
+  const confirmed = await context.ui.dialog.confirm({
+    title: "Delete backlog category",
+    message: category.title,
+    label: {
+      confirm: "Delete",
+      cancel: "Cancel"
+    }
+  });
+  if (!confirmed) return;
+  const {
+    path
+  } = backlogLocation(context);
+  await updateBacklog(path, current => removeCategory(current, category.id));
+  context.ui.toast.show({
+    message: `Deleted category "${category.title}".`,
+    variant: "success"
+  });
+}
+async function manageBacklogCategories(context) {
+  const {
+    path
+  } = backlogLocation(context);
+  const backlog = await readBacklog(path);
+  let addSelection = `__add:${randomUUID()}`;
+  while (backlog.categories.some(category => category.id === addSelection)) {
+    addSelection = `__add:${randomUUID()}`;
+  }
+  const selection = await context.ui.dialog.select({
+    title: "Backlog categories",
+    placeholder: "Add or select a category",
+    options: [{
+      title: "Add category",
+      value: addSelection
+    }, ...backlog.categories.map(category => ({
+      title: category.title,
+      value: category.id,
+      description: `${category.id} - ${backlog.items.filter(item => item.status === category.id).length} tasks`
+    }))]
+  });
+  if (!selection) return;
+  if (selection === addSelection) return addBacklogCategory(context);
+  const category = backlog.categories.find(candidate => candidate.id === selection);
+  if (!category) return;
+  const taskIDs = backlog.items.filter(item => item.status === category.id).map(item => item.id);
+  const count = taskIDs.length;
+  const action = await context.ui.dialog.select({
+    title: category.title,
+    placeholder: "Select an action",
+    options: [{
+      title: "Rename",
+      value: "rename"
+    }, {
+      title: "Change color",
+      value: "color"
+    }, {
+      title: "Move",
+      value: "move"
+    }, ...(count === 0 ? [{
+      title: "Delete empty category",
+      value: "delete"
+    }] : [{
+      title: `Purge category and ${count} ${count === 1 ? "task" : "tasks"}`,
+      value: "purge"
+    }])]
+  });
+  if (action === "rename") return renameBacklogCategory(context, category);
+  if (action === "color") return colorBacklogCategory(context, category);
+  if (action === "move") return moveBacklogCategory(context, category);
+  if (action === "delete") return deleteBacklogCategory(context, category);
+  if (action !== "purge") return;
+  const confirmed = await context.ui.dialog.confirm({
+    title: `Purge ${category.title}`,
+    message: `Permanently delete ${count} ${count === 1 ? "task" : "tasks"} from this category?`,
+    label: {
+      confirm: "Purge",
+      cancel: "Cancel"
+    }
+  });
+  if (!confirmed) return;
+  await purgeConfirmedCategory(path, category.id, taskIDs);
+  context.ui.toast.show({
+    message: `Purged category "${category.title}".`,
+    variant: "success"
+  });
+}
 async function moveBacklogItem(context) {
   const {
     path
@@ -432,7 +656,7 @@ async function moveBacklogItem(context) {
       ...(item.notes === undefined ? {} : {
         description: item.notes
       }),
-      category: statusLabel(item.status)
+      category: categoryTitle(backlog.categories, item.status)
     }))
   });
   if (!id) return;
@@ -462,7 +686,7 @@ async function browseBacklogWithState(context, setOpen, action = () => "details"
       ...(item.notes === undefined ? {} : {
         description: item.notes
       }),
-      category: statusLabel(item.status)
+      category: categoryTitle(backlog.categories, item.status)
     }))
   }).finally(() => setOpen(false));
   if (!id) return;
@@ -472,7 +696,7 @@ async function browseBacklogWithState(context, setOpen, action = () => "details"
   if (selectedAction === "status") return changeTaskStatus(context, item);
   if (selectedAction === "edit") return editBacklogItem(context, item);
   if (selectedAction === "delete") return removeBacklogItem(context, item);
-  showTaskDetails(context, item);
+  showTaskDetails(context, item, backlog.categories);
 }
 function Commands(props) {
   const [browseOpen, setBrowseOpen] = createSignal(false);
@@ -492,7 +716,7 @@ function Commands(props) {
     commands: [{
       id: "backlog.browse",
       title: "Browse backlog",
-      description: "View backlog tasks and change their status",
+      description: "View backlog tasks and change their category",
       group: "Backlog",
       palette: true,
       slash: {
@@ -506,7 +730,7 @@ function Commands(props) {
     }, {
       id: "backlog.add",
       title: "Add backlog task",
-      description: "Create a Todo task at the top of the backlog",
+      description: "Create a task at the top of the first category",
       group: "Backlog",
       palette: true,
       slash: {
@@ -517,7 +741,7 @@ function Commands(props) {
     }, {
       id: "backlog.move",
       title: "Move backlog task",
-      description: "Change a backlog task state",
+      description: "Change a backlog task category",
       group: "Backlog",
       palette: true,
       slash: {
@@ -525,6 +749,26 @@ function Commands(props) {
         aliases: ["task-move"]
       },
       run: () => run(() => moveBacklogItem(props.context))
+    }, {
+      id: "backlog.purge",
+      title: "Purge backlog category",
+      description: "Permanently delete every task in a category",
+      group: "Backlog",
+      palette: true,
+      slash: {
+        name: "backlog-purge"
+      },
+      run: () => run(() => purgeBacklogCategory(props.context))
+    }, {
+      id: "backlog.categories",
+      title: "Manage backlog categories",
+      description: "Add, rename, move, purge, or delete a category",
+      group: "Backlog",
+      palette: true,
+      slash: {
+        name: "backlog-categories"
+      },
+      run: () => run(() => manageBacklogCategories(props.context))
     }]
   }));
   props.context.keymap.layer(() => ({
@@ -539,9 +783,17 @@ function Commands(props) {
         setBrowseOpen(false);
         return run(() => addBacklogItem(props.context));
       }
+    }, {
+      bind: "p",
+      title: "Purge backlog category",
+      group: "Backlog",
+      run() {
+        setBrowseOpen(false);
+        return run(() => purgeBacklogCategory(props.context));
+      }
     }, {
       bind: "c",
-      title: "Change selected task status",
+      title: "Change selected task category",
       group: "Backlog",
       run() {
         setBrowseAction("status");