@neurocode-ai/app 1.18.8

package/src/pages/layout/helpers.ts

@@ -0,0 +1,150 @@
+import { getFilename } from "@neurocode-ai/core/util/path"
+import { type Session } from "@neurocode-ai/sdk/v2/client"
+import { pathKey } from "@/utils/path-key"
+import type { ServerConnection } from "@/context/server"
+import type { HomeProjectSelection } from "@/context/layout"
+
+type SessionStore = {
+  session?: Session[]
+  path: { directory: string }
+}
+
+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
+  }
+}
+
+const isRootVisibleSession = (session: Session, directory: string) =>
+  pathKey(session.directory) === pathKey(directory) && !session.parentID && !session.time?.archived
+
+export const roots = (store: SessionStore) =>
+  (store.session ?? []).filter((session) => isRootVisibleSession(session, store.path.directory))
+
+export const sortedRootSessions = (store: SessionStore, now: number) => roots(store).sort(sortSessions(now))
+
+export const latestRootSession = (stores: SessionStore[], now: number) =>
+  stores.flatMap(roots).sort(sortSessions(now))[0]
+
+export function hasProjectPermissions<T>(
+  request: Record<string, T[] | undefined> | undefined,
+  include: (item: T) => boolean = () => true,
+) {
+  return Object.values(request ?? {}).some((list) => list?.some(include))
+}
+
+export const childSessionOnPath = (sessions: Session[] | undefined, rootID: string, activeID?: string) => {
+  if (!activeID || activeID === rootID) return
+  const map = new Map((sessions ?? []).map((session) => [session.id, session]))
+  let id = activeID
+
+  while (id) {
+    const session = map.get(id)
+    if (!session?.parentID) return
+    if (session.parentID === rootID) return session
+    id = session.parentID
+  }
+}
+
+export const displayName = (project: { name?: string; worktree: string }) =>
+  project.name || getFilename(project.worktree) || project.worktree
+
+export function toggleHomeProjectSelection(
+  current: HomeProjectSelection | undefined,
+  server: ServerConnection.Key,
+  directory: string,
+): HomeProjectSelection {
+  if (current?.server === server && current.directory === directory) return { server }
+  return { server, directory }
+}
+
+export function closeHomeProject(
+  selected: HomeProjectSelection | undefined,
+  server: ServerConnection.Key,
+  projects: { close: (directory: string) => void },
+  directory: string,
+) {
+  projects.close(directory)
+  if (selected?.server === server && selected.directory === directory) return { server }
+  return selected
+}
+
+export function homeProjectNavigation(active: ServerConnection.Key, server: ServerConnection.Key, href: string) {
+  if (active === server) return { href }
+  return { server, href }
+}
+
+export function homeProjectDirectories(result: string | string[] | null) {
+  if (!result) return []
+  return Array.isArray(result) ? result : [result]
+}
+
+export function homeSessionServerStatus(active: boolean, status: () => { working: boolean; tint?: string }) {
+  if (!active) return { working: false, tint: undefined }
+  return status()
+}
+
+const NEUROCODE_PROJECT_ID = "4b0ea68d7af9a6031a7ffda7ad66e0cb83315750"
+
+export function getProjectAvatarSource(id?: string, icon?: { color?: string; url?: string; override?: string }) {
+  if (id === NEUROCODE_PROJECT_ID) return "https://neurocode.ai/favicon.svg"
+  if (icon?.override) return icon.override
+  if (icon?.color) return undefined
+  return icon?.url
+}
+
+export function projectForSession<T extends { id?: string; worktree: string; sandboxes?: string[] }>(
+  session: Session,
+  projects: T[],
+  byID: Map<string, T> = new Map(projects.flatMap((project) => (project.id ? [[project.id, project] as const] : []))),
+) {
+  const direct = byID.get(session.projectID)
+  if (direct) return direct
+  const directory = pathKey(session.directory)
+  return projects.find(
+    (project) =>
+      pathKey(project.worktree) === directory || project.sandboxes?.some((sandbox) => pathKey(sandbox) === directory),
+  )
+}
+
+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 effectiveWorkspaceOrder = (local: string, dirs: string[], persisted?: string[]) => {
+  const root = pathKey(local)
+  const live = new Map<string, string>()
+
+  for (const dir of dirs) {
+    const key = pathKey(dir)
+    if (key === root) continue
+    if (!live.has(key)) live.set(key, dir)
+  }
+
+  if (!persisted?.length) return [local, ...live.values()]
+
+  const result = [local]
+  for (const dir of persisted) {
+    const key = pathKey(dir)
+    if (key === root) continue
+    const match = live.get(key)
+    if (!match) continue
+    result.push(match)
+    live.delete(key)
+  }
+
+  return [...result, ...live.values()]
+}

