@neocode-ai/web 1.1.1

package/src/components/share/common.tsx

@@ -0,0 +1,77 @@
+import { createSignal, onCleanup, splitProps } from "solid-js"
+import type { JSX } from "solid-js/jsx-runtime"
+import { IconCheckCircle, IconHashtag } from "../icons"
+
+interface AnchorProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  id: string
+}
+export function AnchorIcon(props: AnchorProps) {
+  const [local, rest] = splitProps(props, ["id", "children"])
+  const [copied, setCopied] = createSignal(false)
+
+  return (
+    <div {...rest} data-element-anchor title="Link to this message" data-status={copied() ? "copied" : ""}>
+      <a
+        href={`#${local.id}`}
+        onClick={(e) => {
+          e.preventDefault()
+
+          const anchor = e.currentTarget
+          const hash = anchor.getAttribute("href") || ""
+          const { origin, pathname, search } = window.location
+
+          navigator.clipboard
+            .writeText(`${origin}${pathname}${search}${hash}`)
+            .catch((err) => console.error("Copy failed", err))
+
+          setCopied(true)
+          setTimeout(() => setCopied(false), 3000)
+        }}
+      >
+        {local.children}
+        <IconHashtag width={18} height={18} />
+        <IconCheckCircle width={18} height={18} />
+      </a>
+      <span data-element-tooltip>Copied!</span>
+    </div>
+  )
+}
+
+export function createOverflow() {
+  const [overflow, setOverflow] = createSignal(false)
+  return {
+    get status() {
+      return overflow()
+    },
+    ref(el: HTMLElement) {
+      const ro = new ResizeObserver(() => {
+        if (el.scrollHeight > el.clientHeight + 1) {
+          setOverflow(true)
+        }
+        return
+      })
+      ro.observe(el)
+
+      onCleanup(() => {
+        ro.disconnect()
+      })
+    },
+  }
+}
+
+export function formatDuration(ms: number): string {
+  const ONE_SECOND = 1000
+  const ONE_MINUTE = 60 * ONE_SECOND
+
+  if (ms >= ONE_MINUTE) {
+    const minutes = Math.floor(ms / ONE_MINUTE)
+    return minutes === 1 ? `1min` : `${minutes}mins`
+  }
+
+  if (ms >= ONE_SECOND) {
+    const seconds = Math.floor(ms / ONE_SECOND)
+    return `${seconds}s`
+  }
+
+  return `${ms}ms`
+}

package/src/components/share/content-bash.module.css

@@ -0,0 +1,85 @@
+.root {
+  display: contents;
+
+  [data-slot="expand-button"] {
+    flex: 0 0 auto;
+    padding: 2px 0;
+    font-size: 0.75rem;
+  }
+
+  [data-slot="body"] {
+    border: 1px solid var(--sl-color-divider);
+    border-radius: 0.25rem;
+    overflow: hidden;
+    width: 100%;
+  }
+
+  [data-slot="header"] {
+    position: relative;
+    border-bottom: 1px solid var(--sl-color-divider);
+    width: 100%;
+    height: 1.625rem;
+    text-align: center;
+    padding: 0 3.25rem;
+
+    > span {
+      max-width: min(100%, 140ch);
+      display: inline-block;
+      white-space: nowrap;
+      overflow: hidden;
+      line-height: 1.625rem;
+      font-size: 0.75rem;
+      text-overflow: ellipsis;
+      color: var(--sl-color-text-dimmed);
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      pointer-events: none;
+      top: 8px;
+      left: 10px;
+      width: 2rem;
+      height: 0.5rem;
+      line-height: 0;
+      background-color: var(--sl-color-hairline);
+      mask-image: var(--term-icon);
+      mask-repeat: no-repeat;
+    }
+  }
+
+  [data-slot="content"] {
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem calc(0.5rem + 3px);
+
+    pre {
+      --shiki-dark-bg: var(--sl-color-bg) !important;
+      background-color: var(--sl-color-bg) !important;
+      line-height: 1.6;
+      font-size: 0.75rem;
+      white-space: pre-wrap;
+      word-break: break-word;
+      margin: 0;
+
+      span {
+        white-space: break-spaces;
+      }
+    }
+  }
+
+  [data-slot="output"] {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 10;
+    line-clamp: 10;
+    overflow: hidden;
+  }
+
+  &[data-expanded] [data-slot="output"] {
+    display: block;
+    -webkit-line-clamp: none;
+    line-clamp: none;
+    overflow: visible;
+  }
+}

