@factorim/monotui 0.1.0

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

@@ -0,0 +1,94 @@
+import { useComponentTheme } from "@inkjs/ui"
+import { Box, Text } from "ink"
+import { useContext } from "react"
+
+import { ProjectGridContext } from "../../../contexts/ProjectGridContext.js"
+import { WorkspaceDiscoveryContext } from "../../../contexts/WorkspaceDiscoveryContext.js"
+import type { GridTheme } from "../../../theme/theme.js"
+import type { RuntimeStatus } from "../../../types/workspace-runtime.js"
+import { ColCompose } from "./ColCompose.js"
+import { ColMakefile } from "./ColMakefile.js"
+import { ColPackageJson } from "./ColPackageJson.js"
+import { EmptyCol } from "./EmptyCol.js"
+
+export function ProjectGrid() {
+  const { project, workspaceRuntimes } = useContext(WorkspaceDiscoveryContext)
+  const { workspaceNavigationGrid, row, col } = useContext(ProjectGridContext)
+  const { styles } = useComponentTheme<GridTheme>("GridTheme")
+
+  const {
+    makefileCells,
+    packageJsonCells,
+    composeCommandCells,
+    composeServiceCells,
+  } = workspaceNavigationGrid
+
+  const composeServiceStatuses: Record<string, RuntimeStatus> =
+    workspaceRuntimes
+      .find(
+        (workspaceRuntime) => workspaceRuntime.workspacePath === project?.path,
+      )
+      ?.runStates.filter((runState) => runState.type === "service")
+      .reduce<Record<string, RuntimeStatus>>((acc, runState) => {
+        acc[runState.name] = runState.status
+        return acc
+      }, {}) ?? {}
+
+  return (
+    <Box flexDirection="column" width="100%">
+      <Box width="100%" {...styles.border()}>
+        <Box flexDirection="column" width="4%">
+          <Box
+            flexDirection="column"
+            width="100%"
+            borderStyle="single"
+            borderTop={false}
+            borderBottom={true}
+            borderLeft={false}
+            borderRight={false}
+            {...styles.border()}
+          >
+            <Box width="100%">
+              <Text>&nbsp;</Text>
+            </Box>
+            <Box width="100%">
+              <Text>&nbsp;</Text>
+            </Box>
+          </Box>
+          <Box width="100%">
+            <Text {...styles.action()}>{" < "}</Text>
+          </Box>
+        </Box>
+
+        {makefileCells.length > 0 && (
+          <ColMakefile makefileCells={makefileCells} row={row} col={col} />
+        )}
+
+        {packageJsonCells.length > 0 && project && (
+          <ColPackageJson
+            project={project}
+            packageJsonCells={packageJsonCells}
+            row={row}
+            col={col}
+          />
+        )}
+
+        {composeServiceCells.length > 0 && (
+          <ColCompose
+            composeCommandCells={composeCommandCells}
+            composeServiceCells={composeServiceCells}
+            composeServiceStatuses={composeServiceStatuses}
+            row={row}
+            col={col}
+          />
+        )}
+
+        {packageJsonCells.length === 0 && <EmptyCol />}
+
+        {makefileCells.length === 0 && <EmptyCol />}
+
+        {composeServiceCells.length === 0 && <EmptyCol />}
+      </Box>
+    </Box>
+  )
+}

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

