Files

Alvis f1d51b8cc8 Add side panels, task selection, graph animation, and project docs

- Foldable left panel (user profile) and right panel (task details)
- Clicking a task in the list or graph node selects it and shows details
- Both views (task list + graph) always mounted via absolute inset-0 for
  correct canvas dimensions; tabs toggle visibility with opacity
- Graph node selection animation: other nodes repel outward (charge -600),
  then selected node smoothly slides to center (500ms cubic ease-out),
  then charge restores to -120 and graph stabilizes
- Graph re-fits on tab switch and panel resize via ResizeObserver
- Fix UUID string IDs throughout (backend returns UUIDs, not integers)
- Add TaskDetailPanel, UserPanel components
- Add CLAUDE.md project documentation

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

2026-04-08 11:23:06 +00:00

2.9 KiB

Raw Blame History

cliui

easily create complex multi-column command-line-interfaces.

Example

const ui = require('cliui')()

ui.div('Usage: $0 [command] [options]')

ui.div({
  text: 'Options:',
  padding: [2, 0, 1, 0]
})

ui.div(
  {
    text: "-f, --file",
    width: 20,
    padding: [0, 4, 0, 4]
  },
  {
    text: "the file to load." +
      chalk.green("(if this description is long it wraps).")
    ,
    width: 20
  },
  {
    text: chalk.red("[required]"),
    align: 'right'
  }
)

console.log(ui.toString())

Deno/ESM Support

As of v7 cliui supports Deno and ESM:

import cliui from "https://deno.land/x/cliui/deno.ts";

const ui = cliui({})

ui.div('Usage: $0 [command] [options]')

ui.div({
  text: 'Options:',
  padding: [2, 0, 1, 0]
})

ui.div({
  text: "-f, --file",
  width: 20,
  padding: [0, 4, 0, 4]
})

console.log(ui.toString())

Layout DSL

cliui exposes a simple layout DSL:

If you create a single ui.div, passing a string rather than an object:

\n: characters will be interpreted as new rows.
\t: characters will be interpreted as new columns.
\s: characters will be interpreted as padding.

as an example...

var ui = require('./')({
  width: 60
})

ui.div(
  'Usage: node ./bin/foo.js\n' +
  '  <regex>\t  provide a regex\n' +
  '  <glob>\t  provide a glob\t [required]'
)

console.log(ui.toString())

will output:

Usage: node ./bin/foo.js
  <regex>  provide a regex
  <glob>   provide a glob          [required]

Methods

cliui = require('cliui')

cliui({width: integer})

Specify the maximum width of the UI being generated. If no width is provided, cliui will try to get the current window's width and use it, and if that doesn't work, width will be set to 80.

cliui({wrap: boolean})

Enable or disable the wrapping of text in a column.

cliui.div(column, column, column)

Create a row with any number of columns, a column can either be a string, or an object with the following options:

text: some text to place in the column.
width: the width of a column.
align: alignment, right or center.
padding: [top, right, bottom, left].
border: should a border be placed around the div?

cliui.span(column, column, column)

Similar to div, except the next row will be appended without a new line being created.

cliui.resetOutput()

Resets the UI elements of the current cliui instance, maintaining the values set for width and wrap.

2.9 KiB Raw Blame History