package/src/components/share/content-bash.tsx

@@ -0,0 +1,67 @@
+import style from "./content-bash.module.css"
+import { createResource, createSignal } from "solid-js"
+import { createOverflow } from "./common"
+import { codeToHtml } from "shiki"
+
+interface Props {
+  command: string
+  output: string
+  description?: string
+  expand?: boolean
+}
+
+export function ContentBash(props: Props) {
+  const [commandHtml] = createResource(
+    () => props.command,
+    async (command) => {
+      return codeToHtml(command || "", {
+        lang: "bash",
+        themes: {
+          light: "github-light",
+          dark: "github-dark",
+        },
+      })
+    },
+  )
+
+  const [outputHtml] = createResource(
+    () => props.output,
+    async (output) => {
+      return codeToHtml(output || "", {
+        lang: "console",
+        themes: {
+          light: "github-light",
+          dark: "github-dark",
+        },
+      })
+    },
+  )
+
+  const [expanded, setExpanded] = createSignal(false)
+  const overflow = createOverflow()
+
+  return (
+    <div class={style.root} data-expanded={expanded() || props.expand === true ? true : undefined}>
+      <div data-slot="body">
+        <div data-slot="header">
+          <span>{props.description}</span>
+        </div>
+        <div data-slot="content">
+          <div innerHTML={commandHtml()} />
+          <div data-slot="output" ref={overflow.ref} innerHTML={outputHtml()} />
+        </div>
+      </div>
+
+      {!props.expand && overflow.status && (
+        <button
+          type="button"
+          data-component="text-button"
+          data-slot="expand-button"
+          onClick={() => setExpanded((e) => !e)}
+        >
+          {expanded() ? "Show less" : "Show more"}
+        </button>
+      )}
+    </div>
+  )
+}

package/src/components/share/content-code.module.css

@@ -0,0 +1,26 @@
+.root {
+  border: 1px solid var(--sl-color-divider);
+  background-color: var(--sl-color-bg-surface);
+  border-radius: 0.25rem;
+  padding: 0.5rem calc(0.5rem + 3px);
+
+  &[data-flush="true"] {
+    border: none;
+    background-color: transparent;
+    padding: 0;
+    border-radius: 0;
+  }
+
+  pre {
+    --shiki-dark-bg: var(--sl-color-bg-surface) !important;
+    background-color: var(--sl-color-bg-surface) !important;
+    line-height: 1.6;
+    font-size: 0.75rem;
+    white-space: pre-wrap;
+    word-break: break-word;
+
+    span {
+      white-space: break-spaces;
+    }
+  }
+}

package/src/components/share/content-code.tsx

@@ -0,0 +1,32 @@
+import { codeToHtml, bundledLanguages } from "shiki"
+import { createResource, Suspense } from "solid-js"
+import { transformerNotationDiff } from "@shikijs/transformers"
+import style from "./content-code.module.css"
+
+interface Props {
+  code: string
+  lang?: string
+  flush?: boolean
+}
+export function ContentCode(props: Props) {
+  const [html] = createResource(
+    () => [props.code, props.lang],
+    async ([code, lang]) => {
+      // TODO: For testing delays
+      // await new Promise((resolve) => setTimeout(resolve, 3000))
+      return (await codeToHtml(code || "", {
+        lang: lang && lang in bundledLanguages ? lang : "text",
+        themes: {
+          light: "github-light",
+          dark: "github-dark",
+        },
+        transformers: [transformerNotationDiff()],
+      })) as string
+    },
+  )
+  return (
+    <Suspense>
+      <div innerHTML={html()} class={style.root} data-flush={props.flush === true ? true : undefined} />
+    </Suspense>
+  )
+}

package/src/components/share/content-diff.module.css