@@ -0,0 +1,67 @@
+import { useComponentTheme } from "@inkjs/ui"
+import { Box, Text } from "ink"
+import { useContext } from "react"
+
+import { ProjectGridContext } from "../../../contexts/ProjectGridContext.js"
+import type { GridTheme } from "../../../theme/theme.js"
+import {
+  getCellLabel,
+  getProjectCellByPosition,
+} from "../../../utils/project/project-grid.js"
+
+export function ProjectInfo() {
+  const { workspaceNavigationGrid, row, col } = useContext(ProjectGridContext)
+  const { styles } = useComponentTheme<GridTheme>("GridTheme")
+
+  const selectedCell = getProjectCellByPosition(
+    workspaceNavigationGrid,
+    row,
+    col,
+  )
+
+  return (
+    <Box
+      flexDirection="column"
+      width="100%"
+      borderStyle="single"
+      borderTop={true}
+      borderBottom={false}
+      borderLeft={false}
+      borderRight={false}
+      {...styles.border()}
+    >
+      {selectedCell && (
+        <Box width="100%" flexDirection="column">
+          <Text {...styles.info()}>{getCellLabel(selectedCell)}</Text>
+
+          <Box>
+            {selectedCell.type === "makefile" && (
+              <Box>
+                <Text {...styles.action()}>{selectedCell.command.name}</Text>
+                <Text dimColor> → </Text>
+                <Text>{selectedCell.command.exec}</Text>
+              </Box>
+            )}
+            {selectedCell.type === "packageJson" && (
+              <Box>
+                <Text {...styles.action()}>{selectedCell.script.name}</Text>
+                <Text dimColor> → </Text>
+                <Text>{selectedCell.script.exec}</Text>
+              </Box>
+            )}
+            {selectedCell.type === "composeCommand" && (
+              <Box>
+                <Text {...styles.action()}>{selectedCell.action.name}</Text>
+                <Text dimColor> → </Text>
+                <Text>{selectedCell.action.command}</Text>
+              </Box>
+            )}
+            {selectedCell.type === "composeService" && (
+              <Text>Service: {selectedCell.service.name}</Text>
+            )}
+          </Box>
+        </Box>
+      )}
+    </Box>
+  )
+}

package/src/components/features/WorkspaceGrid/WorkspaceGrid.tsx

@@ -0,0 +1,52 @@
+import { useComponentTheme } from "@inkjs/ui"
+import { Box, Text } from "ink"
+import { useContext } from "react"
+
+import { WorkspaceGridContext } from "../../../contexts/WorkspaceGridContext.js"
+import type { GridTheme } from "../../../theme/theme.js"
+import { getQuickActionColumnMaxSizes } from "../../../utils/navigation/navigation-helper.js"
+import { getWorkspaceQuickActionCells } from "../../../utils/workspace/workspace-grid.js"
+import { WorkspaceRow } from "./WorkspaceRow.js"
+
+export function WorkspaceGrid() {
+  const { workspacesNavigationGrid } = useContext(WorkspaceGridContext)
+  const { styles } = useComponentTheme<GridTheme>("GridTheme")
+  const quickActionColSizes = getQuickActionColumnMaxSizes(
+    workspacesNavigationGrid.map((row) =>
+      getWorkspaceQuickActionCells(row.cells),
+    ),
+  )
+
+  return (
+    <Box flexDirection="column" width="100%">
+      <Box width="100%" borderColor="gray">
+        <Box width="3%">
+          <Text {...styles.headerText()}>#</Text>
+        </Box>
+        <Box width="17%">
+          <Text {...styles.headerText()}>Name</Text>
+        </Box>
+        <Box width="10%">
+          <Text {...styles.headerText()}>Type</Text>
+        </Box>
+        <Box width="20%">
+          <Text {...styles.headerText()}>Path</Text>
+        </Box>
+        <Box width="20%">
+          <Text {...styles.headerText()}>Quick Actions</Text>
+        </Box>
+        <Box width="30%">
+          <Text {...styles.headerText()}>State</Text>
+        </Box>
+      </Box>
+      {workspacesNavigationGrid.map((row, rowNb) => (
+        <WorkspaceRow
+          key={row.id}
+          cells={row.cells}
+          rowNb={rowNb}
+          quickActionColSizes={quickActionColSizes}
+        />
+      ))}
+    </Box>
+  )
+}

package/src/components/features/WorkspaceGrid/WorkspaceInfo.tsx

