@factorim/monotui 0.1.0

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@factorim/monotui",
+  "version": "0.1.0",
+  "description": "MonoTUI is a **Text User Interface (TUI)** dashboard for managing **Node monorepos**.",
+  "keywords": [],
+  "homepage": "https://github.com/factorim/monotui#readme",
+  "bugs": {
+    "url": "https://github.com/factorim/monotui/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/factorim/monotui.git"
+  },
+  "license": "ISC",
+  "author": "Factorim",
+  "type": "module",
+  "exports": {
+    "types": "./dist/index.d.ts",
+    "default": "./dist/index.js"
+  },
+  "main": "index.js",
+  "bin": {
+    "monotui": "dist/index.js",
+    "monotui-init": "dist/bin/init.js",
+    "monotui-trace-warnings": "dist/bin/trace-warnings.js"
+  },
+  "scripts": {
+    "prepare": "husky",
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "start": "node dist/index.js",
+    "start:trace-warnings": "node --trace-warnings dist/index.js",
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "lint": "biome check .",
+    "lint:fix": "biome check --write ."
+  },
+  "dependencies": {
+    "@inkjs/ui": "^2.0.0",
+    "ink": "^6.7.0",
+    "pino": "^10.3.1",
+    "pino-pretty": "^13.1.3",
+    "react": "^19.2.4",
+    "read-pkg": "^10.1.0",
+    "type-fest": "^5.4.4",
+    "yaml": "^2.8.2"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.3.14",
+    "@commitlint/cli": "^20.4.1",
+    "@commitlint/config-conventional": "^20.4.1",
+    "@jest/globals": "^30.2.0",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^25.2.3",
+    "@types/react": "^19.2.14",
+    "husky": "^9.1.7",
+    "jest": "^30.2.0",
+    "lint-staged": "^16.2.7",
+    "ts-jest": "^29.4.6",
+    "typescript": "^5.9.3"
+  },
+  "packageManager": "pnpm@10.28.0",
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx,json}": [
+      "biome check --write --no-errors-on-unmatched",
+      "bash -c 'pnpm biome check .'"
+    ]
+  }
+}

package/scripts/run-commitlint.sh

@@ -0,0 +1,48 @@
+#!/bin/sh
+
+# -----------------------------------------------------------------------------
+# Script Name: run-commitlint.sh
+# Purpose: This script runs `commitlint` on the commit message provided as an
+#          argument to ensure it follows the defined commit message conventions.
+#          It can be used as part of a pre-commit hook or run manually to verify
+#          commit messages.
+#
+# Usage:
+#   ./run-commitlint.sh [commit_message_file]
+#       - [commit_message_file]: The path to the file containing the commit message.
+#
+# Examples:
+#   - Run commitlint on a commit message stored in msg.txt:
+#       ./run-commitlint.sh msg.txt
+#   - Use with a Git hook to automatically lint commit messages before commit:
+#       cp run-commitlint.sh .git/hooks/commit-msg
+#
+# Bypass (for urgent situations):
+#   git commit -am "message" --no-verify
+# -----------------------------------------------------------------------------
+
+echo "==== Run commitlint ===="
+
+# Run commitlint on the commit message passed as an argument
+npx --no -- commitlint --edit "$1"
+
+# If commitlint fails, show helpful information
+if [ $? -ne 0 ]; then
+  echo "📚 Best practices - Conventional Commits:"
+  echo "   Format: <type>(<scope>): <subject>"
+  echo ""
+  echo "   Types: feat, fix, docs, style, refactor, test, chore"
+  echo ""
+  echo "   Examples:"
+  echo "   ✅ feat: add user authentication"
+  echo "   ✅ fix(api): handle null response"
+  echo "   ✅ docs: update README with installation steps"
+  echo ""
+  echo "📖 Documentation: https://www.conventionalcommits.org"
+  echo "📖 Commitlint: https://commitlint.js.org"
+  echo ""
+  echo "💡 Bypass (urgent): git commit --no-verify"
+  exit 1
+else
+  echo "✅ Commit message passed commitlint."
+fi

