docs(spec): archive web chat codemirror resource projection

Author: Gaubee

…irror-resource-projection/.openspec.yaml …irror-resource-projection/.openspec.yamlopenspec/changes/web-chat-codemirror-resource-projection/.openspec.yaml renamed to openspec/changes/archive/2026-06-01-web-chat-codemirror-resource-projection/.openspec.yaml openspec/changes/web-chat-codemirror-resource-projection/.openspec.yaml renamed to openspec/changes/archive/2026-06-01-web-chat-codemirror-resource-projection/.openspec.yaml

@@ -109,6 +109,8 @@
 - **THEN** the row label stays the reference label
 - **AND** the row detail prefers the image or file name over a generic resource kind description
 
+## ADDED Requirements
+
 ### Requirement: Web chat view SHALL expose CodeMirror mode ownership for composer and transcript
 
 The shared WebChat surface SHALL treat the composer and message bubble as two explicit CodeMirror modes over the same Markdown resource grammar. The composer mode SHALL be writable and preserve normal editing behavior. The bubble mode SHALL be readonly and may hide structural source details such as resource footnote definitions as presentation-only projection.

…mirror-resource-projection/plans/plan.md …mirror-resource-projection/plans/plan.mdopenspec/changes/web-chat-codemirror-resource-projection/plans/plan.md renamed to openspec/changes/archive/2026-06-01-web-chat-codemirror-resource-projection/plans/plan.md openspec/changes/web-chat-codemirror-resource-projection/plans/plan.md renamed to openspec/changes/archive/2026-06-01-web-chat-codemirror-resource-projection/plans/plan.md

@@ -65,6 +65,35 @@ Sent-message resource presentation SHALL be driven from the same serialized sour
 - **THEN** the raw source still contains both the inline token and its Markdown footnote definition
 - **AND** hiding footnote definition lines in preview mode remains a view projection rather than a storage mutation
 
+#### Scenario: Resource token widgets are shared across writable and readonly CodeMirror surfaces
+
+- **WHEN** an inline resource token resolves in the composer or in a sent message bubble
+- **THEN** both surfaces use one shared CodeMirror resource-token widget family
+- **AND** the widget family renders comment, file, and image references through one shared icon-with-number visual atom
+- **AND** the visual atom accepts ink/surface/border variables without requiring token, card, or bar-specific drawing forks
+- **AND** the visual atom draws its visible internals as two stacked SVG layers: base icon layer plus info layer
+- **AND** the base icon layer uses the official lucide resource glyphs rather than hand-drawn lookalike paths
+- **AND** the stacked real SVG layers, including the lucide-generated base SVG and the local info SVG, are owned by a shared named grid area instead of absolute-position overlay stitching or anonymous grid-line coordinates
+- **AND** the info SVG layer stacks above the base icon SVG layer by explicit z-index ordering
+- **AND** comment, file, and image base glyphs share one opacity rule unless a future spec names a separate visual state
+- **AND** visual differences are mode policy differences rather than separate parsing implementations
+- **AND** Framework7 resource preview activation receives the same `WebChatResourceReference` from either surface
+
+#### Scenario: Resource bar is a no-scroll icon strip by default
+
+- **GIVEN** a sent message bubble contains several resolved resources
+- **WHEN** the in-bubble resource bar renders those resources
+- **THEN** each child owns a stable icon tile size
+- **AND** the bar may wrap into additional rows when space is constrained
+- **AND** the bar does not show uncontrolled horizontal or vertical scrollbars in normal desktop or iPhone 14 message widths
+
+#### Scenario: Writable composer projection does not hide editing truth
+
+- **WHEN** the operator edits a draft containing resource tokens
+- **THEN** CodeMirror decorations may make the token look like a resource affordance
+- **AND** the actual Markdown token text remains the editable draft truth
+- **AND** the composer does not hide footnote definition source as if it were a readonly transcript bubble
+
 ### Requirement: Resource activation SHALL be parity across token and tile
 
 Resource detail behavior SHALL be keyed by the resolved resource itself, not by where the operator clicked it from.