@@ -0,0 +1,89 @@
+import { useComponentTheme } from "@inkjs/ui"
+import { Box, Text } from "ink"
+import { useContext } from "react"
+
+import { WorkspaceGridContext } from "../../../contexts/WorkspaceGridContext.js"
+import type { GridTheme } from "../../../theme/theme.js"
+import { getWorkspaceCellByPosition } from "../../../utils/workspace/workspace-grid.js"
+
+export function WorkspaceInfo() {
+  const { workspacesNavigationGrid, row, col } =
+    useContext(WorkspaceGridContext)
+  const { styles } = useComponentTheme<GridTheme>("GridTheme")
+
+  const selectedCell = getWorkspaceCellByPosition(
+    workspacesNavigationGrid,
+    row,
+    col,
+  )
+
+  return (
+    <Box
+      flexDirection="column"
+      width="100%"
+      borderStyle="single"
+      borderTop={true}
+      borderBottom={false}
+      borderLeft={false}
+      borderRight={false}
+      {...styles.border()}
+    >
+      {selectedCell && selectedCell.type === "workspace" && (
+        <Box flexDirection="column">
+          <Text {...styles.info()}>{selectedCell.workspace.path}</Text>
+          <Box gap={2}>
+            {Array.isArray(
+              selectedCell.workspace.facets.makefile?.commands,
+            ) && (
+              <Text {...styles.text()} dimColor>
+                makefile commands:
+                {selectedCell.workspace.facets.makefile.commands.length}
+              </Text>
+            )}
+            {Array.isArray(
+              selectedCell.workspace.facets.packageJson?.scripts,
+            ) && (
+              <Text {...styles.text()} dimColor>
+                package.json scripts:
+                {selectedCell.workspace.facets.packageJson.scripts.length}
+              </Text>
+            )}
+            {Array.isArray(selectedCell.workspace.facets.compose?.services) && (
+              <Text {...styles.text()} dimColor>
+                docker compose services:
+                {selectedCell.workspace.facets.compose.services.length}
+              </Text>
+            )}
+          </Box>
+        </Box>
+      )}
+      {selectedCell && selectedCell.type === "quickAction" && (
+        <Box flexDirection="column">
+          <Box>
+            <Text {...styles.info()}>{selectedCell.action.facetPath}</Text>
+          </Box>
+          <Box gap={1}>
+            <Text {...styles.action()}>{selectedCell.action.name}</Text>
+            <Text dimColor> → </Text>
+            <Text {...styles.text()} dimColor>
+              {selectedCell.action.command}
+            </Text>
+          </Box>
+        </Box>
+      )}
+      {selectedCell && selectedCell.type === "runtime" && (
+        <Box flexDirection="column">
+          <Box gap={1}>
+            <Text {...styles.info()}>{selectedCell.runState.name}</Text>
+            {selectedCell.runState.statusMessage && (
+              <Text {...styles.error()}>
+                {selectedCell.runState.statusMessage}
+              </Text>
+            )}
+          </Box>
+          <Text {...styles.action()}>{selectedCell.runState.command}</Text>
+        </Box>
+      )}
+    </Box>
+  )
+}

package/src/components/features/WorkspaceGrid/WorkspaceRow.tsx

