106 lines
3.4 KiB
TypeScript
106 lines
3.4 KiB
TypeScript
import { Prompt, type PromptRef } from "@tui/component/prompt"
|
|
import { createMemo, Match, onMount, Show, Switch } from "solid-js"
|
|
import { useTheme } from "@tui/context/theme"
|
|
import { Logo } from "../component/logo"
|
|
import { Locale } from "@/util/locale"
|
|
import { useSync } from "../context/sync"
|
|
import { Toast } from "../ui/toast"
|
|
import { useArgs } from "../context/args"
|
|
import { useDirectory } from "../context/directory"
|
|
import { useRoute, useRouteData } from "@tui/context/route"
|
|
import { usePromptRef } from "../context/prompt"
|
|
import { Installation } from "@/installation"
|
|
|
|
// TODO: what is the best way to do this?
|
|
let once = false
|
|
|
|
export function Home() {
|
|
const sync = useSync()
|
|
const { theme } = useTheme()
|
|
const route = useRouteData("home")
|
|
const promptRef = usePromptRef()
|
|
const mcp = createMemo(() => Object.keys(sync.data.mcp).length > 0)
|
|
const mcpError = createMemo(() => {
|
|
return Object.values(sync.data.mcp).some((x) => x.status === "failed")
|
|
})
|
|
|
|
const connectedMcpCount = createMemo(() => {
|
|
return Object.values(sync.data.mcp).filter((x) => x.status === "connected").length
|
|
})
|
|
|
|
const Hint = (
|
|
<Show when={connectedMcpCount() > 0}>
|
|
<box flexShrink={0} flexDirection="row" gap={1}>
|
|
<text fg={theme.text}>
|
|
<Switch>
|
|
<Match when={mcpError()}>
|
|
<span style={{ fg: theme.error }}>•</span> mcp errors{" "}
|
|
<span style={{ fg: theme.textMuted }}>ctrl+x s</span>
|
|
</Match>
|
|
<Match when={true}>
|
|
<span style={{ fg: theme.success }}>•</span>{" "}
|
|
{Locale.pluralize(connectedMcpCount(), "{} mcp server", "{} mcp servers")}
|
|
</Match>
|
|
</Switch>
|
|
</text>
|
|
</box>
|
|
</Show>
|
|
)
|
|
|
|
let prompt: PromptRef
|
|
const args = useArgs()
|
|
onMount(() => {
|
|
if (once) return
|
|
if (route.initialPrompt) {
|
|
prompt.set(route.initialPrompt)
|
|
once = true
|
|
} else if (args.prompt) {
|
|
prompt.set({ input: args.prompt, parts: [] })
|
|
once = true
|
|
prompt.submit()
|
|
}
|
|
})
|
|
const directory = useDirectory()
|
|
|
|
return (
|
|
<>
|
|
<box flexGrow={1} justifyContent="center" alignItems="center" paddingLeft={2} paddingRight={2} gap={1}>
|
|
<Logo />
|
|
<box width="100%" maxWidth={75} zIndex={1000} paddingTop={1}>
|
|
<Prompt
|
|
ref={(r) => {
|
|
prompt = r
|
|
promptRef.set(r)
|
|
}}
|
|
hint={Hint}
|
|
/>
|
|
</box>
|
|
<Toast />
|
|
</box>
|
|
<box paddingTop={1} paddingBottom={1} paddingLeft={2} paddingRight={2} flexDirection="row" flexShrink={0} gap={2}>
|
|
<text fg={theme.textMuted}>{directory()}</text>
|
|
<box gap={1} flexDirection="row" flexShrink={0}>
|
|
<Show when={mcp()}>
|
|
<text fg={theme.text}>
|
|
<Switch>
|
|
<Match when={mcpError()}>
|
|
<span style={{ fg: theme.error }}>⊙ </span>
|
|
</Match>
|
|
<Match when={true}>
|
|
<span style={{ fg: theme.success }}>⊙ </span>
|
|
</Match>
|
|
</Switch>
|
|
{connectedMcpCount()} MCP
|
|
</text>
|
|
<text fg={theme.textMuted}>/status</text>
|
|
</Show>
|
|
</box>
|
|
<box flexGrow={1} />
|
|
<box flexShrink={0}>
|
|
<text fg={theme.textMuted}>{Installation.VERSION}</text>
|
|
</box>
|
|
</box>
|
|
</>
|
|
)
|
|
}
|