…ource-projection/review/self-review.html …ource-projection/review/self-review.htmlopenspec/changes/web-chat-codemirror-resource-projection/review/self-review.html renamed to openspec/changes/archive/2026-06-01-web-chat-codemirror-resource-projection/review/self-review.html openspec/changes/web-chat-codemirror-resource-projection/review/self-review.html renamed to openspec/changes/archive/2026-06-01-web-chat-codemirror-resource-projection/review/self-review.html

@@ -389,3 +389,126 @@ The shared chat package SHALL use `viewKey` as the UI merge and render identity
 - **THEN** `web-chat-view` treats the token as unresolved source text or an unresolved resource reference
 - **AND** it does not recover the comment by reading `metadata.webChatCommentResources`
 - **AND** the failure remains visible to tests and source inspection as a serialization bug
+
+#### Scenario: Composer and bubble share one resource token projection law
+
+- **GIVEN** the writable composer contains an inline resource token such as `[^Comment 1]`
+- **AND** the pending resource list contains the matching comment resource
+- **WHEN** the composer CodeMirror renders the draft
+- **THEN** the token is decorated with the shared icon-with-number resource affordance
+- **AND** the underlying draft text remains editable Markdown
+- **AND** submitting still serializes the final message as raw Markdown content without WebChat resource metadata
+
+#### Scenario: Composer resource completion is scoped to the current draft message
+
+- **GIVEN** the transcript already contains sent messages with Markdown resource footnotes such as `[^Image 1]` and `[^File 1]`
+- **AND** the current composer draft has its own pending resources
+- **WHEN** the operator opens `@` or `^` completion in the composer
+- **THEN** completion suggestions include only current composer resources and host-provided composer-scoped resources
+- **AND** resources reconstructed from other transcript messages are not offered
+- **AND** `Comment N`, `Image N`, and `File N` numbering is local to the current message rather than global across the room
+
+#### Scenario: Composer upload opens the resource preview immediately
+
+- **GIVEN** the composer accepts a newly uploaded image or file
+- **WHEN** the pending asset is admitted into the current draft resource list
+- **THEN** the same resource preview layer used by clicking the resource rail icon opens automatically for that newly accepted resource
+- **AND** duplicate or rejected files do not reopen a stale preview
+
+#### Scenario: Resource icon number is normalized for all token surfaces
+
+- **GIVEN** a resource label or token text resolves to resource number `1` through `9`
+- **WHEN** the composer token, readonly bubble token, or resource card renders that resource
+- **THEN** the visible icon number is the resolved single digit
+- **AND** a resource number outside `1` through `9` renders `*`
+- **AND** comment, file, and image variants are rendered by the same icon-with-number component family
+
+#### Scenario: Resource icon atom supports visual theming and browser-min-font-safe scaling
+
+- **GIVEN** the shared resource icon atom is rendered with different ink and surface CSS variables
+- **WHEN** image, comment, and file variants render in the walkthrough surface
+- **THEN** the icon glyph, number, and extension badge remain legible across those colors
+- **AND** the image glyph and image number use the same ink color
+- **AND** small numeric and extension text uses `font-size: 1rem` with transform scale instead of shrinking only through `font-size`
+
+#### Scenario: Resource icon atom draws visible marks through layered SVG
+
+- **GIVEN** the shared resource icon atom renders a comment, file, or image variant
+- **WHEN** the visible icon internals are constructed
+- **THEN** the base resource glyph is drawn in a base SVG layer using the official lucide glyph for that kind
+- **AND** the resource number, badge, and extension marks are drawn in a separate info SVG layer
+- **AND** the two SVG layers share one stable viewBox coordinate system
+- **AND** the two real SVG elements, including the lucide-generated base SVG and the local info SVG, are placed into the same named grid area by the component layout rather than stitched together with absolute positioning or anonymous grid-line coordinates
+- **AND** the info SVG layer has an explicit stacking order above the base icon SVG layer
+- **AND** base glyph opacity is controlled by one shared component law instead of kind-specific opacity exceptions
+- **AND** token, card, preview, and resource bar surfaces do not add their own visible HTML overlays for the resource number or extension
+
+#### Scenario: Resource icon container protects SVG layers from rounded clipping
+
+- **GIVEN** the shared resource icon atom has a border radius and hidden overflow
+- **WHEN** the base and info SVG layers render inside the icon container
+- **THEN** the container provides safe padding derived from the effective corner radius
+- **AND** the padding equals `min(border-radius, width, height) / 4`
+- **AND** the base and info SVG layers remain same-size grid layers inside the padded content box
+
+#### Scenario: Resource icon atom follows user-directed optical alignment
+
+- **GIVEN** the shared resource icon atom renders image, comment, and file variants
+- **WHEN** the info layer draws each variant-specific mark
+- **THEN** the image number is centered inside its circular badge
+- **AND** user-tuned image badge SVG coordinates and radius are preserved as component attributes
+- **AND** the image number badge stroke uses currentColor with a thin `0.5` stroke width
+- **AND** the comment variant uses the official `MessageSquareDot` base glyph with a smaller centered number
+- **AND** the file variant offsets and scales the info layer so the file number remains centered while the extension badge sits at the bottom-right corner
+- **AND** user-tuned comment/file SVG coordinates are preserved as component attributes
+- **AND** the file extension badge stroke uses currentColor with a thin `0.5` stroke width
+- **AND** the file extension still uses scaled `1rem` text rather than browser-minimum font-size dependency
+
+#### Scenario: File resource icon uses extension as a badge
+
+- **GIVEN** a file resource has a resolved extension such as `PDF`
+- **WHEN** the file resource icon renders
+- **THEN** the file number is centered inside the file icon
+- **AND** the extension renders as a bottom-right corner badge
+- **AND** inline and tile sizes share the same badge SVG coordinate law rather than applying an inline-only badge translation
+- **AND** the file info SVG layer is not resized or repositioned as a whole layer
+- **AND** any file-specific optical scale or offset is folded into internal SVG coordinates and text scale variables
+- **AND** the extension text uses scaled `1rem` text rather than a browser-minimum font-size dependency
+
+#### Scenario: Readonly bubble keeps sent projection semantics
+
+- **GIVEN** a sent message contains inline resource tokens and matching Markdown footnote definitions
+- **WHEN** the readonly bubble CodeMirror renders the message
+- **THEN** inline tokens use the same icon-with-number resource affordance family
+- **AND** footnote definition lines collapse out of normal reading mode
+- **AND** the in-bubble resource bar is rendered from the same resolved resources
+- **AND** the in-bubble resource bar controls child tile dimensions without uncontrolled horizontal or vertical scrollbars
+
+#### Scenario: Resource preview and completion copy uses reference names and file names
+
+- **GIVEN** an image or file resource has a reference label such as `Image 1` or `File 1`
+- **AND** the resource also has an extension, MIME type, and file name
+- **WHEN** the preview layer renders its header
+- **THEN** the header eyebrow shows the reference label instead of the extension or MIME type
+- **AND** MIME and size details stay in the metadata line
+- **WHEN** the composer completion panel renders that resource
+- **THEN** the row label stays the reference label
+- **AND** the row detail prefers the image or file name over a generic resource kind description
+
+### Requirement: Web chat view SHALL expose CodeMirror mode ownership for composer and transcript
+
+The shared WebChat surface SHALL treat the composer and message bubble as two explicit CodeMirror modes over the same Markdown resource grammar. The composer mode SHALL be writable and preserve normal editing behavior. The bubble mode SHALL be readonly and may hide structural source details such as resource footnote definitions as presentation-only projection.
+
+#### Scenario: Composer is writable CodeMirror
+
+- **WHEN** the WebChat composer mounts in a browser runtime
+- **THEN** the draft surface is a CodeMirror editor
+- **AND** editing the document updates the composer draft
+- **AND** the editor is not configured with readonly or non-editable CodeMirror facets
+
+#### Scenario: Bubble is readonly CodeMirror
+
+- **WHEN** a message bubble mounts
+- **THEN** the content surface is a CodeMirror editor
+- **AND** the editor is configured with readonly state and non-editable DOM behavior
+- **AND** resource-token projection remains interactive for opening resource details