@neocode-ai/web 1.1.1

package/src/components/Share.tsx

@@ -0,0 +1,634 @@
+import { For, Show, onMount, Suspense, onCleanup, createMemo, createSignal, SuspenseList, createEffect } from "solid-js"
+import { DateTime } from "luxon"
+import { createStore, reconcile, unwrap } from "solid-js/store"
+import { IconArrowDown } from "./icons"
+import { IconNeocode } from "./icons/custom"
+import styles from "./share.module.css"
+import type { MessageV2 } from "neocode/session/message-v2"
+import type { Message } from "neocode/session/message"
+import type { Session } from "neocode/session/index"
+import { Part, ProviderIcon } from "./share/part"
+
+type MessageWithParts = MessageV2.Info & { parts: MessageV2.Part[] }
+
+type Status = "disconnected" | "connecting" | "connected" | "error" | "reconnecting"
+
+function scrollToAnchor(id: string) {
+  const el = document.getElementById(id)
+  if (!el) return
+
+  el.scrollIntoView({ behavior: "smooth" })
+}
+
+function getStatusText(status: [Status, string?]): string {
+  switch (status[0]) {
+    case "connected":
+      return "Connected, waiting for messages..."
+    case "connecting":
+      return "Connecting..."
+    case "disconnected":
+      return "Disconnected"
+    case "reconnecting":
+      return "Reconnecting..."
+    case "error":
+      return status[1] || "Error"
+    default:
+      return "Unknown"
+  }
+}
+
+export default function Share(props: { id: string; api: string; info: Session.Info }) {
+  let lastScrollY = 0
+  let hasScrolledToAnchor = false
+  let scrollTimeout: number | undefined
+  let scrollSentinel: HTMLElement | undefined
+  let scrollObserver: IntersectionObserver | undefined
+
+  const params = new URLSearchParams(window.location.search)
+  const debug = params.get("debug") === "true"
+
+  const [showScrollButton, setShowScrollButton] = createSignal(false)
+  const [isButtonHovered, setIsButtonHovered] = createSignal(false)
+  const [isNearBottom, setIsNearBottom] = createSignal(false)
+
+  const [store, setStore] = createStore<{
+    info?: Session.Info
+    messages: Record<string, MessageWithParts>
+  }>({
+    info: {
+      id: props.id,
+      title: props.info.title,
+      version: props.info.version,
+      time: {
+        created: props.info.time.created,
+        updated: props.info.time.updated,
+      },
+    },
+    messages: {},
+  })
+  const messages = createMemo(() => Object.values(store.messages).toSorted((a, b) => a.id?.localeCompare(b.id)))
+  const [connectionStatus, setConnectionStatus] = createSignal<[Status, string?]>(["disconnected", "Disconnected"])
+  createEffect(() => {
+    console.log(unwrap(store))
+  })
+
+  onMount(() => {
+    const apiUrl = props.api
+
+    if (!props.id) {
+      setConnectionStatus(["error", "id not found"])
+      return
+    }
+
+    if (!apiUrl) {
+      console.error("API URL not found in environment variables")
+      setConnectionStatus(["error", "API URL not found"])
+      return
+    }
+
+    let reconnectTimer: number | undefined
+    let socket: WebSocket | null = null
+
+    // Function to create and set up WebSocket with auto-reconnect
+    const setupWebSocket = () => {
+      // Close any existing connection
+      if (socket) {
+        socket.close()
+      }
+
+      setConnectionStatus(["connecting"])
+
+      // Always use secure WebSocket protocol (wss)
+      const wsBaseUrl = apiUrl.replace(/^https?:\/\//, "wss://")
+      const wsUrl = `${wsBaseUrl}/share_poll?id=${props.id}`
+      console.log("Connecting to WebSocket URL:", wsUrl)
+
+      // Create WebSocket connection
+      socket = new WebSocket(wsUrl)
+
+      // Handle connection opening
+      socket.onopen = () => {
+        setConnectionStatus(["connected"])
+        console.log("WebSocket connection established")
+      }
+
+      // Handle incoming messages
+      socket.onmessage = (event) => {
+        console.log("WebSocket message received")
+        try {
+          const d = JSON.parse(event.data)
+          const [root, type, ...splits] = d.key.split("/")
+          if (root !== "session") return
+          if (type === "info") {
+            setStore("info", reconcile(d.content))
+            return
+          }
+          if (type === "message") {
+            const [, messageID] = splits
+            if ("metadata" in d.content) {
+              d.content = fromV1(d.content)
+            }
+            d.content.parts = d.content.parts ?? store.messages[messageID]?.parts ?? []
+            setStore("messages", messageID, reconcile(d.content))
+          }
+          if (type === "part") {
+            setStore("messages", d.content.messageID, "parts", (arr) => {
+              const index = arr.findIndex((x) => x.id === d.content.id)
+              if (index === -1) arr.push(d.content)
+              if (index > -1) arr[index] = d.content
+              return [...arr]
+            })
+          }
+        } catch (error) {
+          console.error("Error parsing WebSocket message:", error)
+        }
+      }
+
+      // Handle errors
+      socket.onerror = (error) => {
+        console.error("WebSocket error:", error)
+        setConnectionStatus(["error", "Connection failed"])
+      }
+
+      // Handle connection close and reconnection
+      socket.onclose = (event) => {
+        console.log(`WebSocket closed: ${event.code} ${event.reason}`)
+        setConnectionStatus(["reconnecting"])
+
+        // Try to reconnect after 2 seconds
+        clearTimeout(reconnectTimer)
+        reconnectTimer = window.setTimeout(setupWebSocket, 2000) as unknown as number
+      }
+    }
+
+    // Initial connection
+    setupWebSocket()
+
+    // Clean up on component unmount
+    onCleanup(() => {
+      console.log("Cleaning up WebSocket connection")
+      if (socket) {
+        socket.close()
+      }
+      clearTimeout(reconnectTimer)
+    })
+  })
+
+  function checkScrollNeed() {
+    const currentScrollY = window.scrollY
+    const isScrollingDown = currentScrollY > lastScrollY
+    const scrolled = currentScrollY > 200 // Show after scrolling 200px
+
+    // Only show when scrolling down, scrolled enough, and not near bottom
+    const shouldShow = isScrollingDown && scrolled && !isNearBottom()
+
+    // Update last scroll position
+    lastScrollY = currentScrollY
+
+    if (shouldShow) {
+      setShowScrollButton(true)
+      // Clear existing timeout
+      if (scrollTimeout) {
+        clearTimeout(scrollTimeout)
+      }
+      // Hide button after 3 seconds of no scrolling (unless hovered)
+      scrollTimeout = window.setTimeout(() => {
+        if (!isButtonHovered()) {
+          setShowScrollButton(false)
+        }
+      }, 1500)
+    } else if (!isButtonHovered()) {
+      // Only hide if not hovered (to prevent disappearing while user is about to click)
+      setShowScrollButton(false)
+      if (scrollTimeout) {
+        clearTimeout(scrollTimeout)
+      }
+    }
+  }
+
+  onMount(() => {
+    lastScrollY = window.scrollY // Initialize scroll position
+
+    // Create sentinel element
+    const sentinel = document.createElement("div")
+    sentinel.style.height = "1px"
+    sentinel.style.position = "absolute"
+    sentinel.style.bottom = "100px"
+    sentinel.style.width = "100%"
+    sentinel.style.pointerEvents = "none"
+    document.body.appendChild(sentinel)
+
+    // Create intersection observer
+    const observer = new IntersectionObserver((entries) => {
+      setIsNearBottom(entries[0].isIntersecting)
+    })
+    observer.observe(sentinel)
+
+    // Store references for cleanup
+    scrollSentinel = sentinel
+    scrollObserver = observer
+
+    checkScrollNeed()
+    window.addEventListener("scroll", checkScrollNeed)
+    window.addEventListener("resize", checkScrollNeed)
+  })
+
+  onCleanup(() => {
+    window.removeEventListener("scroll", checkScrollNeed)
+    window.removeEventListener("resize", checkScrollNeed)
+
+    // Clean up observer and sentinel
+    if (scrollObserver) {
+      scrollObserver.disconnect()
+    }
+    if (scrollSentinel) {
+      document.body.removeChild(scrollSentinel)
+    }
+
+    if (scrollTimeout) {
+      clearTimeout(scrollTimeout)
+    }
+  })
+
+  const data = createMemo(() => {
+    const result = {
+      rootDir: undefined as string | undefined,
+      created: undefined as number | undefined,
+      completed: undefined as number | undefined,
+      messages: [] as MessageWithParts[],
+      models: {} as Record<string, string[]>,
+      cost: 0,
+      tokens: {
+        input: 0,
+        output: 0,
+        reasoning: 0,
+      },
+    }
+
+    if (!store.info) return result
+
+    result.created = store.info.time.created
+
+    const msgs = messages()
+    for (let i = 0; i < msgs.length; i++) {
+      const msg = msgs[i]
+
+      result.messages.push(msg)
+
+      if (msg.role === "assistant") {
+        result.cost += msg.cost
+        result.tokens.input += msg.tokens.input
+        result.tokens.output += msg.tokens.output
+        result.tokens.reasoning += msg.tokens.reasoning
+
+        result.models[`${msg.providerID} ${msg.modelID}`] = [msg.providerID, msg.modelID]
+
+        if (msg.path.root) {
+          result.rootDir = msg.path.root
+        }
+
+        if (msg.time.completed) {
+          result.completed = msg.time.completed
+        }
+      }
+    }
+    return result
+  })
+
+  return (
+    <Show when={store.info}>
+      <main classList={{ [styles.root]: true, "not-content": true }}>
+        <div data-component="header">
+          <h1 data-component="header-title">{store.info?.title}</h1>
+          <div data-component="header-details">
+            <ul data-component="header-stats">
+              <li title="neocode version" data-slot="item">
+                <div data-slot="icon" title="neocode">
+                  <IconNeocode width={16} height={16} />
+                </div>
+                <Show when={store.info?.version} fallback="v0.0.1">
+                  <span>v{store.info?.version}</span>
+                </Show>
+              </li>
+              {Object.values(data().models).length > 0 ? (
+                <For each={Object.values(data().models)}>
+                  {([provider, model]) => (
+                    <li data-slot="item">
+                      <div data-slot="icon" title={provider}>
+                        <ProviderIcon model={model} />
+                      </div>
+                      <span data-slot="model">{model}</span>
+                    </li>
+                  )}
+                </For>
+              ) : (
+                <li>
+                  <span data-element-label>Models</span>
+                  <span data-placeholder>&mdash;</span>
+                </li>
+              )}
+            </ul>
+            <div
+              data-component="header-time"
+              title={DateTime.fromMillis(data().created || 0).toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)}
+            >
+              {DateTime.fromMillis(data().created || 0).toLocaleString(DateTime.DATETIME_MED)}
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <Show when={data().messages.length > 0} fallback={<p>Waiting for messages...</p>}>
+            <div class={styles.parts}>
+              <SuspenseList revealOrder="forwards">
+                <For each={data().messages}>
+                  {(msg, msgIndex) => {
+                    const filteredParts = createMemo(() =>
+                      msg.parts.filter((x, index) => {
+                        if (x.type === "step-start" && index > 0) return false
+                        if (x.type === "snapshot") return false
+                        if (x.type === "patch") return false
+                        if (x.type === "step-finish") return false
+                        if (x.type === "text" && x.synthetic === true) return false
+                        if (x.type === "tool" && x.tool === "todoread") return false
+                        if (x.type === "text" && !x.text) return false
+                        if (x.type === "tool" && (x.state.status === "pending" || x.state.status === "running"))
+                          return false
+                        return true
+                      }),
+                    )
+
+                    return (
+                      <Suspense>
+                        <For each={filteredParts()}>
+                          {(part, partIndex) => {
+                            const last = createMemo(
+                              () =>
+                                data().messages.length === msgIndex() + 1 && filteredParts().length === partIndex() + 1,
+                            )
+
+                            onMount(() => {
+                              const hash = window.location.hash.slice(1)
+                              // Wait till all parts are loaded
+                              if (
+                                hash !== "" &&
+                                !hasScrolledToAnchor &&
+                                filteredParts().length === partIndex() + 1 &&
+                                data().messages.length === msgIndex() + 1
+                              ) {
+                                hasScrolledToAnchor = true
+                                scrollToAnchor(hash)
+                              }
+                            })
+
+                            return <Part last={last()} part={part} index={partIndex()} message={msg} />
+                          }}
+                        </For>
+                      </Suspense>
+                    )
+                  }}
+                </For>
+              </SuspenseList>
+              <div data-section="part" data-part-type="summary">
+                <div data-section="decoration">
+                  <span data-status={connectionStatus()[0]}></span>
+                </div>
+                <div data-section="content">
+                  <p data-section="copy">{getStatusText(connectionStatus())}</p>
+                  <ul data-section="stats">
+                    <li>
+                      <span data-element-label>Cost</span>
+                      {data().cost !== undefined ? (
+                        <span>${data().cost.toFixed(2)}</span>
+                      ) : (
+                        <span data-placeholder>&mdash;</span>
+                      )}
+                    </li>
+                    <li>
+                      <span data-element-label>Input Tokens</span>
+                      {data().tokens.input ? <span>{data().tokens.input}</span> : <span data-placeholder>&mdash;</span>}
+                    </li>
+                    <li>
+                      <span data-element-label>Output Tokens</span>
+                      {data().tokens.output ? (
+                        <span>{data().tokens.output}</span>
+                      ) : (
+                        <span data-placeholder>&mdash;</span>
+                      )}
+                    </li>
+                    <li>
+                      <span data-element-label>Reasoning Tokens</span>
+                      {data().tokens.reasoning ? (
+                        <span>{data().tokens.reasoning}</span>
+                      ) : (
+                        <span data-placeholder>&mdash;</span>
+                      )}
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </Show>
+        </div>
+
+        <Show when={debug}>
+          <div style={{ margin: "2rem 0" }}>
+            <div
+              style={{
+                border: "1px solid #ccc",
+                padding: "1rem",
+                "overflow-y": "auto",
+              }}
+            >
+              <Show when={data().messages.length > 0} fallback={<p>Waiting for messages...</p>}>
+                <ul style={{ "list-style-type": "none", padding: 0 }}>
+                  <For each={data().messages}>
+                    {(msg) => (
+                      <li
+                        style={{
+                          padding: "0.75rem",
+                          margin: "0.75rem 0",
+                          "box-shadow": "0 1px 3px rgba(0,0,0,0.1)",
+                        }}
+                      >
+                        <div>
+                          <strong>Key:</strong> {msg.id}
+                        </div>
+                        <pre>{JSON.stringify(msg, null, 2)}</pre>
+                      </li>
+                    )}
+                  </For>
+                </ul>
+              </Show>
+            </div>
+          </div>
+        </Show>
+
+        <Show when={showScrollButton()}>
+          <button
+            type="button"
+            class={styles["scroll-button"]}
+            onClick={() => document.body.scrollIntoView({ behavior: "smooth", block: "end" })}
+            onMouseEnter={() => {
+              setIsButtonHovered(true)
+              if (scrollTimeout) {
+                clearTimeout(scrollTimeout)
+              }
+            }}
+            onMouseLeave={() => {
+              setIsButtonHovered(false)
+              if (showScrollButton()) {
+                scrollTimeout = window.setTimeout(() => {
+                  if (!isButtonHovered()) {
+                    setShowScrollButton(false)
+                  }
+                }, 3000)
+              }
+            }}
+            title="Scroll to bottom"
+            aria-label="Scroll to bottom"
+          >
+            <IconArrowDown width={20} height={20} />
+          </button>
+        </Show>
+      </main>
+    </Show>
+  )
+}
+
+export function fromV1(v1: Message.Info): MessageWithParts {
+  if (v1.role === "assistant") {
+    return {
+      id: v1.id,
+      sessionID: v1.metadata.sessionID,
+      role: "assistant",
+      time: {
+        created: v1.metadata.time.created,
+        completed: v1.metadata.time.completed,
+      },
+      cost: v1.metadata.assistant!.cost,
+      path: v1.metadata.assistant!.path,
+      summary: v1.metadata.assistant!.summary,
+      tokens: v1.metadata.assistant!.tokens ?? {
+        input: 0,
+        output: 0,
+        cache: {
+          read: 0,
+          write: 0,
+        },
+        reasoning: 0,
+      },
+      modelID: v1.metadata.assistant!.modelID,
+      providerID: v1.metadata.assistant!.providerID,
+      mode: "build",
+      system: v1.metadata.assistant!.system,
+      error: v1.metadata.error,
+      parts: v1.parts.flatMap((part, index): MessageV2.Part[] => {
+        const base = {
+          id: index.toString(),
+          messageID: v1.id,
+          sessionID: v1.metadata.sessionID,
+        }
+        if (part.type === "text") {
+          return [
+            {
+              ...base,
+              type: "text",
+              text: part.text,
+            },
+          ]
+        }
+        if (part.type === "step-start") {
+          return [
+            {
+              ...base,
+              type: "step-start",
+            },
+          ]
+        }
+        if (part.type === "tool-invocation") {
+          return [
+            {
+              ...base,
+              type: "tool",
+              callID: part.toolInvocation.toolCallId,
+              tool: part.toolInvocation.toolName,
+              state: (() => {
+                if (part.toolInvocation.state === "partial-call") {
+                  return {
+                    status: "pending",
+                  }
+                }
+
+                const { title, time, ...metadata } = v1.metadata.tool[part.toolInvocation.toolCallId]
+                if (part.toolInvocation.state === "call") {
+                  return {
+                    status: "running",
+                    input: part.toolInvocation.args,
+                    time: {
+                      start: time.start,
+                    },
+                  }
+                }
+
+                if (part.toolInvocation.state === "result") {
+                  return {
+                    status: "completed",
+                    input: part.toolInvocation.args,
+                    output: part.toolInvocation.result,
+                    title,
+                    time,
+                    metadata,
+                  }
+                }
+                throw new Error("unknown tool invocation state")
+              })(),
+            },
+          ]
+        }
+        return []
+      }),
+    }
+  }
+
+  if (v1.role === "user") {
+    return {
+      id: v1.id,
+      sessionID: v1.metadata.sessionID,
+      role: "user",
+      time: {
+        created: v1.metadata.time.created,
+      },
+      parts: v1.parts.flatMap((part, index): MessageV2.Part[] => {
+        const base = {
+          id: index.toString(),
+          messageID: v1.id,
+          sessionID: v1.metadata.sessionID,
+        }
+        if (part.type === "text") {
+          return [
+            {
+              ...base,
+              type: "text",
+              text: part.text,
+            },
+          ]
+        }
+        if (part.type === "file") {
+          return [
+            {
+              ...base,
+              type: "file",
+              mime: part.mediaType,
+              filename: part.filename,
+              url: part.url,
+            },
+          ]
+        }
+        return []
+      }),
+    }
+  }
+
+  throw new Error("unknown message type")
+}