package/src/app/App.tsx

@@ -0,0 +1,25 @@
+import { ThemeProvider } from "@inkjs/ui"
+import { render } from "ink"
+
+import { getConfig } from "../config/config.js"
+import { PageNavigationProvider } from "../contexts/PageNavigationContext.js"
+import { WorkspaceDiscoveryProvider } from "../contexts/WorkspaceDiscoveryContext.js"
+import { getAppTheme } from "../theme/theme.js"
+import { Layout } from "./Layout.js"
+
+export function App() {
+  const config = getConfig()
+  const theme = getAppTheme(config.theme)
+
+  return (
+    <ThemeProvider theme={theme}>
+      <WorkspaceDiscoveryProvider>
+        <PageNavigationProvider>
+          <Layout />
+        </PageNavigationProvider>
+      </WorkspaceDiscoveryProvider>
+    </ThemeProvider>
+  )
+}
+
+render(<App />)

package/src/app/Layout.tsx

@@ -0,0 +1,37 @@
+import { useComponentTheme } from "@inkjs/ui"
+import { Box } from "ink"
+import { useContext } from "react"
+
+import { PageNavigationContext } from "../contexts/PageNavigationContext.js"
+import type { AppLayoutTheme } from "../theme/theme.js"
+import { Page } from "../types/page.js"
+import { ExitPage } from "./pages/Exit.js"
+import { ProjectPage } from "./pages/ProjectPage.js"
+import { WorkspacePage } from "./pages/WorkspacePage.js"
+
+export function Layout() {
+  const { currentPage } = useContext(PageNavigationContext)
+  const { styles } = useComponentTheme<AppLayoutTheme>("AppLayout")
+
+  const renderPage = () => {
+    switch (currentPage) {
+      case Page.Workspace:
+        return <WorkspacePage />
+      case Page.Project:
+        return <ProjectPage />
+      case Page.Exit:
+        return <ExitPage />
+    }
+  }
+
+  return (
+    <Box
+      flexDirection="column"
+      width="100%"
+      borderStyle="single"
+      {...styles.container()}
+    >
+      {renderPage()}
+    </Box>
+  )
+}

package/src/app/pages/Exit.tsx

@@ -0,0 +1,9 @@
+import { Box, Text } from "ink"
+
+export function ExitPage() {
+  return (
+    <Box>
+      <Text>Exiting...</Text>
+    </Box>
+  )
+}

package/src/app/pages/ProjectPage.tsx

@@ -0,0 +1,37 @@
+import { useComponentTheme } from "@inkjs/ui"
+import { Box, Text } from "ink"
+import { useContext } from "react"
+
+import { ProjectGrid } from "../../components/features/ProjectGrid/ProjectGrid.js"
+import { ProjectInfo } from "../../components/features/ProjectGrid/ProjectInfo.js"
+import { Header } from "../../components/layouts/Header/Header.js"
+import { PageNavigationContext } from "../../contexts/PageNavigationContext.js"
+import { ProjectGridProvider } from "../../contexts/ProjectGridContext.js"
+import { WorkspaceDiscoveryContext } from "../../contexts/WorkspaceDiscoveryContext.js"
+import type { GridTheme } from "../../theme/theme.js"
+
+export function ProjectPage() {
+  const { setPage } = useContext(PageNavigationContext)
+  const { project, setProject } = useContext(WorkspaceDiscoveryContext)
+  const { styles } = useComponentTheme<GridTheme>("GridTheme")
+
+  if (!project) {
+    return (
+      <Box>
+        <Text {...styles.error()}>No project selected</Text>
+      </Box>
+    )
+  }
+
+  return (
+    <ProjectGridProvider
+      setPage={setPage}
+      project={project}
+      setProject={setProject}
+    >
+      <Header />
+      <ProjectGrid />
+      <ProjectInfo />
+    </ProjectGridProvider>
+  )
+}

package/src/app/pages/WorkspacePage.tsx