@@ -0,0 +1,153 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--sl-color-divider);
+  background-color: var(--sl-color-bg-surface);
+  border-radius: 0.25rem;
+
+  [data-component="desktop"] {
+    display: block;
+  }
+
+  [data-component="mobile"] {
+    display: none;
+  }
+
+  [data-component="diff-block"] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  [data-component="diff-row"] {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: stretch;
+
+    &:first-child {
+      [data-slot="before"],
+      [data-slot="after"] {
+        padding-top: 0.25rem;
+      }
+    }
+
+    &:last-child {
+      [data-slot="before"],
+      [data-slot="after"] {
+        padding-bottom: 0.25rem;
+      }
+    }
+
+    [data-slot="before"],
+    [data-slot="after"] {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      overflow-x: visible;
+      min-width: 0;
+      align-items: stretch;
+      padding: 0 1rem 0 2.2ch;
+
+      &[data-diff-type="removed"] {
+        background-color: var(--sl-color-red-low);
+
+        pre {
+          --shiki-dark-bg: var(--sl-color-red-low) !important;
+          background-color: var(--sl-color-red-low) !important;
+        }
+
+        &::before {
+          content: "-";
+          position: absolute;
+          left: 0.6ch;
+          top: 1px;
+          user-select: none;
+          color: var(--sl-color-red-high);
+        }
+      }
+
+      &[data-diff-type="added"] {
+        background-color: var(--sl-color-green-low);
+
+        pre {
+          --shiki-dark-bg: var(--sl-color-green-low) !important;
+          background-color: var(--sl-color-green-low) !important;
+        }
+
+        &::before {
+          content: "+";
+          position: absolute;
+          user-select: none;
+          color: var(--sl-color-green-high);
+          left: 0.6ch;
+          top: 1px;
+        }
+      }
+    }
+
+    [data-slot="before"] {
+      border-right: 1px solid var(--sl-color-divider);
+    }
+  }
+
+  [data-component="mobile"] {
+    & > [data-component="diff-block"]:first-child > div {
+      padding-top: 0.25rem;
+    }
+
+    & > [data-component="diff-block"]:last-child > div {
+      padding-bottom: 0.25rem;
+    }
+
+    & > [data-component="diff-block"] > div {
+      padding: 0 1rem 0 2.2ch;
+
+      &[data-diff-type="removed"] {
+        position: relative;
+        background-color: var(--sl-color-red-low);
+
+        pre {
+          --shiki-dark-bg: var(--sl-color-red-low) !important;
+          background-color: var(--sl-color-red-low) !important;
+        }
+
+        &::before {
+          content: "-";
+          position: absolute;
+          left: 0.6ch;
+          top: 1px;
+          user-select: none;
+          color: var(--sl-color-red-high);
+        }
+      }
+
+      &[data-diff-type="added"] {
+        position: relative;
+        background-color: var(--sl-color-green-low);
+
+        pre {
+          --shiki-dark-bg: var(--sl-color-green-low) !important;
+          background-color: var(--sl-color-green-low) !important;
+        }
+
+        &::before {
+          content: "+";
+          position: absolute;
+          left: 0.6ch;
+          top: 1px;
+          user-select: none;
+          color: var(--sl-color-green-high);
+        }
+      }
+    }
+  }
+
+  @media (max-width: 40rem) {
+    [data-component="desktop"] {
+      display: none;
+    }
+
+    [data-component="mobile"] {
+      display: block;
+    }
+  }
+}

package/src/components/share/content-diff.tsx

