@membranehq/cli 0.1.1 → 0.1.3

package/src/components/AddMcpServerScreen.tsx

@@ -1,215 +0,0 @@
-import fs from 'node:fs'
-import path from 'node:path'
-
-import { useState, useEffect } from 'react'
-import { Box, Text, useApp, useInput } from 'ink'
-import SelectInput from 'ink-select-input'
-
-import { useCwd } from '../modules/config/cwd-context'
-
-const AGENTS = [
-  { label: 'Cursor', value: 'cursor' },
-  { label: 'Claude Code', value: 'claude' },
-  { label: 'Windsurf', value: 'windsurf' },
-]
-
-const MCP_URL = 'http://localhost:8001/mcp'
-
-function getSummary(agent: string): string {
-  switch (agent) {
-    case 'cursor':
-      return 'Add MCP server to .cursor/mcp.json'
-    case 'claude':
-      return 'Add MCP server to .claude/mcp.json'
-    case 'windsurf':
-      return 'Add MCP server to windsurf.config.json'
-    default:
-      return ''
-  }
-}
-
-function getConfigPath(agent: string, cwd: string): string {
-  switch (agent) {
-    case 'cursor':
-      return path.join(cwd, '.cursor', 'mcp.json')
-    case 'claude':
-      return path.join(cwd, '.claude', 'mcp.json')
-    case 'windsurf':
-      return path.join(cwd, 'windsurf.config.json')
-    default:
-      return ''
-  }
-}
-
-function getConfigPatch(agent: string): any {
-  switch (agent) {
-    case 'cursor':
-      return {
-        mcpServers: {
-          'integration-app-agent': {
-            url: MCP_URL,
-          },
-        },
-      }
-    case 'claude':
-      return {
-        mcpServers: {
-          'integration-app-agent': {
-            url: MCP_URL,
-          },
-        },
-      }
-    case 'windsurf':
-      return {
-        mcpServers: [
-          {
-            name: 'integration-app-agent',
-            url: MCP_URL,
-          },
-        ],
-      }
-    default:
-      return {}
-  }
-}
-
-function mergeConfig(agent: string, existing: any, patch: any): any {
-  if (agent === 'windsurf') {
-    // Overwrite or append to mcpServers array
-    const servers = Array.isArray(existing?.mcpServers) ? existing.mcpServers : []
-    const filtered = servers.filter((s: any) => s.name !== 'integration-app-agent')
-    return { ...existing, mcpServers: [...filtered, ...patch.mcpServers] }
-  }
-  // For Cursor/Claude, deep merge mcpServers
-  return {
-    ...existing,
-    mcpServers: {
-      ...existing?.mcpServers,
-      ...patch.mcpServers,
-    },
-  }
-}
-
-interface AddMcpServerScreenProps {
-  onExit?: () => void
-}
-
-export const AddMcpServerScreen = ({ onExit }: AddMcpServerScreenProps) => {
-  const { exit } = useApp()
-  const cwd = useCwd()
-  const [step, setStep] = useState<'choose' | 'summary' | 'confirm' | 'done'>('choose')
-  const [agent, setAgent] = useState<string>('')
-  const [result, setResult] = useState<string>('')
-  const [error, setError] = useState<string>('')
-
-  useInput((input, key) => {
-    if (step === 'summary') {
-      if (input === 'y') setStep('confirm')
-      if (input === 'n' || key.escape) {
-        onExit?.()
-        exit()
-      }
-      return
-    }
-    if (key.escape) {
-      onExit?.()
-      exit()
-    }
-    if (step === 'done' && (input === 'q' || key.return)) {
-      onExit?.()
-      exit()
-    }
-  })
-
-  useEffect(() => {
-    if (step === 'confirm') {
-      try {
-        const configPath = getConfigPath(agent, cwd)
-        const patch = getConfigPatch(agent)
-        let existing = {}
-        if (fs.existsSync(configPath)) {
-          try {
-            existing = JSON.parse(fs.readFileSync(configPath, 'utf8'))
-          } catch {
-            existing = {}
-          }
-        } else {
-          // Ensure directory exists for .cursor/.claude
-          const dir = path.dirname(configPath)
-          if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true })
-        }
-        const merged = mergeConfig(agent, existing, patch)
-        fs.writeFileSync(configPath, JSON.stringify(merged, null, 2))
-        setResult(`MCP server added to ${configPath}`)
-        setStep('done')
-      } catch (e: any) {
-        setError(e?.message || 'Unknown error')
-        setStep('done')
-      }
-    }
-  }, [step, agent, cwd])
-
-  const handleSelect = (item: { value: string }) => {
-    setAgent(item.value)
-    setStep('summary')
-  }
-
-  if (step === 'choose') {
-    return (
-      <Box flexDirection='column'>
-        <Text>Select your coding agent to add the MCP server:</Text>
-        <Box marginTop={1}>
-          <SelectInput items={AGENTS} onSelect={handleSelect} />
-        </Box>
-        <Box marginTop={1}>
-          <Text color='grey'>Press ESC to cancel</Text>
-        </Box>
-      </Box>
-    )
-  }
-
-  if (step === 'summary') {
-    return (
-      <Box flexDirection='column'>
-        <Text>{getSummary(agent)}</Text>
-        <Box marginTop={1}>
-          <Text>Proceed? (y/n)</Text>
-        </Box>
-        <Box marginTop={1}>
-          <Text color='grey'>Press ESC to cancel</Text>
-        </Box>
-        <Box>
-          <Text>
-            <Text color='green'>[y]</Text> Yes{'  '}
-            <Text color='red'>[n]</Text> No
-          </Text>
-        </Box>
-      </Box>
-    )
-  }
-
-  if (step === 'confirm') {
-    return (
-      <Box>
-        <Text>Adding MCP server...</Text>
-      </Box>
-    )
-  }
-
-  if (step === 'done') {
-    return (
-      <Box flexDirection='column'>
-        {result && <Text color='green'>{result}</Text>}
-        {error && <Text color='red'>Error: {error}</Text>}
-        <Box marginTop={1}>
-          <Text color='grey'>Press Q or Enter to exit</Text>
-        </Box>
-      </Box>
-    )
-  }
-
-  // fallback
-  return null
-}
-
-// To use this screen, render <AddMcpServerScreen /> from your main app or a menu.

