@nikcli-ai/app 0.0.6

package/src/index.css

@@ -0,0 +1 @@
+@import "@nikcli-ai/ui/styles/tailwind";

package/src/index.ts

@@ -0,0 +1,3 @@
+export { PlatformProvider, type Platform } from "./context/platform"
+export { AppBaseProviders, AppInterface } from "./app"
+export { useCommand } from "./context/command"

package/src/pages/directory-layout.tsx

@@ -0,0 +1,71 @@
+import { createEffect, createMemo, Show, type ParentProps } from "solid-js"
+import { useNavigate, useParams } from "@solidjs/router"
+import { SDKProvider, useSDK } from "@/context/sdk"
+import { SyncProvider, useSync } from "@/context/sync"
+import { LocalProvider } from "@/context/local"
+
+import { DataProvider } from "@nikcli-ai/ui/context"
+import { iife } from "@nikcli-ai/util/iife"
+import type { QuestionAnswer } from "@nikcli-ai/sdk/v2"
+import { decode64 } from "@/utils/base64"
+import { showToast } from "@nikcli-ai/ui/toast"
+import { useLanguage } from "@/context/language"
+
+export default function Layout(props: ParentProps) {
+  const params = useParams()
+  const navigate = useNavigate()
+  const language = useLanguage()
+  const directory = createMemo(() => {
+    return decode64(params.dir) ?? ""
+  })
+
+  createEffect(() => {
+    if (!params.dir) return
+    if (directory()) return
+    showToast({
+      variant: "error",
+      title: language.t("common.requestFailed"),
+      description: language.t("directory.error.invalidUrl"),
+    })
+    navigate("/")
+  })
+  return (
+    <Show when={directory()}>
+      <SDKProvider directory={directory}>
+        <SyncProvider>
+          {iife(() => {
+            const sync = useSync()
+            const sdk = useSDK()
+            const respond = (input: {
+              sessionID: string
+              permissionID: string
+              response: "once" | "always" | "reject"
+            }) => sdk.client.permission.respond(input)
+
+            const replyToQuestion = (input: { requestID: string; answers: QuestionAnswer[] }) =>
+              sdk.client.question.reply(input)
+
+            const rejectQuestion = (input: { requestID: string }) => sdk.client.question.reject(input)
+
+            const navigateToSession = (sessionID: string) => {
+              navigate(`/${params.dir}/session/${sessionID}`)
+            }
+
+            return (
+              <DataProvider
+                data={sync.data}
+                directory={directory()}
+                onPermissionRespond={respond}
+                onQuestionReply={replyToQuestion}
+                onQuestionReject={rejectQuestion}
+                onNavigateToSession={navigateToSession}
+              >
+                <LocalProvider>{props.children}</LocalProvider>
+              </DataProvider>
+            )
+          })}
+        </SyncProvider>
+      </SDKProvider>
+    </Show>
+  )
+}

package/src/pages/error.tsx