@@ -0,0 +1,115 @@
+import { useComponentTheme } from "@inkjs/ui"
+import { Box, Text } from "ink"
+import { useContext } from "react"
+
+import { WorkspaceGridContext } from "../../../contexts/WorkspaceGridContext.js"
+import type { GridTheme } from "../../../theme/theme.js"
+import type { WorkspacesNavigationCell } from "../../../types/workspace-grid.js"
+import {
+  getWorkspaceCell,
+  getWorkspaceQuickActionCells,
+  getWorkspaceRuntimeCells,
+} from "../../../utils/workspace/workspace-grid.js"
+
+interface WorkspaceRowProps {
+  cells: (WorkspacesNavigationCell | null)[]
+  rowNb: number
+  quickActionColSizes: number[]
+}
+
+export function WorkspaceRow({
+  cells,
+  rowNb,
+  quickActionColSizes,
+}: WorkspaceRowProps) {
+  const { row, col } = useContext(WorkspaceGridContext)
+  const { styles } = useComponentTheme<GridTheme>("GridTheme")
+
+  const workspaceCell = getWorkspaceCell(cells)
+  const quickActionCells = getWorkspaceQuickActionCells(cells)
+  const runtimeCells = getWorkspaceRuntimeCells(cells)
+
+  const packageJsonFacet = workspaceCell?.workspace.facets.packageJson
+
+  return (
+    <Box
+      width="100%"
+      borderColor={"gray"}
+      backgroundColor={row === rowNb ? "#0b1515" : undefined}
+    >
+      <Box width="3%">
+        <Text {...styles.text()}>{rowNb + 1}</Text>
+      </Box>
+      <Box width="17%">
+        <Text
+          {...styles.action()}
+          inverse={row === workspaceCell?.row && col === workspaceCell?.col}
+        >
+          {workspaceCell?.workspace.folder}
+        </Text>
+        {packageJsonFacet?.framework && (
+          <Text {...styles.text()} dimColor>
+            {" "}
+            ({packageJsonFacet?.framework})
+          </Text>
+        )}
+      </Box>
+      <Box width="10%">
+        <Text {...styles.text()} dimColor>
+          {workspaceCell?.workspace.type}
+        </Text>
+      </Box>
+      <Box width="20%">
+        <Text {...styles.text()} dimColor>
+          {workspaceCell?.workspace.path}
+        </Text>
+      </Box>
+      <Box width="20%" gap={2}>
+        {quickActionCells.map((actionCell, index) => (
+          <Box
+            key={`qa-${actionCell.col}-${actionCell.row}`}
+            flexDirection="row"
+            width={quickActionColSizes[index] ?? actionCell.action.name.length}
+          >
+            <Box>
+              <Text
+                {...styles.action()}
+                inverse={row === actionCell?.row && col === actionCell?.col}
+              >
+                {actionCell.action.name}
+              </Text>
+            </Box>
+          </Box>
+        ))}
+      </Box>
+
+      <Box width="30%" gap={1}>
+        {runtimeCells.map((runtimeCell, index) => (
+          <Box
+            key={`rt-${runtimeCell.col}-${runtimeCell.row}`}
+            flexDirection="row"
+          >
+            <Box>
+              <Text
+                {...styles.runtime({ status: runtimeCell.runState.status })}
+                inverse={row === runtimeCell?.row && col === runtimeCell?.col}
+              >
+                {runtimeCell.runState.name}
+                {Number.isInteger(runtimeCell.runState.port) &&
+                  runtimeCell.runState.port !== 0 &&
+                  `:${runtimeCell.runState.port}`}
+              </Text>
+            </Box>
+            {index < runtimeCells.length - 1 && (
+              <Box width={1} justifyContent="center" alignItems="center">
+                <Text {...styles.text()} dimColor>
+                  {" "}
+                </Text>
+              </Box>
+            )}
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  )
+}

package/src/components/layouts/Header/Header.tsx

@@ -0,0 +1,51 @@
+import { useComponentTheme } from "@inkjs/ui"
+import { Box, Text } from "ink"
+import { useContext, useEffect, useState } from "react"
+
+import { WorkspaceDiscoveryContext } from "../../../contexts/WorkspaceDiscoveryContext.js"
+import type { GridTheme } from "../../../theme/theme.js"
+import { getPackageVersion } from "../../../utils/fs/package-json.js"
+import { getRootWorkspace } from "../../../utils/workspace/workspace-helper.js"
+import { ProjectCommands } from "./ProjectCommands.js"
+import { WorkspaceCommands } from "./WorkspaceCommands.js"
+
+export function Header() {
+  const { projects, project } = useContext(WorkspaceDiscoveryContext)
+  const rootWorkspace = getRootWorkspace(projects)
+  const [version, setVersion] = useState<string>("")
+  const { styles } = useComponentTheme<GridTheme>("GridTheme")
+
+  useEffect(() => {
+    getPackageVersion().then(setVersion)
+  }, [])
+
+  return (
+    <Box
+      width="100%"
+      paddingX={1}
+      justifyContent="space-between"
+      borderStyle="single"
+      borderTop={false}
+      borderBottom={true}
+      borderLeft={false}
+      borderRight={false}
+      {...styles.border()}
+    >
+      <Text {...styles.title()}>
+        {rootWorkspace?.folder}
+        {project && project.folder !== rootWorkspace?.folder
+          ? ` - ${project.folder}`
+          : ""}
+      </Text>
+
+      <Box paddingX={1}>
+        {project ? <ProjectCommands /> : <WorkspaceCommands />}
+      </Box>
+      <Box paddingX={1}>
+        <Text {...styles.title()} inverse>
+          {` MonoTUI v${version} `}
+        </Text>
+      </Box>
+    </Box>
+  )
+}

package/src/components/layouts/Header/ProjectCommands.tsx

@@ -0,0 +1,17 @@
+import { useComponentTheme } from "@inkjs/ui"
+import { Box, Text } from "ink"
+
+import type { GridTheme } from "../../../theme/theme.js"
+
+export function ProjectCommands() {
+  const { styles } = useComponentTheme<GridTheme>("GridTheme")
+
+  return (
+    <Box gap={1}>
+      <Text {...styles.action()}>&lt;enter&gt;</Text>
+      <Text {...styles.text()}>Execute</Text>
+      <Text {...styles.action()}>&lt;esc&gt;</Text>
+      <Text {...styles.text()}>Quit</Text>
+    </Box>
+  )
+}

package/src/components/layouts/Header/WorkspaceCommands.tsx

@@ -0,0 +1,60 @@
+import { useComponentTheme } from "@inkjs/ui"
+import { Box, Text } from "ink"
+import { useContext } from "react"
+
+import { WorkspaceGridContext } from "../../../contexts/WorkspaceGridContext.js"
+import type { GridTheme } from "../../../theme/theme.js"
+import { getWorkspaceCellByPosition } from "../../../utils/workspace/workspace-grid.js"
+
+export function WorkspaceCommands() {
+  const { workspacesNavigationGrid, row, col } =
+    useContext(WorkspaceGridContext)
+  const { styles } = useComponentTheme<GridTheme>("GridTheme")
+
+  const selectedCell = getWorkspaceCellByPosition(
+    workspacesNavigationGrid,
+    row,
+    col,
+  )
+
+  return (
+    <>
+      {selectedCell && selectedCell.type === "workspace" && (
+        <Box gap={2}>
+          <Box gap={1}>
+            <Text {...styles.action()}>&lt;enter&gt;</Text>
+            <Text {...styles.text()}>Select</Text>
+          </Box>
+          <Box gap={1}>
+            <Text {...styles.action()}>&lt;esc&gt;</Text>
+            <Text {...styles.text()}>Quit</Text>
+          </Box>
+        </Box>
+      )}
+      {selectedCell && selectedCell.type === "quickAction" && (
+        <Box gap={2}>
+          <Box gap={1}>
+            <Text {...styles.action()}>&lt;enter&gt;</Text>
+            <Text {...styles.text()}>Execute</Text>
+          </Box>
+          <Box gap={1}>
+            <Text {...styles.action()}>&lt;esc&gt;</Text>
+            <Text {...styles.text()}>Quit</Text>
+          </Box>
+        </Box>
+      )}
+      {selectedCell && selectedCell.type === "runtime" && (
+        <Box gap={2}>
+          <Box gap={1}>
+            <Text {...styles.action()}>&lt;s&gt;</Text>
+            <Text {...styles.text()}>stop</Text>
+          </Box>
+          <Box gap={1}>
+            <Text {...styles.action()}>&lt;esc&gt;</Text>
+            <Text {...styles.text()}>Quit</Text>
+          </Box>
+        </Box>
+      )}
+    </>
+  )
+}

package/src/config/config.ts

@@ -0,0 +1,46 @@
+import { join } from "node:path"
+
+import type { Config } from "../types/config.js"
+import { DEFAULT_CONFIG } from "./defaults.js"
+
+let cachedConfig: Config | null = null
+
+export async function loadConfig(rootDir: string): Promise<Config> {
+  try {
+    const configPath = join(rootDir, "workspace-cli.mjs")
+    const configModule = await import(configPath)
+    const userConfig = configModule.default as Config
+
+    cachedConfig = {
+      ...DEFAULT_CONFIG,
+      ...userConfig,
+      discovery: {
+        ...DEFAULT_CONFIG.discovery,
+        ...userConfig.discovery,
+      },
+      execution: {
+        ...DEFAULT_CONFIG.execution,
+        ...userConfig.execution,
+      },
+      theme: DEFAULT_CONFIG.theme,
+    }
+  } catch {
+    // Config file doesn't exist, use defaults
+    cachedConfig = DEFAULT_CONFIG
+  }
+
+  return cachedConfig
+}
+
+/**
+ * Get the already-loaded config.
+ * Throws if called before loadConfig().
+ */
+export function getConfig(): Config {
+  if (!cachedConfig) {
+    throw new Error(
+      "Config not loaded yet. Call loadConfig() first at startup.",
+    )
+  }
+  return cachedConfig
+}

package/src/config/defaults.ts

@@ -0,0 +1,44 @@
+import type { Config } from "../types/config.js"
+
+/**
+ * Default configuration for workspace-cli
+ * This is the single source of truth for default values
+ * Used by:
+ * - loadConfig() as fallback when no user config exists
+ * - init command to generate config.json
+ */
+export const DEFAULT_CONFIG: Config = {
+  discovery: {
+    maxDepth: 4,
+    ignore: ["node_modules", ".git", "dist", "build"],
+    folders: {
+      app: ["apps"],
+      package: ["packages"],
+      infra: ["infra"],
+      contract: ["contracts"],
+    },
+    scripts: {
+      exclude: [],
+    },
+    env: {
+      files: [".env.local", ".env.development", ".env", ".env.example"],
+      portKeys: ["PORT", "APP_PORT", "VITE_PORT", "NEXT_PUBLIC_PORT"],
+    },
+    order: ["workspace", "app", "contract", "infra", "package"],
+    makefile: {
+      showDefault: false,
+    },
+  },
+  execution: {
+    useTmux: true,
+  },
+  quickActions: [],
+  logging: {
+    level: "info",
+    file: false,
+    logDir: "./logs",
+    prettyPrint: true,
+    truncateOnStart: true,
+  },
+  theme: "dark",
+}

package/src/contexts/PageNavigationContext.tsx

@@ -0,0 +1,39 @@
+import { createContext, type JSX, type ReactNode, useState } from "react"
+
+import { Page } from "../types/page.js"
+import type { CursorPosition } from "../types/workspace-grid"
+
+interface PageNavigationContextType {
+  currentPage: Page
+  workspacesGridPosition: CursorPosition
+  setPage: (page: Page) => void
+  setWorkspacesGridPosition: (position: CursorPosition) => void
+}
+
+export const PageNavigationContext = createContext<PageNavigationContextType>(
+  {} as PageNavigationContextType,
+)
+
+const Provider = PageNavigationContext as unknown as (props: {
+  value: PageNavigationContextType
+  children: ReactNode
+}) => JSX.Element
+
+export function PageNavigationProvider({ children }: { children: ReactNode }) {
+  const [currentPage, setPage] = useState<Page>(Page.Workspace)
+  const [workspacesGridPosition, setWorkspacesGridPosition] =
+    useState<CursorPosition>({ row: 0, col: 0 })
+
+  return (
+    <Provider
+      value={{
+        currentPage,
+        workspacesGridPosition,
+        setPage,
+        setWorkspacesGridPosition,
+      }}
+    >
+      {children}
+    </Provider>
+  )
+}