package/src/components/AgentStatus.tsx

@@ -1,15 +0,0 @@
-import { Box, Text } from 'ink'
-
-export const AgentStatus = () => {
-  const width = Math.min(100, process.stdout.columns || 100)
-  return (
-    <Box flexDirection='column' paddingX={1} borderStyle='round' borderTop width={width}>
-      {/* Header row with robot emoji and status */}
-      <Box marginTop={-1} marginBottom={1}>
-        <Text bold>
-          🤖 Membrane Code Agent — <Text color='green'>active</Text>
-        </Text>
-      </Box>
-    </Box>
-  )
-}

package/src/components/Main.tsx

@@ -1,64 +0,0 @@
-import { exec } from 'node:child_process'
-
-import React, { useState } from 'react'
-import { Box, Text, useInput } from 'ink'
-
-import { AgentStatus } from './AgentStatus'
-import { SelectWorkspace } from './SelectWorkspace'
-import { Setup } from './Setup'
-import { WorkspaceSync } from './WorkspaceStatus'
-import { getWorkspaceId } from '../modules/api/workspace-api-client'
-import { useCwd } from '../modules/config/cwd-context'
-import { useStatus } from '../modules/status/useStatus'
-
-export const Main = () => {
-  const { isSetupComplete, workspaceKey, config } = useStatus()
-  const [showWorkspaceSelection, setShowWorkspaceSelection] = useState(false)
-  const [showSetup, setShowSetup] = useState(false)
-  const cwd = useCwd()
-
-  useInput((input) => {
-    // Only process hotkeys if main screen is visible
-    if (!showWorkspaceSelection && !showSetup) {
-      if (input === 'w') setShowWorkspaceSelection(true)
-      if (input === 'o' && workspaceKey && config?.workspaceSecret) {
-        // Fetch workspace ID and open console asynchronously
-        void (async () => {
-          try {
-            const workspaceId = await getWorkspaceId(cwd)
-            const url = `https://console.integration.app/w/${workspaceId}`
-            // Open URL in default browser
-            const command = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' : 'xdg-open'
-            exec(`${command} "${url}"`)
-          } catch (error) {
-            console.error('Failed to open workspace:', error)
-          }
-        })()
-      }
-      if (input === 's') {
-        setShowSetup(true)
-      }
-    }
-  })
-
-  if (showWorkspaceSelection) {
-    return <SelectWorkspace onExit={() => setShowWorkspaceSelection(false)} />
-  }
-
-  if (showSetup || !isSetupComplete) {
-    // Show only Setup during initial setup or re-setup
-    return <Setup key={Date.now()} onComplete={() => setShowSetup(false)} />
-  }
-
-  return (
-    <Box flexDirection='column'>
-      <Box flexGrow={1}>
-        <AgentStatus />
-      </Box>
-      <WorkspaceSync />
-      <Box paddingLeft={2}>
-        <Text color='grey'>[s: (re-)setup]</Text>
-      </Box>
-    </Box>
-  )
-}