@@ -0,0 +1,231 @@
+import { parsePatch } from "diff"
+import { createMemo } from "solid-js"
+import { ContentCode } from "./content-code"
+import styles from "./content-diff.module.css"
+
+type DiffRow = {
+  left: string
+  right: string
+  type: "added" | "removed" | "unchanged" | "modified"
+}
+
+interface Props {
+  diff: string
+  lang?: string
+}
+
+export function ContentDiff(props: Props) {
+  const rows = createMemo(() => {
+    const diffRows: DiffRow[] = []
+
+    try {
+      const patches = parsePatch(props.diff)
+
+      for (const patch of patches) {
+        for (const hunk of patch.hunks) {
+          const lines = hunk.lines
+          let i = 0
+
+          while (i < lines.length) {
+            const line = lines[i]
+            const content = line.slice(1)
+            const prefix = line[0]
+
+            if (prefix === "-") {
+              // Look ahead for consecutive additions to pair with removals
+              const removals: string[] = [content]
+              let j = i + 1
+
+              // Collect all consecutive removals
+              while (j < lines.length && lines[j][0] === "-") {
+                removals.push(lines[j].slice(1))
+                j++
+              }
+
+              // Collect all consecutive additions that follow
+              const additions: string[] = []
+              while (j < lines.length && lines[j][0] === "+") {
+                additions.push(lines[j].slice(1))
+                j++
+              }
+
+              // Pair removals with additions
+              const maxLength = Math.max(removals.length, additions.length)
+              for (let k = 0; k < maxLength; k++) {
+                const hasLeft = k < removals.length
+                const hasRight = k < additions.length
+
+                if (hasLeft && hasRight) {
+                  // Replacement - left is removed, right is added
+                  diffRows.push({
+                    left: removals[k],
+                    right: additions[k],
+                    type: "modified",
+                  })
+                } else if (hasLeft) {
+                  // Pure removal
+                  diffRows.push({
+                    left: removals[k],
+                    right: "",
+                    type: "removed",
+                  })
+                } else if (hasRight) {
+                  // Pure addition - only create if we actually have content
+                  diffRows.push({
+                    left: "",
+                    right: additions[k],
+                    type: "added",
+                  })
+                }
+              }
+
+              i = j
+            } else if (prefix === "+") {
+              // Standalone addition (not paired with removal)
+              diffRows.push({
+                left: "",
+                right: content,
+                type: "added",
+              })
+              i++
+            } else if (prefix === " ") {
+              diffRows.push({
+                left: content === "" ? " " : content,
+                right: content === "" ? " " : content,
+                type: "unchanged",
+              })
+              i++
+            } else {
+              i++
+            }
+          }
+        }
+      }
+    } catch (error) {
+      console.error("Failed to parse patch:", error)
+      return []
+    }
+
+    return diffRows
+  })
+
+  const mobileRows = createMemo(() => {
+    const mobileBlocks: {
+      type: "removed" | "added" | "unchanged"
+      lines: string[]
+    }[] = []
+    const currentRows = rows()
+
+    let i = 0
+    while (i < currentRows.length) {
+      const removedLines: string[] = []
+      const addedLines: string[] = []
+
+      // Collect consecutive modified/removed/added rows
+      while (
+        i < currentRows.length &&
+        (currentRows[i].type === "modified" || currentRows[i].type === "removed" || currentRows[i].type === "added")
+      ) {
+        const row = currentRows[i]
+        if (row.left && (row.type === "removed" || row.type === "modified")) {
+          removedLines.push(row.left)
+        }
+        if (row.right && (row.type === "added" || row.type === "modified")) {
+          addedLines.push(row.right)
+        }
+        i++
+      }
+
+      // Add grouped blocks
+      if (removedLines.length > 0) {
+        mobileBlocks.push({ type: "removed", lines: removedLines })
+      }
+      if (addedLines.length > 0) {
+        mobileBlocks.push({ type: "added", lines: addedLines })
+      }
+
+      // Add unchanged rows as-is
+      if (i < currentRows.length && currentRows[i].type === "unchanged") {
+        mobileBlocks.push({
+          type: "unchanged",
+          lines: [currentRows[i].left],
+        })
+        i++
+      }
+    }
+
+    return mobileBlocks
+  })
+
+  return (
+    <div class={styles.root}>
+      <div data-component="desktop">
+        {rows().map((r) => (
+          <div data-component="diff-row" data-type={r.type}>
+            <div data-slot="before" data-diff-type={r.type === "removed" || r.type === "modified" ? "removed" : ""}>
+              <ContentCode code={r.left} flush lang={props.lang} />
+            </div>
+            <div data-slot="after" data-diff-type={r.type === "added" || r.type === "modified" ? "added" : ""}>
+              <ContentCode code={r.right} lang={props.lang} flush />
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div data-component="mobile">
+        {mobileRows().map((block) => (
+          <div data-component="diff-block" data-type={block.type}>
+            {block.lines.map((line) => (
+              <div data-diff-type={block.type === "removed" ? "removed" : block.type === "added" ? "added" : ""}>
+                <ContentCode code={line} lang={props.lang} flush />
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// const testDiff = `--- combined_before.txt	2025-06-24 16:38:08
+// +++ combined_after.txt	2025-06-24 16:38:12
+// @@ -1,21 +1,25 @@
+//  unchanged line
+// -deleted line
+// -old content
+// +added line
+// +new content
+//
+// -removed empty line below
+// +added empty line above
+//
+// -	tab indented
+// -trailing spaces
+// -very long line that will definitely wrap in most editors and cause potential alignment issues when displayed in a two column diff view
+// -unicode content: 🚀 ✨ 中文
+// -mixed	content with	tabs and spaces
+// +    space indented
+// +no trailing spaces
+// +short line
+// +very long replacement line that will also wrap and test how the diff viewer handles long line additions after short line removals
+// +different unicode: 🎉 💻 日本語
+// +normalized content with consistent spacing
+// +newline to content
+//
+// -content to remove
+// -whitespace only:
+// -multiple
+// -consecutive
+// -deletions
+// -single deletion
+// +
+// +single addition
+// +first addition
+// +second addition
+// +third addition
+//  line before addition
+// +first added line
+// +
+// +third added line
+//  line after addition
+//  final unchanged line`