@@ -0,0 +1,290 @@
+import { TextField } from "@nikcli-ai/ui/text-field"
+import { Logo } from "@nikcli-ai/ui/logo"
+import { Button } from "@nikcli-ai/ui/button"
+import { Component, Show } from "solid-js"
+import { createStore } from "solid-js/store"
+import { usePlatform } from "@/context/platform"
+import { useLanguage } from "@/context/language"
+import { Icon } from "@nikcli-ai/ui/icon"
+
+export type InitError = {
+  name: string
+  data: Record<string, unknown>
+}
+
+type Translator = ReturnType<typeof useLanguage>["t"]
+
+function isInitError(error: unknown): error is InitError {
+  return (
+    typeof error === "object" &&
+    error !== null &&
+    "name" in error &&
+    "data" in error &&
+    typeof (error as InitError).data === "object"
+  )
+}
+
+function safeJson(value: unknown): string {
+  const seen = new WeakSet<object>()
+  const json = JSON.stringify(
+    value,
+    (_key, val) => {
+      if (typeof val === "bigint") return val.toString()
+      if (typeof val === "object" && val) {
+        if (seen.has(val)) return "[Circular]"
+        seen.add(val)
+      }
+      return val
+    },
+    2,
+  )
+  return json ?? String(value)
+}
+
+function formatInitError(error: InitError, t: Translator): string {
+  const data = error.data
+  switch (error.name) {
+    case "MCPFailed": {
+      const name = typeof data.name === "string" ? data.name : ""
+      return t("error.chain.mcpFailed", { name })
+    }
+    case "ProviderAuthError": {
+      const providerID = typeof data.providerID === "string" ? data.providerID : "unknown"
+      const message = typeof data.message === "string" ? data.message : safeJson(data.message)
+      return t("error.chain.providerAuthFailed", { provider: providerID, message })
+    }
+    case "APIError": {
+      const message = typeof data.message === "string" ? data.message : t("error.chain.apiError")
+      const lines: string[] = [message]
+
+      if (typeof data.statusCode === "number") {
+        lines.push(t("error.chain.status", { status: data.statusCode }))
+      }
+
+      if (typeof data.isRetryable === "boolean") {
+        lines.push(t("error.chain.retryable", { retryable: data.isRetryable }))
+      }
+
+      if (typeof data.responseBody === "string" && data.responseBody) {
+        lines.push(t("error.chain.responseBody", { body: data.responseBody }))
+      }
+
+      return lines.join("\n")
+    }
+    case "ProviderModelNotFoundError": {
+      const { providerID, modelID, suggestions } = data as {
+        providerID: string
+        modelID: string
+        suggestions?: string[]
+      }
+
+      const suggestionsLine =
+        Array.isArray(suggestions) && suggestions.length
+          ? [t("error.chain.didYouMean", { suggestions: suggestions.join(", ") })]
+          : []
+
+      return [
+        t("error.chain.modelNotFound", { provider: providerID, model: modelID }),
+        ...suggestionsLine,
+        t("error.chain.checkConfig"),
+      ].join("\n")
+    }
+    case "ProviderInitError": {
+      const providerID = typeof data.providerID === "string" ? data.providerID : "unknown"
+      return t("error.chain.providerInitFailed", { provider: providerID })
+    }
+    case "ConfigJsonError": {
+      const path = typeof data.path === "string" ? data.path : safeJson(data.path)
+      const message = typeof data.message === "string" ? data.message : ""
+      if (message) return t("error.chain.configJsonInvalidWithMessage", { path, message })
+      return t("error.chain.configJsonInvalid", { path })
+    }
+    case "ConfigDirectoryTypoError": {
+      const path = typeof data.path === "string" ? data.path : safeJson(data.path)
+      const dir = typeof data.dir === "string" ? data.dir : safeJson(data.dir)
+      const suggestion = typeof data.suggestion === "string" ? data.suggestion : safeJson(data.suggestion)
+      return t("error.chain.configDirectoryTypo", { dir, path, suggestion })
+    }
+    case "ConfigFrontmatterError": {
+      const path = typeof data.path === "string" ? data.path : safeJson(data.path)
+      const message = typeof data.message === "string" ? data.message : safeJson(data.message)
+      return t("error.chain.configFrontmatterError", { path, message })
+    }
+    case "ConfigInvalidError": {
+      const issues = Array.isArray(data.issues)
+        ? data.issues.map(
+            (issue: { message: string; path: string[] }) => "↳ " + issue.message + " " + issue.path.join("."),
+          )
+        : []
+      const message = typeof data.message === "string" ? data.message : ""
+      const path = typeof data.path === "string" ? data.path : safeJson(data.path)
+
+      const line = message
+        ? t("error.chain.configInvalidWithMessage", { path, message })
+        : t("error.chain.configInvalid", { path })
+
+      return [line, ...issues].join("\n")
+    }
+    case "UnknownError":
+      return typeof data.message === "string" ? data.message : safeJson(data)
+    default:
+      if (typeof data.message === "string") return data.message
+      return safeJson(data)
+  }
+}
+
+function formatErrorChain(error: unknown, t: Translator, depth = 0, parentMessage?: string): string {
+  if (!error) return t("error.chain.unknown")
+
+  if (isInitError(error)) {
+    const message = formatInitError(error, t)
+    if (depth > 0 && parentMessage === message) return ""
+    const indent = depth > 0 ? `\n${"─".repeat(40)}\n${t("error.chain.causedBy")}\n` : ""
+    return indent + `${error.name}\n${message}`
+  }
+
+  if (error instanceof Error) {
+    const isDuplicate = depth > 0 && parentMessage === error.message
+    const parts: string[] = []
+    const indent = depth > 0 ? `\n${"─".repeat(40)}\n${t("error.chain.causedBy")}\n` : ""
+
+    const header = `${error.name}${error.message ? `: ${error.message}` : ""}`
+    const stack = error.stack?.trim()
+
+    if (stack) {
+      const startsWithHeader = stack.startsWith(header)
+
+      if (isDuplicate && startsWithHeader) {
+        const trace = stack.split("\n").slice(1).join("\n").trim()
+        if (trace) {
+          parts.push(indent + trace)
+        }
+      }
+
+      if (isDuplicate && !startsWithHeader) {
+        parts.push(indent + stack)
+      }
+
+      if (!isDuplicate && startsWithHeader) {
+        parts.push(indent + stack)
+      }
+
+      if (!isDuplicate && !startsWithHeader) {
+        parts.push(indent + `${header}\n${stack}`)
+      }
+    }
+
+    if (!stack && !isDuplicate) {
+      parts.push(indent + header)
+    }
+
+    if (error.cause) {
+      const causeResult = formatErrorChain(error.cause, t, depth + 1, error.message)
+      if (causeResult) {
+        parts.push(causeResult)
+      }
+    }
+
+    return parts.join("\n\n")
+  }
+
+  if (typeof error === "string") {
+    if (depth > 0 && parentMessage === error) return ""
+    const indent = depth > 0 ? `\n${"─".repeat(40)}\n${t("error.chain.causedBy")}\n` : ""
+    return indent + error
+  }
+
+  const indent = depth > 0 ? `\n${"─".repeat(40)}\n${t("error.chain.causedBy")}\n` : ""
+  return indent + safeJson(error)
+}
+
+function formatError(error: unknown, t: Translator): string {
+  return formatErrorChain(error, t, 0)
+}
+
+interface ErrorPageProps {
+  error: unknown
+}
+
+export const ErrorPage: Component<ErrorPageProps> = (props) => {
+  const platform = usePlatform()
+  const language = useLanguage()
+  const [store, setStore] = createStore({
+    checking: false,
+    version: undefined as string | undefined,
+  })
+
+  async function checkForUpdates() {
+    if (!platform.checkUpdate) return
+    setStore("checking", true)
+    const result = await platform.checkUpdate()
+    setStore("checking", false)
+    if (result.updateAvailable && result.version) setStore("version", result.version)
+  }
+
+  async function installUpdate() {
+    if (!platform.update || !platform.restart) return
+    await platform.update()
+    await platform.restart()
+  }
+
+  return (
+    <div class="relative flex-1 h-screen w-screen min-h-0 flex flex-col items-center justify-center bg-background-base font-sans">
+      <div class="w-2/3 max-w-3xl flex flex-col items-center justify-center gap-8">
+        <Logo class="w-58.5 opacity-12 shrink-0" />
+        <div class="flex flex-col items-center gap-2 text-center">
+          <h1 class="text-lg font-medium text-text-strong">{language.t("error.page.title")}</h1>
+          <p class="text-sm text-text-weak">{language.t("error.page.description")}</p>
+        </div>
+        <TextField
+          value={formatError(props.error, language.t)}
+          readOnly
+          copyable
+          multiline
+          class="max-h-96 w-full font-mono text-xs no-scrollbar"
+          label={language.t("error.page.details.label")}
+          hideLabel
+        />
+        <div class="flex items-center gap-3">
+          <Button size="large" onClick={platform.restart}>
+            {language.t("error.page.action.restart")}
+          </Button>
+          <Show when={platform.checkUpdate}>
+            <Show
+              when={store.version}
+              fallback={
+                <Button size="large" variant="ghost" onClick={checkForUpdates} disabled={store.checking}>
+                  {store.checking
+                    ? language.t("error.page.action.checking")
+                    : language.t("error.page.action.checkUpdates")}
+                </Button>
+              }
+            >
+              <Button size="large" onClick={installUpdate}>
+                {language.t("error.page.action.updateTo", { version: store.version ?? "" })}
+              </Button>
+            </Show>
+          </Show>
+        </div>
+        <div class="flex flex-col items-center gap-2">
+          <div class="flex items-center justify-center gap-1">
+            {language.t("error.page.report.prefix")}
+            <button
+              type="button"
+              class="flex items-center text-text-interactive-base gap-1"
+              onClick={() => platform.openLink("https://nikcli.ai/desktop-feedback")}
+            >
+              <div>{language.t("error.page.report.discord")}</div>
+              <Icon name="discord" class="text-text-interactive-base" />
+            </button>
+          </div>
+          <Show when={platform.version}>
+            {(version) => (
+              <p class="text-xs text-text-weak">{language.t("error.page.version", { version: version() })}</p>
+            )}
+          </Show>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/pages/home.tsx

@@ -0,0 +1,126 @@
+import { createMemo, For, Match, Switch } from "solid-js"
+import { Button } from "@nikcli-ai/ui/button"
+import { Logo } from "@nikcli-ai/ui/logo"
+import { useLayout } from "@/context/layout"
+import { useNavigate } from "@solidjs/router"
+import { base64Encode } from "@nikcli-ai/util/encode"
+import { Icon } from "@nikcli-ai/ui/icon"
+import { usePlatform } from "@/context/platform"
+import { DateTime } from "luxon"
+import { useDialog } from "@nikcli-ai/ui/context/dialog"
+import { DialogSelectDirectory } from "@/components/dialog-select-directory"
+import { DialogSelectServer } from "@/components/dialog-select-server"
+import { useServer } from "@/context/server"
+import { useGlobalSync } from "@/context/global-sync"
+import { useLanguage } from "@/context/language"
+
+export default function Home() {
+  const sync = useGlobalSync()
+  const layout = useLayout()
+  const platform = usePlatform()
+  const dialog = useDialog()
+  const navigate = useNavigate()
+  const server = useServer()
+  const language = useLanguage()
+  const homedir = createMemo(() => sync.data.path.home)
+  const recent = createMemo(() => {
+    return sync.data.project
+      .toSorted((a, b) => (b.time.updated ?? b.time.created) - (a.time.updated ?? a.time.created))
+      .slice(0, 5)
+  })
+
+  function openProject(directory: string) {
+    layout.projects.open(directory)
+    server.projects.touch(directory)
+    navigate(`/${base64Encode(directory)}`)
+  }
+
+  async function chooseProject() {
+    function resolve(result: string | string[] | null) {
+      if (Array.isArray(result)) {
+        for (const directory of result) {
+          openProject(directory)
+        }
+      } else if (result) {
+        openProject(result)
+      }
+    }
+
+    if (platform.openDirectoryPickerDialog && server.isLocal()) {
+      const result = await platform.openDirectoryPickerDialog?.({
+        title: language.t("command.project.open"),
+        multiple: true,
+      })
+      resolve(result)
+    } else {
+      dialog.show(
+        () => <DialogSelectDirectory multiple={true} onSelect={resolve} />,
+        () => resolve(null),
+      )
+    }
+  }
+
+  return (
+    <div class="mx-auto mt-55 w-full md:w-auto px-4">
+      <Logo class="md:w-xl opacity-12" />
+      <Button
+        size="large"
+        variant="ghost"
+        class="mt-4 mx-auto text-14-regular text-text-weak"
+        onClick={() => dialog.show(() => <DialogSelectServer />)}
+      >
+        <div
+          classList={{
+            "size-2 rounded-full": true,
+            "bg-icon-success-base": server.healthy() === true,
+            "bg-icon-critical-base": server.healthy() === false,
+            "bg-border-weak-base": server.healthy() === undefined,
+          }}
+        />
+        {server.name}
+      </Button>
+      <Switch>
+        <Match when={sync.data.project.length > 0}>
+          <div class="mt-20 w-full flex flex-col gap-4">
+            <div class="flex gap-2 items-center justify-between pl-3">
+              <div class="text-14-medium text-text-strong">{language.t("home.recentProjects")}</div>
+              <Button icon="folder-add-left" size="normal" class="pl-2 pr-3" onClick={chooseProject}>
+                {language.t("command.project.open")}
+              </Button>
+            </div>
+            <ul class="flex flex-col gap-2">
+              <For each={recent()}>
+                {(project) => (
+                  <Button
+                    size="large"
+                    variant="ghost"
+                    class="text-14-mono text-left justify-between px-3"
+                    onClick={() => openProject(project.worktree)}
+                  >
+                    {project.worktree.replace(homedir(), "~")}
+                    <div class="text-14-regular text-text-weak">
+                      {DateTime.fromMillis(project.time.updated ?? project.time.created).toRelative()}
+                    </div>
+                  </Button>
+                )}
+              </For>
+            </ul>
+          </div>
+        </Match>
+        <Match when={true}>
+          <div class="mt-30 mx-auto flex flex-col items-center gap-3">
+            <Icon name="folder-add-left" size="large" />
+            <div class="flex flex-col gap-1 items-center justify-center">
+              <div class="text-14-medium text-text-strong">{language.t("home.empty.title")}</div>
+              <div class="text-12-regular text-text-weak">{language.t("home.empty.description")}</div>
+            </div>
+            <div />
+            <Button class="px-3" onClick={chooseProject}>
+              {language.t("command.project.open")}
+            </Button>
+          </div>
+        </Match>
+      </Switch>
+    </div>
+  )
+}

package/src/pages/layout/deep-links.ts

@@ -0,0 +1,26 @@
+export const deepLinkEvent = "nikcli:deep-link"
+
+export const parseDeepLink = (input: string) => {
+  if (!input.startsWith("nikcli://")) return
+  const url = new URL(input)
+  if (url.hostname !== "open-project") return
+  const directory = url.searchParams.get("directory")
+  if (!directory) return
+  return directory
+}
+
+export const collectOpenProjectDeepLinks = (urls: string[]) =>
+  urls.map(parseDeepLink).filter((directory): directory is string => !!directory)
+
+type NikcliWindow = Window & {
+  __NIKCLI__?: {
+    deepLinks?: string[]
+  }
+}
+
+export const drainPendingDeepLinks = (target: NikcliWindow) => {
+  const pending = target.__NIKCLI__?.deepLinks ?? []
+  if (pending.length === 0) return []
+  if (target.__NIKCLI__) target.__NIKCLI__.deepLinks = []
+  return pending
+}

package/src/pages/layout/helpers.test.ts

@@ -0,0 +1,63 @@
+import { describe, expect, test } from "bun:test"
+import { collectOpenProjectDeepLinks, drainPendingDeepLinks, parseDeepLink } from "./deep-links"
+import { displayName, errorMessage, getDraggableId, syncWorkspaceOrder, workspaceKey } from "./helpers"
+
+describe("layout deep links", () => {
+  test("parses open-project deep links", () => {
+    expect(parseDeepLink("nikcli://open-project?directory=/tmp/demo")).toBe("/tmp/demo")
+  })
+
+  test("ignores non-project deep links", () => {
+    expect(parseDeepLink("nikcli://other?directory=/tmp/demo")).toBeUndefined()
+    expect(parseDeepLink("https://example.com")).toBeUndefined()
+  })
+
+  test("collects only valid open-project directories", () => {
+    const result = collectOpenProjectDeepLinks([
+      "nikcli://open-project?directory=/a",
+      "nikcli://other?directory=/b",
+      "nikcli://open-project?directory=/c",
+    ])
+    expect(result).toEqual(["/a", "/c"])
+  })
+
+  test("drains global deep links once", () => {
+    const target = {
+      __NIKCLI__: {
+        deepLinks: ["nikcli://open-project?directory=/a"],
+      },
+    } as unknown as Window & { __NIKCLI__?: { deepLinks?: string[] } }
+
+    expect(drainPendingDeepLinks(target)).toEqual(["nikcli://open-project?directory=/a"])
+    expect(drainPendingDeepLinks(target)).toEqual([])
+  })
+})
+
+describe("layout workspace helpers", () => {
+  test("normalizes trailing slash in workspace key", () => {
+    expect(workspaceKey("/tmp/demo///")).toBe("/tmp/demo")
+    expect(workspaceKey("C:\\tmp\\demo\\\\")).toBe("C:\\tmp\\demo")
+  })
+
+  test("keeps local first while preserving known order", () => {
+    const result = syncWorkspaceOrder("/root", ["/root", "/b", "/c"], ["/root", "/c", "/a", "/b"])
+    expect(result).toEqual(["/root", "/c", "/b"])
+  })
+
+  test("extracts draggable id safely", () => {
+    expect(getDraggableId({ draggable: { id: "x" } })).toBe("x")
+    expect(getDraggableId({ draggable: { id: 42 } })).toBeUndefined()
+    expect(getDraggableId(null)).toBeUndefined()
+  })
+
+  test("formats fallback project display name", () => {
+    expect(displayName({ worktree: "/tmp/app" })).toBe("app")
+    expect(displayName({ worktree: "/tmp/app", name: "My App" })).toBe("My App")
+  })
+
+  test("extracts api error message and fallback", () => {
+    expect(errorMessage({ data: { message: "boom" } }, "fallback")).toBe("boom")
+    expect(errorMessage(new Error("broken"), "fallback")).toBe("broken")
+    expect(errorMessage("unknown", "fallback")).toBe("fallback")
+  })
+})

package/src/pages/layout/helpers.ts

@@ -0,0 +1,65 @@
+import { getFilename } from "@nikcli-ai/util/path"
+import { type Session } from "@nikcli-ai/sdk/v2/client"
+
+export const workspaceKey = (directory: string) => directory.replace(/[\\/]+$/, "")
+
+export function sortSessions(now: number) {
+  const oneMinuteAgo = now - 60 * 1000
+  return (a: Session, b: Session) => {
+    const aUpdated = a.time.updated ?? a.time.created
+    const bUpdated = b.time.updated ?? b.time.created
+    const aRecent = aUpdated > oneMinuteAgo
+    const bRecent = bUpdated > oneMinuteAgo
+    if (aRecent && bRecent) return a.id < b.id ? -1 : a.id > b.id ? 1 : 0
+    if (aRecent && !bRecent) return -1
+    if (!aRecent && bRecent) return 1
+    return bUpdated - aUpdated
+  }
+}
+
+export const isRootVisibleSession = (session: Session, directory: string) =>
+  workspaceKey(session.directory) === workspaceKey(directory) && !session.parentID && !session.time?.archived
+
+export const sortedRootSessions = (store: { session: Session[]; path: { directory: string } }, now: number) =>
+  store.session.filter((session) => isRootVisibleSession(session, store.path.directory)).toSorted(sortSessions(now))
+
+export const childMapByParent = (sessions: Session[]) => {
+  const map = new Map<string, string[]>()
+  for (const session of sessions) {
+    if (!session.parentID) continue
+    const existing = map.get(session.parentID)
+    if (existing) {
+      existing.push(session.id)
+      continue
+    }
+    map.set(session.parentID, [session.id])
+  }
+  return map
+}
+
+export function getDraggableId(event: unknown): string | undefined {
+  if (typeof event !== "object" || event === null) return undefined
+  if (!("draggable" in event)) return undefined
+  const draggable = (event as { draggable?: { id?: unknown } }).draggable
+  if (!draggable) return undefined
+  return typeof draggable.id === "string" ? draggable.id : undefined
+}
+
+export const displayName = (project: { name?: string; worktree: string }) =>
+  project.name || getFilename(project.worktree)
+
+export const errorMessage = (err: unknown, fallback: string) => {
+  if (err && typeof err === "object" && "data" in err) {
+    const data = (err as { data?: { message?: string } }).data
+    if (data?.message) return data.message
+  }
+  if (err instanceof Error) return err.message
+  return fallback
+}
+
+export const syncWorkspaceOrder = (local: string, dirs: string[], existing?: string[]) => {
+  if (!existing) return dirs
+  const keep = existing.filter((d) => d !== local && dirs.includes(d))
+  const missing = dirs.filter((d) => d !== local && !existing.includes(d))
+  return [local, ...missing, ...keep]
+}