package/src/components/OverviewSection.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import { Box } from 'ink'
-
-import type { BoxProps } from 'ink'
-
-type OverviewSectionProps = {
-  children: React.ReactNode
-} & BoxProps
-
-export const OverviewSection = ({ children, ...props }: OverviewSectionProps) => {
-  return (
-    <Box
-      borderStyle='round'
-      borderColor='lime'
-      paddingX={2}
-      paddingY={1}
-      alignSelf='flex-start'
-      flexDirection='column'
-      {...props}
-    >
-      {children}
-    </Box>
-  )
-}

package/src/components/PersonalAccessTokenInput.tsx

@@ -1,56 +0,0 @@
-import React, { useState } from 'react'
-import { Box, Text } from 'ink'
-import Spinner from 'ink-spinner'
-import InkTextInput from 'ink-text-input'
-
-interface PersonalAccessTokenInputProps {
-  currentPat?: string
-  onSubmit: (pat: string) => Promise<void>
-}
-
-export const PersonalAccessTokenInput = ({ currentPat, onSubmit }: PersonalAccessTokenInputProps) => {
-  const [patInput, setPatInput] = useState('')
-  const [patLoading, setPatLoading] = useState(false)
-  const [patError, setPatError] = useState<string | null>(null)
-
-  const handleSubmit = async (input: string) => {
-    setPatError(null)
-    setPatLoading(true)
-    try {
-      await onSubmit(input)
-      setPatInput('')
-    } catch (err: any) {
-      setPatError('Invalid token. Please try again.')
-    } finally {
-      setPatLoading(false)
-    }
-  }
-
-  return (
-    <Box flexDirection='column' borderStyle='round' borderTop width={70} paddingX={1}>
-      <Box marginTop={-1} marginBottom={1}>
-        <Text bold>🔑 Enter your Personal Access Token</Text>
-      </Box>
-      <Text>Please provide your Personal Access Token. You can find it here:</Text>
-      <Box marginTop={1} marginBottom={1}>
-        <Text color='yellow'>https://console.integration.app/w/0/manage-account/api-token</Text>
-      </Box>
-      {currentPat && <Text dimColor>Press Enter to keep your current token or type a new one.</Text>}
-      <InkTextInput
-        mask='*'
-        placeholder={`${currentPat ? '******' : 'Enter your token here...'}`}
-        value={patInput}
-        onChange={setPatInput}
-        onSubmit={handleSubmit}
-      />
-      {patLoading && (
-        <Box marginTop={1}>
-          <Text>
-            <Spinner type='dots' /> Validating token...
-          </Text>
-        </Box>
-      )}
-      {patError && <Text color='red'>{patError}</Text>}
-    </Box>
-  )
-}

package/src/components/RecentChanges.tsx

@@ -1,65 +0,0 @@
-import { Box, Text } from 'ink'
-
-import { useFileWatcher } from '../contexts/FileWatcherContext'
-import { FileChangeEventType } from '../modules/file-watcher/types'
-
-const getSymbolAndColor = (type: FileChangeEventType) => {
-  switch (type) {
-    case 'added':
-      return { symbol: '+', color: 'green' as const }
-    case 'changed':
-      return { symbol: '*', color: 'yellow' as const }
-    case 'deleted':
-      return { symbol: '-', color: 'red' as const }
-    default:
-      return { symbol: '?', color: 'gray' as const }
-  }
-}
-
-const getActionText = (type: FileChangeEventType) => {
-  switch (type) {
-    case 'added':
-      return 'ADD'
-    case 'changed':
-      return 'UPD'
-    case 'deleted':
-      return 'DEL'
-    default:
-      return 'UNKNOWN'
-  }
-}
-
-export function RecentChanges() {
-  const { recentChanges } = useFileWatcher()
-
-  const sortedRecentChanges = [...recentChanges].sort((a, b) => a.timestamp - b.timestamp)
-
-  if (sortedRecentChanges.length === 0) {
-    return (
-      <Box paddingTop={1}>
-        <Text color='gray'>No recent changes</Text>
-      </Box>
-    )
-  }
-
-  return (
-    <Box flexDirection='column' paddingTop={1}>
-      <Text color='gray'>Recent Changes:</Text>
-      {sortedRecentChanges.map((change, _) => {
-        const { symbol, color } = getSymbolAndColor(change.type)
-        const actionText = getActionText(change.type)
-
-        return (
-          <Box key={`${change.filePath}-${change.timestamp}`} marginLeft={1}>
-            <Text color={color}>
-              {symbol} {actionText}:{' '}
-            </Text>
-            <Text>
-              [{change.elementType}] <Text bold>{change.elementKey}</Text> ({change.relativePath})
-            </Text>
-          </Box>
-        )
-      })}
-    </Box>
-  )
-}