package/src/pages/layout/inline-editor.tsx

@@ -0,0 +1,126 @@
+import { createStore } from "solid-js/store"
+import { onCleanup, Show, type Accessor } from "solid-js"
+import { InlineInput } from "@neurocode-ai/ui/inline-input"
+
+export function createInlineEditorController() {
+  // This controller intentionally supports one active inline editor at a time.
+  const [editor, setEditor] = createStore({
+    active: "" as string,
+    value: "",
+  })
+
+  const editorOpen = (id: string) => editor.active === id
+  const editorValue = () => editor.value
+  const openEditor = (id: string, value: string) => {
+    if (!id) return
+    setEditor({ active: id, value })
+  }
+  const closeEditor = () => setEditor({ active: "", value: "" })
+
+  const saveEditor = (callback: (next: string) => void) => {
+    const next = editor.value.trim()
+    if (!next) {
+      closeEditor()
+      return
+    }
+    closeEditor()
+    callback(next)
+  }
+
+  const editorKeyDown = (event: KeyboardEvent, callback: (next: string) => void) => {
+    if (event.key === "Enter") {
+      event.preventDefault()
+      saveEditor(callback)
+      return
+    }
+    if (event.key !== "Escape") return
+    event.preventDefault()
+    closeEditor()
+  }
+
+  const InlineEditor = (props: {
+    id: string
+    value: Accessor<string>
+    onSave: (next: string) => void
+    class?: string
+    displayClass?: string
+    editing?: boolean
+    stopPropagation?: boolean
+    openOnDblClick?: boolean
+  }) => {
+    let frame: number | undefined
+
+    onCleanup(() => {
+      if (frame === undefined) return
+      cancelAnimationFrame(frame)
+    })
+
+    const isEditing = () => props.editing ?? editorOpen(props.id)
+    const stopEvents = () => props.stopPropagation ?? false
+    const allowDblClick = () => props.openOnDblClick ?? true
+    const stopPropagation = (event: Event) => {
+      if (!stopEvents()) return
+      event.stopPropagation()
+    }
+    const handleDblClick = (event: MouseEvent) => {
+      if (!allowDblClick()) return
+      stopPropagation(event)
+      openEditor(props.id, props.value())
+    }
+
+    return (
+      <Show
+        when={isEditing()}
+        fallback={
+          <span
+            class={props.displayClass ?? props.class}
+            onDblClick={handleDblClick}
+            onPointerDown={stopPropagation}
+            onMouseDown={stopPropagation}
+            onClick={stopPropagation}
+            onTouchStart={stopPropagation}
+          >
+            {props.value()}
+          </span>
+        }
+      >
+        <InlineInput
+          ref={(el) => {
+            if (frame !== undefined) cancelAnimationFrame(frame)
+            frame = requestAnimationFrame(() => {
+              frame = undefined
+              if (!el.isConnected) return
+              el.focus()
+            })
+          }}
+          value={editorValue()}
+          class={props.class}
+          onInput={(event) => setEditor("value", event.currentTarget.value)}
+          onKeyDown={(event) => {
+            event.stopPropagation()
+            editorKeyDown(event, props.onSave)
+          }}
+          onBlur={closeEditor}
+          onPointerDown={stopPropagation}
+          onClick={stopPropagation}
+          onDblClick={stopPropagation}
+          onMouseDown={stopPropagation}
+          onMouseUp={stopPropagation}
+          onTouchStart={stopPropagation}
+        />
+      </Show>
+    )
+  }
+
+  return {
+    editor,
+    editorOpen,
+    editorValue,
+    openEditor,
+    closeEditor,
+    saveEditor,
+    editorKeyDown,
+    setEditor,
+    InlineEditor,
+  }
+}

package/src/pages/layout/project-avatar-state.ts