@@ -0,0 +1,33 @@
+import { useContext } from "react"
+import { WorkspaceGrid } from "../../components/features/WorkspaceGrid/WorkspaceGrid.js"
+import { WorkspaceInfo } from "../../components/features/WorkspaceGrid/WorkspaceInfo.js"
+import { Header } from "../../components/layouts/Header/Header.js"
+import { PageNavigationContext } from "../../contexts/PageNavigationContext.js"
+import { WorkspaceDiscoveryContext } from "../../contexts/WorkspaceDiscoveryContext.js"
+import { WorkspacesNavigationProvider } from "../../contexts/WorkspaceGridContext.js"
+import { useWorkspaceQuickActions } from "../../hooks/useWorkspaceQuickActions.js"
+
+export function WorkspacePage() {
+  const { setPage, workspacesGridPosition, setWorkspacesGridPosition } =
+    useContext(PageNavigationContext)
+  const { projects, workspaceRuntimes, setProject } = useContext(
+    WorkspaceDiscoveryContext,
+  )
+  const workspaceQuickActions = useWorkspaceQuickActions(projects)
+
+  return (
+    <WorkspacesNavigationProvider
+      projects={projects}
+      workspaceQuickActions={workspaceQuickActions}
+      workspaceRuntimes={workspaceRuntimes}
+      initialPosition={workspacesGridPosition}
+      setPage={setPage}
+      setProject={setProject}
+      onPositionChange={setWorkspacesGridPosition}
+    >
+      <Header />
+      <WorkspaceGrid />
+      <WorkspaceInfo />
+    </WorkspacesNavigationProvider>
+  )
+}

package/src/bin/init.ts

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+import { initCommand } from "../commands/init.js"
+
+initCommand().catch((error) => {
+  console.error("✖ Initialization failed:", error.message)
+  process.exit(1)
+})

package/src/bin/trace-warnings.ts

@@ -0,0 +1,25 @@
+#!/usr/bin/env node
+import { spawnSync } from "node:child_process"
+import { fileURLToPath } from "node:url"
+
+const cliEntry = fileURLToPath(new URL("../index.js", import.meta.url))
+
+const result = spawnSync(
+  process.execPath,
+  ["--trace-warnings", cliEntry, ...process.argv.slice(2)],
+  {
+    stdio: "inherit",
+    cwd: process.cwd(),
+    env: process.env,
+  },
+)
+
+if (typeof result.status === "number") {
+  process.exit(result.status)
+}
+
+if (result.error) {
+  console.error(result.error)
+}
+
+process.exit(1)

package/src/commands/init.ts

@@ -0,0 +1,80 @@
+import { existsSync } from "node:fs"
+import { writeFile } from "node:fs/promises"
+import { join } from "node:path"
+import { DEFAULT_CONFIG } from "../config/defaults.js"
+import type { Config } from "../types/config.js"
+
+const CONFIG_FILENAME = "workspace-cli.mjs"
+
+/**
+ * Convert object to JavaScript literal syntax (without quoted keys)
+ */
+function toJavaScriptObject(obj: unknown, indent = 0): string {
+  const spaces = "  ".repeat(indent)
+  const nextSpaces = "  ".repeat(indent + 1)
+
+  if (Array.isArray(obj)) {
+    if (obj.length === 0) return "[]"
+    const items = obj
+      .map((item) =>
+        typeof item === "string"
+          ? `"${item}"`
+          : toJavaScriptObject(item, indent + 1),
+      )
+      .join(`,\n${nextSpaces}`)
+    return `[\n${nextSpaces}${items}\n${spaces}]`
+  }
+
+  if (typeof obj === "object" && obj !== null) {
+    const entries = Object.entries(obj)
+    if (entries.length === 0) return "{}"
+
+    const props = entries
+      .map(([key, value]) => {
+        const valueStr =
+          typeof value === "string"
+            ? `"${value}"`
+            : typeof value === "boolean" || typeof value === "number"
+              ? String(value)
+              : toJavaScriptObject(value, indent + 1)
+        return `${key}: ${valueStr}`
+      })
+      .join(`,\n${nextSpaces}`)
+
+    return `{\n${nextSpaces}${props}\n${spaces}}`
+  }
+
+  return String(obj)
+}
+
+/**
+ * Generate config file content
+ */
+function generateConfigContent(config: Config): string {
+  return `export default ${toJavaScriptObject(config)}\n`
+}
+
+/**
+ * Initialize workspace-cli configuration
+ */
+export async function initCommand(
+  targetDir: string = process.cwd(),
+): Promise<void> {
+  const configPath = join(targetDir, CONFIG_FILENAME)
+
+  // Check if config already exists
+  if (existsSync(configPath)) {
+    console.log(`⚠️  Config already exists at ${CONFIG_FILENAME}`)
+    console.log("   Delete it first if you want to reinitialize")
+    return
+  }
+
+  // Create config file with ESM export
+  const configContent = generateConfigContent(DEFAULT_CONFIG)
+  await writeFile(configPath, configContent, "utf-8")
+
+  console.log(`✓ Created ${CONFIG_FILENAME}`)
+  console.log("\nNext steps:")
+  console.log("  1. Customize the configuration in workspace-cli.mjs")
+  console.log("  2. Run: workspace-cli")
+}