package/src/components/SelectWorkspace.tsx

@@ -1,112 +0,0 @@
-import React, { useState } from 'react'
-import { Select, TextInput } from '@inkjs/ui'
-import { Box, Text, useInput } from 'ink'
-import Spinner from 'ink-spinner'
-import useSWRImmutable from 'swr/immutable'
-
-import { useProjectConfig } from '../modules/config/project'
-
-import type { OrgWorkspace } from '@integration-app/sdk'
-
-interface SelectWorkspaceProps {
-  onExit?: () => void
-  showEscOption?: boolean
-}
-
-export const SelectWorkspace = ({ onExit, showEscOption = true }: SelectWorkspaceProps) => {
-  const [searchQuery, setSearchQuery] = useState('')
-  const { data, error, isLoading: isLoadingWorkspaces } = useSWRImmutable('/account')
-  const { updateConfig, isLoading: isLoadingConfig } = useProjectConfig()
-
-  const workspaces = (data as any)?.workspaces as OrgWorkspace[]
-  const isLoading = isLoadingWorkspaces || isLoadingConfig
-
-  useInput((input, key) => {
-    if (key.escape) {
-      onExit?.()
-    }
-  })
-
-  if (isLoading) {
-    return (
-      <Box>
-        <Spinner />
-        <Text> Fetching workspaces...</Text>
-      </Box>
-    )
-  }
-
-  if (error) {
-    return (
-      <Box flexDirection='column'>
-        <Text color='red'>Error: {error.message}</Text>
-        <Box marginTop={1}>
-          <Text color='grey'>Press ESC to go back</Text>
-        </Box>
-      </Box>
-    )
-  }
-
-  const filteredWorkspaces = workspaces?.filter((ws) => ws.name.toLowerCase().includes(searchQuery.toLowerCase())) ?? []
-
-  const items = filteredWorkspaces.map((ws) => ({
-    label: ws.name,
-    value: ws.id,
-  }))
-
-  const showingWorkspaces = items.length
-  const totalWorkspaces = workspaces?.length ?? 0
-
-  const handleSelect = async (value: string) => {
-    const selectedWorkspace = filteredWorkspaces.find((ws) => ws.id === value)
-    if (!selectedWorkspace) {
-      return
-    }
-
-    const { key, secret } = selectedWorkspace as any
-    if (!key || !secret) {
-      // TODO: handle error
-      return
-    }
-
-    await updateConfig({
-      workspaceKey: key,
-      workspaceSecret: secret,
-    })
-
-    // Close the selection screen after successful workspace change
-    onExit?.()
-  }
-
-  return (
-    <Box flexDirection='column' borderStyle='round' borderTop width={70} paddingX={1}>
-      <Box marginTop={-1}>
-        <Text bold>📁 Select your workspace</Text>
-      </Box>
-      <Box marginTop={1}>
-        <Text>Search: </Text>
-        <TextInput placeholder='Enter a search query...' onChange={setSearchQuery} />
-      </Box>
-      {totalWorkspaces > 5 && (
-        <Text>
-          Showing {showingWorkspaces} of {totalWorkspaces} workspaces.
-        </Text>
-      )}
-      <Box marginTop={1}>
-        <Select
-          options={items}
-          onChange={(value) => {
-            if (value) {
-              void handleSelect(value)
-            }
-          }}
-        />
-      </Box>
-      {showEscOption && (
-        <Box marginTop={1}>
-          <Text color='grey'>Press ESC to go back</Text>
-        </Box>
-      )}
-    </Box>
-  )
-}

package/src/components/Setup.tsx