package/src/components/SiteTitle.astro

@@ -0,0 +1,59 @@
+---
+import { logos } from 'virtual:starlight/user-images';
+import config from 'virtual:starlight/user-config';
+const { siteTitle, siteTitleHref } = Astro.locals.starlightRoute;
+---
+
+<a href="/" class="site-title sl-flex">
+	{
+		config.logo && logos.dark && (
+			<>
+				<img
+					class:list={{ 'light:sl-hidden print:hidden': !('src' in config.logo) }}
+					alt={config.logo.alt}
+					src={logos.dark.src}
+					width={logos.dark.width}
+					height={logos.dark.height}
+				/>
+				{/* Show light alternate if a user configure both light and dark logos. */}
+				{!('src' in config.logo) && (
+					<img
+						class="dark:sl-hidden print:block"
+						alt={config.logo.alt}
+						src={logos.light?.src}
+						width={logos.light?.width}
+						height={logos.light?.height}
+					/>
+				)}
+			</>
+		)
+	}
+	<span class:list={{ 'sr-only': config.logo?.replacesTitle }} translate="no">
+		{siteTitle}
+	</span>
+</a>
+
+<style>
+	@layer starlight.core {
+		.site-title {
+			align-items: center;
+			gap: var(--sl-nav-gap);
+			font-size: var(--sl-text-h4);
+			font-weight: 600;
+			color: var(--sl-color-text-accent);
+			text-decoration: none;
+			white-space: nowrap;
+			min-width: 0;
+		}
+		span {
+			overflow: hidden;
+		}
+		img {
+			height: calc(var(--sl-nav-height) - 2 * var(--sl-nav-pad-y));
+			width: auto;
+			max-width: 100%;
+			object-fit: contain;
+			object-position: 0 50%;
+		}
+	}
+</style>