termdeck-cli 1.0.2 → 1.0.3

package/README.md

@@ -69,6 +69,7 @@ Every later launch skips straight to the dashboard. Re-run it any time with
 | <kbd>d</kbd> | start the dev server for the selection (or click **Dev Server**) |
 | <kbd>e</kbd> | open the editor in a new terminal window (or click **Editor**) |
 | <kbd>a</kbd> | open the agent in a new terminal window (or click **Agent**) |
+| <kbd>tab</kbd>, <kbd>shift</kbd>+<kbd>tab</kbd> | move keyboard focus to the buttons — a focused button lights up and answers to <kbd>space</kbd>/<kbd>enter</kbd> |
 | <kbd>x</kbd> | stop the selected project's dev server |
 | <kbd>r</kbd> | reload the config file from disk |
 | <kbd>PgUp</kbd>/<kbd>PgDn</kbd>, wheel | scroll the log pane (pauses following, shows how many lines arrived) |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "termdeck-cli",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A terminal dashboard for your local dev projects: start dev servers with in-app logs, open your editor, or launch a coding agent in a fresh terminal window.",
   "keywords": [
     "cli",

package/src/dashboard.js

@@ -15,9 +15,9 @@
  *   | footer: hints / status messages                              |
  *   +--------------------------------------------------------------+
  *
- * Mouse support is enabled on the screen, and the three CTAs are clickable
- * boxes: blessed emits `click` on mouseup for any element registered as
- * clickable, and every CTA also has a keyboard shortcut.
+ * Mouse support is enabled on the screen, and the three CTAs are real blessed
+ * buttons: clickable with the mouse, `press`-able with Enter/Space when focused
+ * (Tab cycles focus), and every CTA also has its own keyboard shortcut.
  */
 
 const blessed = require('blessed');
@@ -47,7 +47,7 @@ const MAIN_WIDTH = '70%';
 const PROJECT_COLORS = ['cyan', 'green', 'yellow', 'magenta', 'red', 'white'];
 
 const HINTS =
-  ' {bold}↑/↓{/bold} select  {bold}d{/bold} dev server  {bold}e{/bold} editor  {bold}a{/bold} agent  ' +
+  ' {bold}↑/↓{/bold} select  {bold}tab{/bold} focus buttons  {bold}d{/bold} dev server  {bold}e{/bold} editor  {bold}a{/bold} agent  ' +
   '{bold}x{/bold} stop server  {bold}r{/bold} reload  {bold}PgUp/PgDn{/bold} logs  {bold}q{/bold} quit ';
 
 /**
@@ -175,30 +175,47 @@ function launchDashboard(config, options = {}) {
     label: ' dev server logs ',
   });
 
-  /** The three CTAs. `clickable: true` is what makes blessed deliver `click`. */
-  function makeButton({ left, width, label, color, onPress }) {
-    const button = blessed.box({
+  /**
+   * The three CTAs: real blessed buttons. They are clickable (`mouse: true`
+   * wires click -> press), answer to space/enter when focused, light up on
+   * hover/focus, and each shows its own keyboard shortcut. `autoFocus: false`
+   * keeps keyboard focus on the project list until the user Tabs to a button.
+   */
+  function makeButton({ left, width, label, hint, color, onPress }) {
+    const button = blessed.button({
       parent: screen,
       top: BUTTON_TOP,
       left,
       width,
       height: LAYOUT.buttonHeight,
-      content: `{bold}${label}{/bold}`,
+      content: `{bold}${label}{/bold} {gray-fg}(${hint}){/gray-fg}`,
       align: 'center',
       valign: 'middle',
       tags: true,
+      mouse: true,
       clickable: true,
       autoFocus: false, // keep keyboard focus on the project list
       border: { type: 'line' },
-      style: { fg: 'black', bg: color, border: { fg: color } },
-      effects: { hover: { bg: 'white', fg: 'black' } },
+      style: {
+        fg: 'white',
+        bg: color,
+        bold: true,
+        border: { fg: color },
+        hover: { bg: 'lightwhite', fg: 'black', bold: true },
+        focus: { bg: 'lightwhite', fg: 'black', bold: true },
+      },
     });
 
-    button.on('click', () => {
+    button.on('press', () => {
       try {
         onPress();
       } catch (err) {
         setStatus(`Error: ${err.message}`);
+      } finally {
+        // blessed's Button.press() focuses the button before emitting `press`;
+        // hand focus back so the arrow keys keep working after activation.
+        projectList.focus();
+        screen.render();
       }
     });
 
@@ -206,9 +223,9 @@ function launchDashboard(config, options = {}) {
   }
 
   const buttons = {
-    dev: makeButton({ left: MAIN_LEFT, width: '23%', label: '▶  Dev Server', color: 'green', onPress: () => startDevServer() }),
-    editor: makeButton({ left: '53%', width: '23%', label: '</>  Editor', color: 'blue', onPress: () => openTool('editor') }),
-    agent: makeButton({ left: '76%', width: '24%', label: '☕  Agent', color: 'magenta', onPress: () => openTool('agent') }),
+    dev: makeButton({ left: MAIN_LEFT, width: '23%', label: '▶  Dev Server', hint: 'd', color: 'green', onPress: () => startDevServer() }),
+    editor: makeButton({ left: '53%', width: '23%', label: '</>  Editor', hint: 'e', color: 'blue', onPress: () => openTool('editor') }),
+    agent: makeButton({ left: '76%', width: '24%', label: '☕  Agent', hint: 'a', color: 'magenta', onPress: () => openTool('agent') }),
   };
 
   /* ---------------------------------------------------------------- *
@@ -493,6 +510,10 @@ function launchDashboard(config, options = {}) {
   screen.key(['r'], () => reloadConfig());
   screen.key(['j'], () => projectList.down(1));
   screen.key(['k'], () => projectList.up(1));
+  // Tab cycles keyboard focus across the list and the three CTAs; the focused
+  // CTA lights up and answers to space/enter.
+  screen.key(['tab'], () => screen.focusNext());
+  screen.key(['S-tab'], () => screen.focusPrevious());
   // NOTE: blessed reports uppercase letters as `S-g`, so 'G' alone never fires.
   screen.key(['S-g', 'end'], () => logView.followTail());
   screen.key(['pageup'], () => logView.page(-1));

package/src/index.js

@@ -33,6 +33,7 @@ const HELP = `
     d                 Start \`npm run dev\` and stream its logs into the pane
     e                 Open the project in your editor in a NEW terminal window
     a                 Open your coding agent in a NEW terminal window
+    tab / S-tab       Cycle focus to the buttons (space/enter activates)
     x                 Stop the selected project's dev server
     r                 Reload the config file
     PgUp/PgDn, wheel  Scroll the dev server logs (G to follow the tail again)