opencode-backlog 0.1.5 → 0.1.6

package/README.md

@@ -4,6 +4,8 @@ A persistent project backlog for OpenCode V2 agents and the TUI.
 
 `opencode-backlog` gives the agent tools to manage project tasks. It also adds an interactive backlog to the OpenCode sidebar and command palette.
 
+Published package: [opencode-backlog on npm](https://www.npmjs.com/package/opencode-backlog).
+
 ![Backlog sidebar in OpenCode](docs/images/opencode-backlog.jpg)
 
 ## What It Does
@@ -129,6 +131,16 @@ Open the command palette and select `Browse backlog` to inspect tasks. Select a
 
 Run `/backlog` or `/tasks` to open the same browser directly.
 
+The backlog browser provides these shortcuts:
+
+- `Enter` opens the selected task details.
+- `n` creates a task.
+- `c` changes the selected task state.
+- `e` edits the selected task.
+- `d` deletes the selected task after confirmation.
+
+Click a sidebar task to open its details. The detail dialog provides `c`, `e`, and `d` for the same actions.
+
 ## Agent Tools
 
 | Tool | Purpose |

package/dist/tui.js

@@ -10,7 +10,7 @@ import { randomUUID } from "node:crypto";
 import { watch } from "node:fs";
 import { join } from "node:path";
 import { Plugin } from "@opencode-ai/plugin/tui";
-import { createMemo, createSignal, For, onCleanup, Show } from "solid-js";
+import { createMemo, createSignal, For, onCleanup, onMount, Show } from "solid-js";
 import { BACKLOG_FILE, EMPTY_BACKLOG, STATUSES, moveItem } from "./backlog.js";
 import { readBacklog, readBacklogSync, updateBacklog } from "./store.js";
 function statusLabel(status) {
@@ -116,6 +116,7 @@ function BacklogView(props) {
                 _$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");
@@ -149,6 +150,140 @@ function BacklogView(props) {
 function taskDetails(item) {
   return [`Status: ${statusLabel(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);
+    _$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));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$14;
+  })();
+}
+function TaskDetailsDialog(props) {
+  const run = operation => {
+    props.context.ui.dialog.clear();
+    void operation().catch(cause => props.context.ui.toast.show({
+      message: cause instanceof Error ? cause.message : String(cause),
+      variant: "error"
+    }));
+  };
+  const changeStatus = () => run(() => changeTaskStatus(props.context, props.item));
+  const edit = () => run(() => editBacklogItem(props.context, props.item));
+  const remove = () => run(() => removeBacklogItem(props.context, props.item));
+  onMount(() => props.context.ui.dialog.set({
+    size: "medium"
+  }));
+  props.context.keymap.layer(() => ({
+    mode: "modal",
+    priority: 100,
+    commands: [{
+      bind: "c",
+      title: "Change backlog task status",
+      group: "Backlog",
+      run: changeStatus
+    }, {
+      bind: "e",
+      title: "Edit backlog task",
+      group: "Backlog",
+      run: edit
+    }, {
+      bind: "d",
+      title: "Delete backlog task",
+      group: "Backlog",
+      run: remove
+    }]
+  }));
+  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");
+    _$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$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, {
+      get context() {
+        return props.context;
+      },
+      shortcut: "c",
+      label: "status",
+      run: changeStatus
+    }), null);
+    _$insert(_el$24, _$createComponent(TaskAction, {
+      get context() {
+        return props.context;
+      },
+      shortcut: "e",
+      label: "edit",
+      run: edit
+    }), null);
+    _$insert(_el$24, _$createComponent(TaskAction, {
+      get context() {
+        return props.context;
+      },
+      shortcut: "d",
+      label: "delete",
+      danger: true,
+      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));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$17;
+  })();
+}
+function showTaskDetails(context, item) {
+  context.ui.dialog.show(() => _$createComponent(TaskDetailsDialog, {
+    context: context,
+    item: item
+  }));
+}
 async function browseBacklog(context) {
   return browseBacklogWithState(context, () => {});
 }
@@ -193,6 +328,89 @@ async function addBacklogItem(context) {
     variant: "success"
   });
 }
+async function changeTaskStatus(context, item) {
+  const status = await context.ui.dialog.select({
+    title: `Change status: ${item.title}`,
+    current: item.status,
+    options: STATUSES.map(candidate => ({
+      title: statusLabel(candidate),
+      value: candidate,
+      ...(candidate === item.status ? {
+        description: "Current status"
+      } : {})
+    }))
+  });
+  if (!status || status === item.status) return;
+  const {
+    path
+  } = backlogLocation(context);
+  await updateBacklog(path, current => ({
+    version: 1,
+    items: moveItem(current.items, item.id, status, undefined)
+  }));
+  context.ui.toast.show({
+    message: `Moved "${item.title}" to ${statusLabel(status)}.`,
+    variant: "success"
+  });
+}
+async function editBacklogItem(context, item) {
+  const title = await context.ui.dialog.prompt({
+    title: "Edit backlog task",
+    placeholder: "Task title",
+    value: item.title
+  });
+  if (!title?.trim()) return;
+  const notes = await context.ui.dialog.prompt({
+    title: title.trim(),
+    description: "Optional notes",
+    placeholder: "Leave empty for no notes",
+    value: item.notes ?? ""
+  });
+  if (notes === undefined) return;
+  const {
+    path
+  } = backlogLocation(context);
+  await updateBacklog(path, current => ({
+    version: 1,
+    items: current.items.map(candidate => {
+      if (candidate.id !== item.id) return candidate;
+      return {
+        id: candidate.id,
+        title: title.trim(),
+        status: candidate.status,
+        ...(notes.trim() ? {
+          notes: notes.trim()
+        } : {})
+      };
+    })
+  }));
+  context.ui.toast.show({
+    message: `Updated "${title.trim()}".`,
+    variant: "success"
+  });
+}
+async function removeBacklogItem(context, item) {
+  const confirmed = await context.ui.dialog.confirm({
+    title: "Delete backlog task",
+    message: item.title,
+    label: {
+      confirm: "Delete",
+      cancel: "Cancel"
+    }
+  });
+  if (!confirmed) return;
+  const {
+    path
+  } = backlogLocation(context);
+  await updateBacklog(path, current => ({
+    version: 1,
+    items: current.items.filter(candidate => candidate.id !== item.id)
+  }));
+  context.ui.toast.show({
+    message: `Deleted "${item.title}".`,
+    variant: "success"
+  });
+}
 async function moveBacklogItem(context) {
   const {
     path
@@ -220,28 +438,9 @@ async function moveBacklogItem(context) {
   if (!id) return;
   const item = backlog.items.find(candidate => candidate.id === id);
   if (!item) return;
-  const status = await context.ui.dialog.select({
-    title: `Change status: ${item.title}`,
-    current: item.status,
-    options: STATUSES.map(candidate => ({
-      title: statusLabel(candidate),
-      value: candidate,
-      ...(candidate === item.status ? {
-        description: "Current status"
-      } : {})
-    }))
-  });
-  if (!status || status === item.status) return;
-  await updateBacklog(path, current => ({
-    version: 1,
-    items: moveItem(current.items, item.id, status, undefined)
-  }));
-  context.ui.toast.show({
-    message: `Moved "${item.title}" to ${statusLabel(status)}.`,
-    variant: "success"
-  });
+  await changeTaskStatus(context, item);
 }
-async function browseBacklogWithState(context, setOpen) {
+async function browseBacklogWithState(context, setOpen, action = () => "details") {
   const {
     path
   } = backlogLocation(context);
@@ -255,7 +454,7 @@ async function browseBacklogWithState(context, setOpen) {
   }
   setOpen(true);
   const id = await context.ui.dialog.select({
-    title: "Backlog (n: new task)",
+    title: "Backlog",
     placeholder: "Select a task",
     options: backlog.items.map(item => ({
       title: item.title,
@@ -269,13 +468,15 @@ async function browseBacklogWithState(context, setOpen) {
   if (!id) return;
   const item = backlog.items.find(candidate => candidate.id === id);
   if (!item) return;
-  await context.ui.dialog.alert({
-    title: item.title,
-    message: taskDetails(item)
-  });
+  const selectedAction = action();
+  if (selectedAction === "status") return changeTaskStatus(context, item);
+  if (selectedAction === "edit") return editBacklogItem(context, item);
+  if (selectedAction === "delete") return removeBacklogItem(context, item);
+  showTaskDetails(context, item);
 }
 function Commands(props) {
   const [browseOpen, setBrowseOpen] = createSignal(false);
+  const [browseAction, setBrowseAction] = createSignal("details");
   const run = async operation => {
     try {
       await operation();
@@ -298,7 +499,10 @@ function Commands(props) {
         name: "backlog",
         aliases: ["tasks"]
       },
-      run: () => run(() => browseBacklogWithState(props.context, setBrowseOpen))
+      run: () => {
+        setBrowseAction("details");
+        return run(() => browseBacklogWithState(props.context, setBrowseOpen, browseAction));
+      }
     }, {
       id: "backlog.add",
       title: "Add backlog task",
@@ -335,6 +539,30 @@ function Commands(props) {
         setBrowseOpen(false);
         return run(() => addBacklogItem(props.context));
       }
+    }, {
+      bind: "c",
+      title: "Change selected task status",
+      group: "Backlog",
+      run() {
+        setBrowseAction("status");
+        props.context.keymap.dispatch("dialog.select.submit");
+      }
+    }, {
+      bind: "d",
+      title: "Delete selected task",
+      group: "Backlog",
+      run() {
+        setBrowseAction("delete");
+        props.context.keymap.dispatch("dialog.select.submit");
+      }
+    }, {
+      bind: "e",
+      title: "Edit selected task",
+      group: "Backlog",
+      run() {
+        setBrowseAction("edit");
+        props.context.keymap.dispatch("dialog.select.submit");
+      }
     }]
   }));
   return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-backlog",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Project backlog tools and sidebar for OpenCode 2",
   "type": "module",
   "repository": {