package/src/components/features/ProjectGrid/ColCompose.tsx

@@ -0,0 +1,99 @@
+import { useComponentTheme } from "@inkjs/ui"
+import { Box, Text } from "ink"
+
+import type { GridTheme } from "../../../theme/theme"
+import type {
+  ComposeCommandCell,
+  ComposeServiceCell,
+} from "../../../types/project-grid"
+import type { RuntimeStatus } from "../../../types/workspace-runtime.js"
+
+type ColComposeProps = {
+  composeCommandCells: ComposeCommandCell[]
+  composeServiceCells: ComposeServiceCell[]
+  composeServiceStatuses?: Record<string, RuntimeStatus>
+  row: number
+  col: number
+}
+
+export function ColCompose({
+  composeCommandCells,
+  composeServiceCells,
+  composeServiceStatuses,
+  row,
+  col,
+}: ColComposeProps) {
+  const { styles } = useComponentTheme<GridTheme>("GridTheme")
+
+  return (
+    <Box flexDirection="column" width="32%">
+      <Box
+        flexDirection="column"
+        width="100%"
+        borderStyle="single"
+        borderTop={false}
+        borderBottom={true}
+        borderLeft={false}
+        borderRight={false}
+        {...styles.border()}
+      >
+        <Text {...styles.headerText()}>DOCKER COMPOSE</Text>
+        <Box width="100%">
+          <Text>&nbsp;</Text>
+        </Box>
+      </Box>
+
+      {composeCommandCells.map((cell) => (
+        <Box key={cell.action.name} width="100%">
+          <Text
+            {...styles.action()}
+            inverse={row === cell.row && col === cell.col}
+          >
+            {cell.action.name}
+          </Text>
+        </Box>
+      ))}
+
+      <Box flexDirection="column" borderStyle="single" marginTop={1}>
+        {composeServiceCells.map((cell, index) => {
+          const isSelected = row === cell.row && col === cell.col
+          const serviceStatus = composeServiceStatuses?.[cell.service.name]
+
+          return (
+            <Box
+              key={cell.service.name}
+              flexDirection="column"
+              borderStyle="single"
+              borderTop={false}
+              borderBottom={index < composeServiceCells.length - 1}
+              borderLeft={false}
+              borderRight={false}
+              borderColor={
+                isSelected ? styles.action().color : styles.text().color
+              }
+            >
+              <Text
+                {...(serviceStatus
+                  ? styles.runtime({ status: serviceStatus })
+                  : isSelected
+                    ? styles.action()
+                    : styles.text())}
+                inverse={isSelected}
+              >
+                {cell.service.name}
+              </Text>
+              {cell.service.image && (
+                <Text {...styles.text()}>{cell.service.image}</Text>
+              )}
+              {cell.service.ports && cell.service.ports.length > 0 && (
+                <Text {...styles.text()}>
+                  Ports: {cell.service.ports.join(", ")}
+                </Text>
+              )}
+            </Box>
+          )
+        })}
+      </Box>
+    </Box>
+  )
+}