@@ -0,0 +1,49 @@
+import { createMemo, type Accessor } from "solid-js"
+import { useGlobal } from "@/context/global"
+import { useNotification } from "@/context/notification"
+import { usePermission } from "@/context/permission"
+import { sessionPermissionRequest, sessionQuestionRequest } from "@/pages/session/composer/session-request-tree"
+import { ServerConnection } from "@/context/server"
+
+export function useSessionTabAvatarState(
+  server: Accessor<ServerConnection.Key>,
+  directory: Accessor<string>,
+  sessionId: Accessor<string>,
+) {
+  const global = useGlobal()
+  const notification = useNotification()
+  const permission = usePermission()
+  const connection = createMemo(() => global.servers.list().find((item) => ServerConnection.key(item) === server()))
+  const sync = createMemo(() => {
+    const conn = connection()
+    if (conn) return global.ensureServerCtx(conn).sync
+  })
+  const hasPermissions = createMemo(() => {
+    const serverSync = sync()
+    if (!serverSync) return false
+    const permissionState = permission.ensureServerState(server())
+    const [store] = serverSync.child(directory(), { bootstrap: false })
+    return !!sessionPermissionRequest(store.session, serverSync.session.data.permission, sessionId(), (item) => {
+      return !permissionState.autoResponds(item, directory())
+    })
+  })
+  const hasQuestions = createMemo(() => {
+    const serverSync = sync()
+    if (!serverSync) return false
+    const [store] = serverSync.child(directory(), { bootstrap: false })
+    return !!sessionQuestionRequest(store.session, serverSync.session.data.question, sessionId())
+  })
+  const needsAttention = createMemo(() => hasPermissions() || hasQuestions())
+  const notificationState = createMemo(() => {
+    if (!connection()) return
+    return notification.ensureServerState(server())
+  })
+  const unread = createMemo(() => needsAttention() || (notificationState()?.session.unseenCount(sessionId()) ?? 0) > 0)
+  const loading = createMemo(() => {
+    const serverSync = sync()
+    if (!serverSync) return false
+    if (needsAttention()) return false
+    return serverSync.session.data.session_working(sessionId())
+  })
+  return { unread, loading }
+}

package/src/pages/layout/session-tab-avatar.tsx

@@ -0,0 +1,60 @@
+import type { LocalProject } from "@/context/layout"
+import { getProjectAvatarVariant } from "@/context/layout"
+import type { ServerConnection } from "@/context/server"
+import { displayName, getProjectAvatarSource } from "@/pages/layout/helpers"
+import { useSessionTabAvatarState } from "@/pages/layout/project-avatar-state"
+import { ProjectAvatar } from "@neurocode-ai/ui/v2/project-avatar-v2"
+import { SessionProgressIndicatorV2 } from "@neurocode-ai/session-ui/v2/session-progress-indicator-v2"
+import { Show } from "solid-js"
+
+export function SessionTabAvatar(props: {
+  project?: LocalProject
+  directory: string
+  sessionId: string
+  server: ServerConnection.Key
+  revealProjectOnHover?: boolean
+}) {
+  const state = useSessionTabAvatarState(
+    () => props.server,
+    () => props.directory,
+    () => props.sessionId,
+  )
+  return (
+    <SessionTabAvatarView
+      project={props.project}
+      directory={props.directory}
+      revealProjectOnHover={props.revealProjectOnHover}
+      unread={state.unread()}
+      loading={state.loading()}
+    />
+  )
+}
+
+export function SessionTabAvatarView(props: {
+  project?: LocalProject
+  directory: string
+  revealProjectOnHover?: boolean
+  unread: boolean
+  loading: boolean
+}) {
+  const projectAvatar = () => (
+    <ProjectAvatar
+      fallback={displayName(props.project ?? { worktree: props.directory })}
+      src={getProjectAvatarSource(props.project?.id, props.project?.icon)}
+      variant={getProjectAvatarVariant(props.project?.icon?.color)}
+      unread={props.unread}
+    />
+  )
+  return (
+    <Show when={props.loading} fallback={projectAvatar()}>
+      <span class="relative block size-4 shrink-0">
+        <SessionProgressIndicatorV2
+          class={`absolute inset-0 ${props.revealProjectOnHover === false ? "" : "group-hover:invisible"}`}
+        />
+        <Show when={props.revealProjectOnHover !== false}>
+          <span class="invisible absolute inset-0 group-hover:visible">{projectAvatar()}</span>
+        </Show>
+      </span>
+    </Show>
+  )
+}