wip

.vscode/settings.json

@@ -33,5 +33,6 @@
   },
   "opencodegraph.providers": {
     // "https://sourcegraph.test:3443/.api/opencodegraph": true
-  }
+  },
+  "opencodegraph.enable": true
 }

README.md

@@ -41,3 +41,4 @@ _Status: alpha_
 
 - item.ui and item.ai
 - add support for resolving annotations (because )
+- classnames -> clsx for consistency

client/codemirror/README.md

@@ -61,17 +61,17 @@ Otherwise, set up the extension manually. If you're using React, you can get UI
 ```tsx
 import type { Extension } from '@codemirror/state'
 import { openCodeGraphData, showOpenCodeGraphDecorations } from '@opencodegraph/codemirror-extension'
-import { IndentationWrapper, ItemChipList } from '@opencodegraph/ui-react'
+import { ChipList, IndentationWrapper } from '@opencodegraph/ui-react'
 
 const ocgExtension: Extension = [
   openCodeGraphData(annotations),
   showOpenCodeGraphDecorations({
     visibility: true,
-    createDecoration(container, { indent, items }) {
+    createDecoration(container, { indent, annotations }) {
       const root = createRoot(container)
       root.render(
         <IndentationWrapper indent={indent}>
-          <ItemChipList items={items} chipClassName="ocg-chip" popoverClassName="ocg-chip-popover" />
+          <ChipList annotations={annotations} chipClassName="ocg-chip" popoverClassName="ocg-chip-popover" />
         </IndentationWrapper>
       )
       return {

client/codemirror/demo/demo.ts

@@ -32,19 +32,19 @@ const ocgExtension: Extension = [
     openCodeGraphData(annotations),
     showOpenCodeGraphDecorations({
         visibility: true,
-        createDecoration(container, { annotations: items }) {
+        createDecoration(container, { annotations }) {
             const div = document.createElement('div')
             div.style.display = 'flex'
             div.style.gap = '1rem'
 
-            for (const item of items) {
-                const el = document.createElement(item.url ? 'a' : 'span')
-                el.innerText = item.title
-                if (item.detail) {
-                    el.title = item.detail
+            for (const ann of annotations) {
+                const el = document.createElement(ann.url ? 'a' : 'span')
+                el.innerText = ann.title ?? 'Untitled'
+                if (ann.ui?.detail) {
+                    el.title = ann.ui?.detail
                 }
-                if (item.url && el instanceof HTMLAnchorElement) {
-                    el.href = item.url
+                if (ann.url && el instanceof HTMLAnchorElement) {
+                    el.href = ann.url
                     el.style.textDecoration = 'none'
                     el.style.fontFamily = 'system-ui, sans-serif'
                     el.style.backgroundColor = '#ffffff22'

client/codemirror/src/itemBlockWidget.ts

@@ -49,22 +49,22 @@ function computeDecorations(
     const annotationsByLine: { line: number; annotations: Annotation[] }[] = []
     for (const ann of annotations) {
         let cur = annotationsByLine.at(-1)
-        if (!cur || cur.line !== ann.range.start.line) {
-            cur = { line: ann.range.start.line, annotations: [] }
+        const startLine = ann.range?.start.line ?? 0
+        if (!cur || cur.line !== startLine) {
+            cur = { line: startLine, annotations: [] }
             annotationsByLine.push(cur)
         }
         cur.annotations.push(ann)
     }
 
     for (const { line: lineNum, annotations } of annotationsByLine) {
-        const lineItems = annotations.map(ann => ann.item)
         const line = state.doc.line(lineNum + 1)
         const indent = line.text.match(/^\s*/)?.[0]
         builder.add(
             line.from,
             line.from,
             Decoration.widget({
-                widget: new BlockWidget(lineItems, indent, config),
+                widget: new BlockWidget(annotations, indent, config),
             })
         )
     }

client/web-playground/src/demo/settings.ts

@@ -58,7 +58,7 @@ async function getProviders(): Promise<Record<string, ProviderSettings | boolean
     })
     for (const [path, url] of Object.entries(providerModules)) {
         const providerUri = new URL(await url(), import.meta.url).toString()
-        const settings = providerSettings[path] ?? true
+        const settings = providerSettings[path] ?? false // TODO(sqs): back to true
         delete providerSettings[path]
         providerSettings[providerUri] = settings
     }

lib/client/src/client/testdata/simple.js

@@ -3,7 +3,7 @@ export default {
   capabilities: () => ({}),
   annotations: () => [
     {
-      item: { title: 'A' },
+      title: 'A',
       range: { start: { line: 1, character: 2 }, end: { line: 3, character: 4 } },
     },
   ],

lib/client/src/providerClient/createProviderClient.test.ts

@@ -17,7 +17,7 @@ describe('createProviderClient', () => {
             await pc.annotations({ file: 'file:///foo', content: 'A\nB\nC\nD' }, settings)
         ).toStrictEqual<AnnotationsResult | null>([
             {
-                item: { title: 'ABC' },
+                title: 'ABC',
                 range: { start: { line: 1, character: 2 }, end: { line: 3, character: 4 } },
             },
         ])

lib/client/src/providerClient/testdata/capabilitiesThrow.js

@@ -4,6 +4,6 @@ export default {
     throw new Error('capabilitiesThrow')
   },
   annotations() {
-    return { items: [], annotations: [] }
+    return []
   },
 }

lib/client/src/providerClient/testdata/provider.js

@@ -3,7 +3,7 @@ export default {
   capabilities: () => ({ selector: [{ path: 'foo' }] }),
   annotations: (_params, settings) => [
     {
-      item: { title: settings.myItemTitle },
+      title: settings.myItemTitle,
       range: { start: { line: 1, character: 2 }, end: { line: 3, character: 4 } },
     },
   ],

lib/client/src/providerClient/testdata/transportReuse.js

@@ -8,6 +8,6 @@ export default {
   },
   annotations() {
     global.__test__transportReuseInfo.annotationsCalls++
-    return { items: [], annotations: [] }
+    return []
   },
 }

lib/ui-react/src/chip/Chip.story.tsx

@@ -20,31 +20,29 @@ type Story = StoryObj<typeof Chip>
 
 export const Text: Story = {
     args: {
-        item: { ...FIXTURE_ANN },
+        annotation: { ...FIXTURE_ANN } satisfies Annotation,
     },
 }
 
 export const Link: Story = {
     args: {
-        item: { ...FIXTURE_ANN, url: 'https://example.com' },
+        annotation: { ...FIXTURE_ANN, url: 'https://example.com' } satisfies Annotation,
     },
 }
 
 export const Detail: Story = {
     args: {
-        item: { ...FIXTURE_ANN, detail: 'View doc page' },
+        annotation: { ...FIXTURE_ANN, ui: { detail: 'View doc page' } } satisfies Annotation,
     },
 }
 
 export const Image: Story = {
     args: {
-        item: {
+        annotation: {
             ...FIXTURE_ANN,
-            image: {
-                url: 'https://lh3.googleusercontent.com/d_S5gxu_S1P6NR1gXeMthZeBzkrQMHdI5uvXrpn3nfJuXpCjlqhLQKH_hbOxTHxFhp5WugVOEcl4WDrv9rmKBDOMExhKU5KmmLFQVg',
-                width: 512,
-                height: 300,
+            ui: {
+                detail: '<img src="https://lh3.googleusercontent.com/d_S5gxu_S1P6NR1gXeMthZeBzkrQMHdI5uvXrpn3nfJuXpCjlqhLQKH_hbOxTHxFhp5WugVOEcl4WDrv9rmKBDOMExhKU5KmmLFQVg" width=512 height=300 />',
             },
-        },
+        } satisfies Annotation,
     },
 }

lib/ui-react/src/chip/Chip.tsx

@@ -1,17 +1,17 @@
 import { type Annotation } from '@opencodegraph/schema'
 import classNames from 'classnames'
-import React, { useCallback, useRef, useState } from 'react'
+import { useCallback, useRef, useState, type FunctionComponent } from 'react'
 import styles from './Chip.module.css'
 import { Popover } from './Popover'
 
 /**
  * A single OpenCodeGraph annotation, displayed as a "chip".
  */
-export const Chip: React.FunctionComponent<{
-    ann: Annotation
+export const Chip: FunctionComponent<{
+    annotation: Annotation
     className?: string
     popoverClassName?: string
-}> = ({ ann, className, popoverClassName }) => {
+}> = ({ annotation: ann, className, popoverClassName }) => {
     const hasDetail = Boolean(ann.ui?.detail)
 
     const [popoverVisible, setPopoverVisible] = useState(false)
@@ -43,15 +43,20 @@ export const Chip: React.FunctionComponent<{
 /**
  * A list of OpenCodeGraph chips.
  */
-export const ChipList: React.FunctionComponent<{
+export const ChipList: FunctionComponent<{
     annotations: Annotation[]
     className?: string
     chipClassName?: string
     popoverClassName?: string
 }> = ({ annotations, className, chipClassName, popoverClassName }) => (
     <div className={classNames(styles.list, className)}>
-        {annotations.map((ann, i) => (
-            <Chip key={ann.url ?? i} ann={ann} className={chipClassName} popoverClassName={popoverClassName} />
+        {annotations.map((annotation, i) => (
+            <Chip
+                key={annotation.url ?? i}
+                annotation={annotation}
+                className={chipClassName}
+                popoverClassName={popoverClassName}
+            />
         ))}
     </div>
 )

package.json

@@ -31,11 +31,11 @@
     "@sourcegraph/eslint-config": "0.37.1",
     "@sourcegraph/prettierrc": "^3.0.3",
     "@sourcegraph/tsconfig": "^4.0.1",
-    "@storybook/addon-essentials": "^7.0.26",
-    "@storybook/html": "^7.6.5",
-    "@storybook/html-vite": "^7.6.5",
-    "@storybook/react": "^7.0.26",
-    "@storybook/react-vite": "^7.0.26",
+    "@storybook/addon-essentials": "^7.6.6",
+    "@storybook/html": "^7.6.6",
+    "@storybook/html-vite": "^7.6.6",
+    "@storybook/react": "^7.6.6",
+    "@storybook/react-vite": "^7.6.6",
     "@types/js-yaml": "^4.0.9",
     "@types/node": "^20",
     "@types/prettier": "2.7.3",