package/src/components/features/ProjectGrid/ColMakefile.tsx

@@ -0,0 +1,44 @@
+import { useComponentTheme } from "@inkjs/ui"
+import { Box, Text } from "ink"
+import type { GridTheme } from "../../../theme/theme.js"
+import type { MakefileCell } from "../../../types/project-grid"
+
+type ColMakefileProps = {
+  makefileCells: MakefileCell[]
+  row: number
+  col: number
+}
+
+export function ColMakefile({ makefileCells, row, col }: ColMakefileProps) {
+  const { styles } = useComponentTheme<GridTheme>("GridTheme")
+
+  return (
+    <Box flexDirection="column" width="32%">
+      <Box
+        flexDirection="column"
+        width="100%"
+        borderStyle="single"
+        borderTop={false}
+        borderBottom={true}
+        borderLeft={false}
+        borderRight={false}
+        {...styles.border()}
+      >
+        <Text {...styles.headerText()}>MAKEFILE</Text>
+        <Box width="100%">
+          <Text>&nbsp;</Text>
+        </Box>
+      </Box>
+      {makefileCells.map((cell) => (
+        <Box key={cell.command.command} width="100%">
+          <Text
+            {...styles.action()}
+            inverse={row === cell.row && col === cell.col}
+          >
+            {cell.command.name}
+          </Text>
+        </Box>
+      ))}
+    </Box>
+  )
+}

package/src/components/features/ProjectGrid/ColPackageJson.tsx

@@ -0,0 +1,54 @@
+import { useComponentTheme } from "@inkjs/ui"
+import { Box, Text } from "ink"
+import type { GridTheme } from "../../../theme/theme.js"
+import type { Project } from "../../../types/project"
+import type { PackageJsonCell } from "../../../types/project-grid"
+
+type ColPackageJsonProps = {
+  project: Project
+  packageJsonCells: PackageJsonCell[]
+  row: number
+  col: number
+}
+
+export function ColPackageJson({
+  project,
+  packageJsonCells,
+  row,
+  col,
+}: ColPackageJsonProps) {
+  const { styles } = useComponentTheme<GridTheme>("GridTheme")
+
+  return (
+    <Box flexDirection="column" width="32%">
+      <Box
+        flexDirection="column"
+        width="100%"
+        borderStyle="single"
+        borderTop={false}
+        borderBottom={true}
+        borderLeft={false}
+        borderRight={false}
+        {...styles.border()}
+      >
+        <Text {...styles.headerText()}>PACKAGE.JSON</Text>
+        <Box width="100%">
+          <Text>{project?.facets.packageJson?.name}</Text>
+          {project?.facets.packageJson?.version && (
+            <Text>{` v${project?.facets.packageJson?.version}`}</Text>
+          )}
+        </Box>
+      </Box>
+      {packageJsonCells.map((cell) => (
+        <Box key={cell.script.command} width="100%">
+          <Text
+            {...styles.action()}
+            inverse={row === cell.row && col === cell.col}
+          >
+            {cell.script.name}
+          </Text>
+        </Box>
+      ))}
+    </Box>
+  )
+}

package/src/components/features/ProjectGrid/EmptyCol.tsx

@@ -0,0 +1,28 @@
+import { useComponentTheme } from "@inkjs/ui"
+import { Box, Text } from "ink"
+
+import type { GridTheme } from "../../../theme/theme.js"
+
+export function EmptyCol() {
+  const { styles } = useComponentTheme<GridTheme>("GridTheme")
+
+  return (
+    <Box flexDirection="column" width="32%">
+      <Box
+        flexDirection="column"
+        width="100%"
+        borderStyle="single"
+        borderTop={false}
+        borderBottom={true}
+        borderLeft={false}
+        borderRight={false}
+        {...styles.border()}
+      >
+        <Text {...styles.text()}>&nbsp;</Text>
+        <Box width="100%">
+          <Text>&nbsp;</Text>
+        </Box>
+      </Box>
+    </Box>
+  )
+}