@@ -1,121 +0,0 @@
-import React, { useState } from 'react'
-import { Box, Text, useInput } from 'ink'
-import Spinner from 'ink-spinner'
-
-import { PersonalAccessTokenInput } from './PersonalAccessTokenInput'
-import { SelectWorkspace } from './SelectWorkspace'
-import { AccountApiClient } from '../modules/api/account-api-client'
-import { setPat, getPat } from '../modules/config/system'
-import { Step, STEP_LABELS } from '../modules/setup/steps'
-import { useSetup } from '../modules/setup/useSetup'
-
-type StepStatus = 'pending' | 'current' | 'done'
-
-const StepDisplay = ({ status, label }: { status: StepStatus; label: string }) => {
-  return (
-    <Box>
-      <Box width={2}>
-        {status === 'current' && <Spinner type='dots' />}
-        {status === 'done' && <Text>✅</Text>}
-      </Box>
-      <Text dimColor={status !== 'current'}>{label}</Text>
-    </Box>
-  )
-}
-
-const ALL_STEPS = [Step.Authenticate, Step.ConnectWorkspace]
-
-interface SetupProps {
-  onComplete?: () => void
-}
-
-export const Setup = ({ onComplete }: SetupProps) => {
-  const [completed, setCompleted] = useState(false)
-  const [currentStepIndex, setCurrentStepIndex] = useState(0)
-  const [patLoading, setPatLoading] = useState(false)
-  const [patError, setPatError] = useState<string | null>(null)
-  const [patInput, setPatInput] = useState('')
-
-  const { isSetupComplete } = useSetup()
-
-  const currentStep = ALL_STEPS[currentStepIndex]
-  const stepIndex = currentStepIndex + 1
-  const totalSteps = ALL_STEPS.length
-
-  const steps = ALL_STEPS.map((step, idx) => {
-    let status: StepStatus = 'pending'
-    if (idx < currentStepIndex) {
-      status = 'done'
-    } else if (idx === currentStepIndex) {
-      status = 'current'
-    }
-    return { id: step, label: STEP_LABELS[step], status }
-  })
-
-  const currentPat = getPat()
-  const patMask = currentPat ? '*'.repeat(currentPat.length) : ''
-
-  const handlePatSubmit = async (input: string) => {
-    setPatError(null)
-    setPatLoading(true)
-    const patToTest = currentPat && input === '' ? currentPat : input
-    const testClient = new AccountApiClient()
-    try {
-      await testClient.request('/account', { headers: { Authorization: `Bearer ${patToTest}` } })
-      setPat(patToTest)
-      setCurrentStepIndex((idx) => idx + 1)
-      setPatInput('')
-    } catch (err: any) {
-      console.log(err)
-      setPatError('Invalid token. Please try again.')
-    } finally {
-      setPatLoading(false)
-    }
-  }
-
-  const handleWorkspaceSelected = () => {
-    setCompleted(true)
-    if (onComplete) onComplete()
-  }
-
-  useInput((input, key) => {
-    if (isSetupComplete && key.escape && onComplete) {
-      onComplete()
-    }
-  })
-
-  return completed ? (
-    <Box>
-      <Text>✅ Setup complete. You are ready to go!</Text>
-    </Box>
-  ) : (
-    <Box flexDirection='column' alignSelf='flex-start' gap={1}>
-      {/* Setup block header */}
-      <Box flexDirection='column' paddingX={1} borderStyle='round' borderTop width={70}>
-        <Box marginTop={-1} marginBottom={1}>
-          <Text bold>
-            🛠️ Setup —{' '}
-            <Text color='cyan'>
-              Step {stepIndex} of {totalSteps}
-            </Text>
-            {isSetupComplete && <Text color='grey'> [esc: go back]</Text>}
-          </Text>
-        </Box>
-        <Box flexDirection='column' paddingLeft={2}>
-          {steps.map((step) => (
-            <StepDisplay key={step.id} status={step.status} label={step.label} />
-          ))}
-        </Box>
-      </Box>
-
-      {/* Step blocks with header */}
-      {currentStep === Step.Authenticate && (
-        <PersonalAccessTokenInput currentPat={currentPat} onSubmit={handlePatSubmit} />
-      )}
-
-      {currentStep === Step.ConnectWorkspace && (
-        <SelectWorkspace onExit={handleWorkspaceSelected} showEscOption={false} />
-      )}
-    </Box>
-  )
-}