From 8649995afa9d8645bae9d68d10ac81d5c36f348b Mon Sep 17 00:00:00 2001
From: Adam Obuchowicz <adam.obuchowicz@enso.org>
Date: Tue, 4 Mar 2025 15:57:54 +0100
Subject: [PATCH 1/7] Literal component

---
 .../components/ComponentBrowser.vue           | 65 +++++++++++--------
 .../ComponentBrowser/ComponentList.vue        | 35 ++++++++--
 .../components/ComponentBrowser/component.ts  |  4 +-
 .../components/ComponentBrowser/input.ts      | 25 +++++--
 app/ydoc-shared/src/ast/tree.ts               | 10 +++
 5 files changed, 96 insertions(+), 43 deletions(-)

diff --git a/app/gui/src/project-view/components/ComponentBrowser.vue b/app/gui/src/project-view/components/ComponentBrowser.vue
index f65f09d5a6ae..2e96447f0194 100644
--- a/app/gui/src/project-view/components/ComponentBrowser.vue
+++ b/app/gui/src/project-view/components/ComponentBrowser.vue
@@ -3,7 +3,6 @@ import { componentBrowserBindings, listBindings } from '@/bindings'
 import { type Component } from '@/components/ComponentBrowser/component'
 import ComponentEditor from '@/components/ComponentBrowser/ComponentEditor.vue'
 import ComponentList from '@/components/ComponentBrowser/ComponentList.vue'
-import { Filtering } from '@/components/ComponentBrowser/filtering'
 import { useComponentBrowserInput, type Usage } from '@/components/ComponentBrowser/input'
 import GraphVisualization from '@/components/GraphEditor/GraphVisualization.vue'
 import SvgButton from '@/components/SvgButton.vue'
@@ -15,7 +14,6 @@ import { injectNodeColors } from '@/providers/graphNodeColors'
 import { injectInteractionHandler, type Interaction } from '@/providers/interactionHandler'
 import { useGraphStore } from '@/stores/graph'
 import type { RequiredImport } from '@/stores/graph/imports'
-import { useProjectStore } from '@/stores/project'
 import { injectProjectNames } from '@/stores/projectNames'
 import { useSuggestionDbStore } from '@/stores/suggestionDatabase'
 import { type Typename } from '@/stores/suggestionDatabase/entry'
@@ -29,6 +27,8 @@ import { debouncedGetter } from '@/util/reactivity'
 import type { ComponentInstance } from 'vue'
 import { computed, onMounted, onUnmounted, ref, toValue, watch, watchEffect } from 'vue'
 import type { SuggestionId } from 'ydoc-shared/languageServerTypes/suggestions'
+import { Range } from 'ydoc-shared/util/data/range'
+import { Ok } from 'ydoc-shared/util/data/result'
 import type { VisualizationIdentifier } from 'ydoc-shared/yjsModel'
 
 // Difference in position between the component browser and a node for the input of the component browser to
@@ -47,7 +47,6 @@ const EDGE_Y_OFFSET = -8
 
 const cssComponentEditorPadding = `${COMPONENT_EDITOR_PADDING}px`
 
-const projectStore = useProjectStore()
 const suggestionDbStore = useSuggestionDbStore()
 const graphStore = useGraphStore()
 const interaction = injectInteractionHandler()
@@ -177,15 +176,6 @@ const selectedSuggestion = computed(() => {
 
 const input = useComponentBrowserInput()
 
-const currentFiltering = computed(() => {
-  if (input.mode.mode === 'componentBrowsing') {
-    const currentModule = projectStore.moduleProjectPath
-    return new Filtering(input.mode.filter, currentModule?.ok ? currentModule.value : undefined)
-  } else {
-    return undefined
-  }
-})
-
 onUnmounted(() => {
   graphStore.cbEditedEdge = undefined
 })
@@ -285,20 +275,37 @@ watch(
 
 // === Accepting Entry ===
 
-function acceptSuggestion(component: Opt<Component> = null) {
-  const suggestionId = component?.suggestionId ?? selectedSuggestionId.value
-  if (suggestionId == null) return acceptInput()
-  const result = input.applySuggestion(suggestionId)
+function applyComponent(component: Opt<Component> = null) {
+  component ??= selected.value
+  if (component == null) {
+    input.switchToCodeEditMode()
+    return Ok()
+  }
+  if (component.suggestionId) {
+    return input.applySuggestion(component.suggestionId)
+  } else {
+    // Component without suggestion database entry, for example "literal" component.
+    input.content = { text: component.label, selection: Range.emptyAt(component.label.length) }
+    input.switchToCodeEditMode()
+    return Ok()
+  }
+}
+
+function acceptComponent(component: Opt<Component> = null) {
+  const result = applyComponent(component)
   if (result.ok) acceptInput()
   else result.error.log('Cannot apply suggestion')
 }
 
-function applySuggestion(component: Opt<Component> = null) {
-  const suggestionId = component?.suggestionId ?? selectedSuggestionId.value
-  if (suggestionId == null) return input.switchToCodeEditMode()
-  const result = input.applySuggestion(suggestionId)
-  if (!result.ok) result.error.log('Cannot apply suggestion')
-}
+// function editComponent(component: Opt<Component> = null) {
+//   const result = applyComponentToInput(component)
+//   if (result.ok) acceptInput()
+//   else result.error.log('Cannot apply suggestion')
+//   const suggestionId = component?.suggestionId ?? selectedSuggestionId.value
+//   if (suggestionId == null) return input.switchToCodeEditMode()
+//   const result = input.applySuggestion(suggestionId)
+//   if (!result.ok) result.error.log('Cannot apply suggestion')
+// }
 
 function acceptInput() {
   const appliedReturnType =
@@ -314,11 +321,14 @@ function acceptInput() {
 const outsideComponentBrowsing = computed(() => input.mode.mode != 'componentBrowsing')
 const actions = registerHandlers({
   'componentBrowser.editSuggestion': {
-    action: applySuggestion,
+    action: () => {
+      const result = applyComponent()
+      if (!result.ok) result.error.log('Cannot apply component')
+    },
     disabled: outsideComponentBrowsing,
   },
   'componentBrowser.acceptSuggestion': {
-    action: acceptSuggestion,
+    action: acceptComponent,
     disabled: outsideComponentBrowsing,
   },
   'componentBrowser.acceptInputAsCode': {
@@ -427,10 +437,11 @@ const listsHandler = listBindings.handler({
       />
     </div>
     <ComponentList
-      v-if="input.mode.mode === 'componentBrowsing' && currentFiltering"
+      v-if="input.mode.mode === 'componentBrowsing'"
       ref="componentList"
-      :filtering="currentFiltering"
-      @acceptSuggestion="acceptSuggestion($event)"
+      :filter="input.mode.filter"
+      :literal="input.mode.literal"
+      @acceptSuggestion="acceptComponent($event)"
       @update:selectedComponent="selected = $event"
     />
   </div>
diff --git a/app/gui/src/project-view/components/ComponentBrowser/ComponentList.vue b/app/gui/src/project-view/components/ComponentBrowser/ComponentList.vue
index 8364f845b2bb..15d6d7dbabfc 100644
--- a/app/gui/src/project-view/components/ComponentBrowser/ComponentList.vue
+++ b/app/gui/src/project-view/components/ComponentBrowser/ComponentList.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
-import { makeComponentList, type Component } from '@/components/ComponentBrowser/component'
+import { makeComponentLists, type Component } from '@/components/ComponentBrowser/component'
 import ComponentEntry from '@/components/ComponentBrowser/ComponentEntry.vue'
-import type { Filtering } from '@/components/ComponentBrowser/filtering'
+import { Filter, Filtering } from '@/components/ComponentBrowser/filtering'
 import SvgIcon from '@/components/SvgIcon.vue'
 import VirtualizedList from '@/components/VirtualizedList.vue'
 import { groupColorStyle } from '@/composables/nodeColors'
+import { useProjectStore } from '@/stores/project'
 import { useSuggestionDbStore } from '@/stores/suggestionDatabase'
+import { Ast } from '@/util/ast'
 import { tryGetIndex } from '@/util/data/array'
-import { computed, ref, toRef, watch } from 'vue'
+import * as map from 'lib0/map'
+import { computed, ref, watch } from 'vue'
 import type { ComponentExposed } from 'vue-component-type-helpers'
 
 const ITEM_SIZE = 24
@@ -15,13 +18,15 @@ const SCROLL_TO_SELECTION_MARGIN = ITEM_SIZE / 2
 const MOUSE_SELECTION_DEBOUNCE = 200
 
 const props = defineProps<{
-  filtering: Filtering
+  filter: Filter
+  literal?: Ast.TextLiteral | Ast.NumericLiteral | undefined
 }>()
 const emit = defineEmits<{
   acceptSuggestion: [suggestion: Component]
   'update:selectedComponent': [selected: Component | null]
 }>()
 
+const projectStore = useProjectStore()
 const root = ref<HTMLElement>()
 const groupsPanel = ref<ComponentExposed<typeof VirtualizedList>>()
 const componentsPanel = ref<ComponentExposed<typeof VirtualizedList>>()
@@ -42,18 +47,34 @@ const displayedSelectedComponentIndex = computed({
   },
 })
 
-watch(toRef(props, 'filtering'), () => (displayedSelectedComponentIndex.value = 0))
+const filtering = computed(() => {
+  const currentModule = projectStore.moduleProjectPath
+  return new Filtering(props.filter, currentModule?.ok ? currentModule.value : undefined)
+})
+
+watch(filtering, () => (displayedSelectedComponentIndex.value = 0))
 watch(selectedGroupIndex, () => (selectedComponentIndex.value = 0))
 
 const suggestionDbStore = useSuggestionDbStore()
-const components = computed(() => makeComponentList(suggestionDbStore.entries, props.filtering))
+const components = computed(() => {
+  const lists = makeComponentLists(suggestionDbStore.entries, filtering.value)
+  if (props.literal != null) {
+    map
+      .setIfUndefined(lists, 'all', (): Component[] => [])
+      .unshift({
+        label: props.literal.code(),
+        icon: props.literal instanceof Ast.TextLiteral ? 'text_input' : 'input_number',
+      })
+  }
+  return lists
+})
 const currentGroups = computed(() => {
   return Array.from(components.value.entries(), ([id, components]) => ({
     id,
     ...(id === 'all' ? { name: 'all' }
     : id === 'suggestions' ? { name: 'suggestions' }
     : (suggestionDbStore.groups[id] ?? { name: 'unknown' })),
-    ...(props.filtering.pattern != null ? { displayedNumber: components.length } : {}),
+    ...(filtering.value?.pattern != null ? { displayedNumber: components.length } : {}),
   }))
 })
 const displayedGroupId = computed(() =>
diff --git a/app/gui/src/project-view/components/ComponentBrowser/component.ts b/app/gui/src/project-view/components/ComponentBrowser/component.ts
index f33d89784515..cd7b8e5ee139 100644
--- a/app/gui/src/project-view/components/ComponentBrowser/component.ts
+++ b/app/gui/src/project-view/components/ComponentBrowser/component.ts
@@ -28,7 +28,7 @@ interface ComponentLabel {
 
 /** A model of component suggestion displayed in the Component Browser. */
 export interface Component extends ComponentLabel {
-  suggestionId: SuggestionId
+  suggestionId?: SuggestionId
   icon: Icon
   group?: number | undefined
 }
@@ -112,7 +112,7 @@ export function makeComponent({ id, entry, match }: ComponentInfo): Component {
 }
 
 /** Create {@link Component} list for each displayed group from filtered suggestions. */
-export function makeComponentList(
+export function makeComponentLists(
   db: SuggestionDb,
   filtering: Filtering,
 ): Map<GroupId, Component[]> {
diff --git a/app/gui/src/project-view/components/ComponentBrowser/input.ts b/app/gui/src/project-view/components/ComponentBrowser/input.ts
index 01bb0237d60f..01e988610068 100644
--- a/app/gui/src/project-view/components/ComponentBrowser/input.ts
+++ b/app/gui/src/project-view/components/ComponentBrowser/input.ts
@@ -9,7 +9,7 @@ import {
   type SuggestionEntry,
   type SuggestionId,
 } from '@/stores/suggestionDatabase/entry'
-import { isIdentifier, type AstId, type Identifier } from '@/util/ast/abstract'
+import { Ast } from '@/util/ast'
 import { Err, Ok, type Result } from '@/util/data/result'
 import { type ProjectPath } from '@/util/projectPath'
 import { qnJoin, qnLastSegment } from '@/util/qualifiedName'
@@ -19,7 +19,7 @@ import { Range } from 'ydoc-shared/util/data/range'
 
 /** Information how the component browser is used, needed for proper input initializing. */
 export type Usage =
-  | { type: 'newNode'; sourcePort?: AstId | undefined }
+  | { type: 'newNode'; sourcePort?: Ast.AstId | undefined }
   | { type: 'editNode'; node: NodeId; cursorPos: number }
 
 /**
@@ -32,6 +32,7 @@ export type ComponentBrowserMode =
   | {
       mode: 'componentBrowsing'
       filter: Filter
+      literal?: Ast.TextLiteral | Ast.NumericLiteral
     }
   | {
       mode: 'codeEditing'
@@ -55,7 +56,7 @@ export function useComponentBrowserInput(
   const imports = shallowRef<RequiredImport[]>([])
   const processingAIPrompt = ref(false)
   const toastError = useToast.error()
-  const sourceNodeIdentifier = ref<Identifier>()
+  const sourceNodeIdentifier = ref<Ast.Identifier>()
   const switchedToCodeMode = ref<{ appliedSuggestion?: SuggestionEntry }>()
 
   // Text Model to being edited externally (by user).
@@ -110,12 +111,20 @@ export function useComponentBrowserInput(
         : {}),
       }
     } else {
+      let literal: Ast.MutableTextLiteral | Ast.NumericLiteral | undefined =
+        Ast.TextLiteral.tryParse(text.value)
+      if (literal == null) {
+        literal = Ast.NumericLiteral.tryParse(text.value)
+      } else {
+        literal.fixBoundaries()
+      }
       return {
         mode: 'componentBrowsing',
         filter: {
           pattern: text.value,
           ...(sourceNodeType.value != null ? { selfArg: sourceNodeType.value } : {}),
         },
+        ...(literal ? { literal } : {}),
       }
     }
   })
@@ -172,7 +181,7 @@ export function useComponentBrowserInput(
             qnJoin(
               owner.path ? qnLastSegment(owner.path)
               : owner.project ? qnLastSegment(owner.project)
-              : ('Main' as Identifier),
+              : ('Main' as Ast.Identifier),
               entry.name,
             )
           : entry.name) + ' ',
@@ -192,7 +201,9 @@ export function useComponentBrowserInput(
       const alreadyAdded = finalImports.some((existing) => requiredImportEquals(existing, anImport))
       const importedIdent =
         anImport.kind == 'Qualified' ?
-          qnLastSegment(anImport.module.path ?? anImport.module.project ?? ('Main' as Identifier))
+          qnLastSegment(
+            anImport.module.path ?? anImport.module.project ?? ('Main' as Ast.Identifier),
+          )
         : anImport.import
       const noLongerNeeded = !text.value.includes(importedIdent)
       if (!noLongerNeeded && !alreadyAdded) {
@@ -207,7 +218,7 @@ export function useComponentBrowserInput(
       case 'newNode':
         if (usage.sourcePort) {
           const ident = graphDb.getOutputPortIdentifier(usage.sourcePort)
-          sourceNodeIdentifier.value = ident != null && isIdentifier(ident) ? ident : undefined
+          sourceNodeIdentifier.value = ident != null && Ast.isIdentifier(ident) ? ident : undefined
         } else {
           sourceNodeIdentifier.value = undefined
         }
@@ -234,7 +245,7 @@ export function useComponentBrowserInput(
     const matchedCode = sourceNodeMatch?.[2]
     if (
       matchedSource != null &&
-      isIdentifier(matchedSource) &&
+      Ast.isIdentifier(matchedSource) &&
       matchedCode != null &&
       graphDb.getIdentDefiningNode(matchedSource)
     )
diff --git a/app/ydoc-shared/src/ast/tree.ts b/app/ydoc-shared/src/ast/tree.ts
index eab7fcace3b0..7f802edc806c 100644
--- a/app/ydoc-shared/src/ast/tree.ts
+++ b/app/ydoc-shared/src/ast/tree.ts
@@ -1893,6 +1893,16 @@ export class MutableTextLiteral extends TextLiteral implements MutableExpression
     this.fields.set('close', unspaced(Token.new(code)))
   }
 
+  fixBoundaries() {
+    const open = this.open
+    const close = this.close
+    if (open != null && close == null) {
+      this.fields.set('close', unspaced(Token.new(open.code())))
+    } else if (open == null && close != null) {
+      this.fields.set('open', unspaced(Token.new(close.code())))
+    }
+  }
+
   setElements(elements: TextElement<OwnedRefs>[]) {
     this.fields.set(
       'elements',

From ad03676b93ca82953977c3b64dd9263472b33c71 Mon Sep 17 00:00:00 2001
From: Adam Obuchowicz <adam.obuchowicz@enso.org>
Date: Wed, 5 Mar 2025 15:21:15 +0100
Subject: [PATCH 2/7] Do not put dots on operators

---
 .../components/ComponentBrowser/input.ts      |  8 +++++++-
 app/rust-ffi/src/lib.rs                       | 19 ++++++++++++++++++-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/app/gui/src/project-view/components/ComponentBrowser/input.ts b/app/gui/src/project-view/components/ComponentBrowser/input.ts
index 01e988610068..996f8efebd4d 100644
--- a/app/gui/src/project-view/components/ComponentBrowser/input.ts
+++ b/app/gui/src/project-view/components/ComponentBrowser/input.ts
@@ -282,7 +282,13 @@ export function useComponentBrowserInput(
   }
 
   function applySourceNode(text: string) {
-    return sourceNodeIdentifier.value ? `${sourceNodeIdentifier.value}.${text}` : text
+    return (
+      sourceNodeIdentifier.value ?
+        /^[a-zA-Z]/.test(text) ?
+          `${sourceNodeIdentifier.value}.${text}`
+        : `${sourceNodeIdentifier.value} ${text}`
+      : text
+    )
   }
 
   return proxyRefs({
diff --git a/app/rust-ffi/src/lib.rs b/app/rust-ffi/src/lib.rs
index 58cb3dd2558b..2113d2bbe0a0 100644
--- a/app/rust-ffi/src/lib.rs
+++ b/app/rust-ffi/src/lib.rs
@@ -43,6 +43,23 @@ pub fn is_ident_or_operator(code: &str) -> u32 {
     }
 }
 
+#[wasm_bindgen]
+pub fn is_ident_or_operator(code: &str) -> u32 {
+    let parsed = enso_parser::lexer::run(code);
+    if parsed.internal_error.is_some() {
+        return 0;
+    }
+    let token = match &parsed.value[..] {
+        [token] => token,
+        _ => return 0,
+    };
+    match &token.variant {
+        enso_parser::syntax::token::Variant::Ident(_) => 1,
+        enso_parser::syntax::token::Variant::Operator(_) => 2,
+        _ => 0,
+    }
+}
+
 #[wasm_bindgen]
 pub fn is_numeric_literal(code: &str) -> bool {
     let parsed = PARSER.with(|parser| parser.parse_block(code));
@@ -74,7 +91,7 @@ mod tests {
     use super::*;
 
     #[test]
-    fn test_is_ident_or_operator() {
+    fn test_is_numeric_literal() {
         assert!(is_numeric_literal("1234"));
         assert!(is_numeric_literal("-1234"));
         assert!(!is_numeric_literal(""));

From 5f90d2e72ceb2d11d4f11a9ab0837093b73e378b Mon Sep 17 00:00:00 2001
From: Adam Obuchowicz <adam.obuchowicz@enso.org>
Date: Wed, 5 Mar 2025 16:48:44 +0100
Subject: [PATCH 3/7] Fix

---
 app/rust-ffi/src/lib.rs | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/app/rust-ffi/src/lib.rs b/app/rust-ffi/src/lib.rs
index 2113d2bbe0a0..4e8e3c07b798 100644
--- a/app/rust-ffi/src/lib.rs
+++ b/app/rust-ffi/src/lib.rs
@@ -43,23 +43,6 @@ pub fn is_ident_or_operator(code: &str) -> u32 {
     }
 }
 
-#[wasm_bindgen]
-pub fn is_ident_or_operator(code: &str) -> u32 {
-    let parsed = enso_parser::lexer::run(code);
-    if parsed.internal_error.is_some() {
-        return 0;
-    }
-    let token = match &parsed.value[..] {
-        [token] => token,
-        _ => return 0,
-    };
-    match &token.variant {
-        enso_parser::syntax::token::Variant::Ident(_) => 1,
-        enso_parser::syntax::token::Variant::Operator(_) => 2,
-        _ => 0,
-    }
-}
-
 #[wasm_bindgen]
 pub fn is_numeric_literal(code: &str) -> bool {
     let parsed = PARSER.with(|parser| parser.parse_block(code));

From 044c6959b4858345f0a8a839cadfc4bf212b7447 Mon Sep 17 00:00:00 2001
From: Adam Obuchowicz <adam.obuchowicz@enso.org>
Date: Thu, 6 Mar 2025 13:21:20 +0100
Subject: [PATCH 4/7] Review

---
 .../components/ComponentBrowser.vue           | 12 +------
 .../components/ComponentBrowser/input.ts      |  8 ++---
 .../util/ast/__tests__/abstract.test.ts       | 14 +++++++++
 app/rust-ffi/src/lib.rs                       | 31 +++++++++++++++++--
 app/ydoc-shared/src/ast/ffi.ts                | 12 +++++--
 app/ydoc-shared/src/ast/token.ts              |  2 ++
 app/ydoc-shared/src/ast/tree.ts               |  8 +++--
 7 files changed, 66 insertions(+), 21 deletions(-)

diff --git a/app/gui/src/project-view/components/ComponentBrowser.vue b/app/gui/src/project-view/components/ComponentBrowser.vue
index 2e96447f0194..3f736ebe6fb1 100644
--- a/app/gui/src/project-view/components/ComponentBrowser.vue
+++ b/app/gui/src/project-view/components/ComponentBrowser.vue
@@ -281,7 +281,7 @@ function applyComponent(component: Opt<Component> = null) {
     input.switchToCodeEditMode()
     return Ok()
   }
-  if (component.suggestionId) {
+  if (component.suggestionId != null) {
     return input.applySuggestion(component.suggestionId)
   } else {
     // Component without suggestion database entry, for example "literal" component.
@@ -297,16 +297,6 @@ function acceptComponent(component: Opt<Component> = null) {
   else result.error.log('Cannot apply suggestion')
 }
 
-// function editComponent(component: Opt<Component> = null) {
-//   const result = applyComponentToInput(component)
-//   if (result.ok) acceptInput()
-//   else result.error.log('Cannot apply suggestion')
-//   const suggestionId = component?.suggestionId ?? selectedSuggestionId.value
-//   if (suggestionId == null) return input.switchToCodeEditMode()
-//   const result = input.applySuggestion(suggestionId)
-//   if (!result.ok) result.error.log('Cannot apply suggestion')
-// }
-
 function acceptInput() {
   const appliedReturnType =
     input.mode.mode === 'codeEditing' ?
diff --git a/app/gui/src/project-view/components/ComponentBrowser/input.ts b/app/gui/src/project-view/components/ComponentBrowser/input.ts
index 996f8efebd4d..507838ebbb87 100644
--- a/app/gui/src/project-view/components/ComponentBrowser/input.ts
+++ b/app/gui/src/project-view/components/ComponentBrowser/input.ts
@@ -32,7 +32,7 @@ export type ComponentBrowserMode =
   | {
       mode: 'componentBrowsing'
       filter: Filter
-      literal?: Ast.TextLiteral | Ast.NumericLiteral
+      literal?: Ast.TextLiteral | Ast.NumericLiteral | Ast.NegationApp | undefined
     }
   | {
       mode: 'codeEditing'
@@ -111,10 +111,10 @@ export function useComponentBrowserInput(
         : {}),
       }
     } else {
-      let literal: Ast.MutableTextLiteral | Ast.NumericLiteral | undefined =
+      let literal: Ast.MutableTextLiteral | Ast.NumericLiteral | Ast.NegationApp | undefined =
         Ast.TextLiteral.tryParse(text.value)
       if (literal == null) {
-        literal = Ast.NumericLiteral.tryParse(text.value)
+        literal = Ast.NumericLiteral.tryParseWithSign(text.value)
       } else {
         literal.fixBoundaries()
       }
@@ -124,7 +124,7 @@ export function useComponentBrowserInput(
           pattern: text.value,
           ...(sourceNodeType.value != null ? { selfArg: sourceNodeType.value } : {}),
         },
-        ...(literal ? { literal } : {}),
+        literal,
       }
     }
   })
diff --git a/app/gui/src/project-view/util/ast/__tests__/abstract.test.ts b/app/gui/src/project-view/util/ast/__tests__/abstract.test.ts
index 165f4d497834..177d805aae11 100644
--- a/app/gui/src/project-view/util/ast/__tests__/abstract.test.ts
+++ b/app/gui/src/project-view/util/ast/__tests__/abstract.test.ts
@@ -1092,6 +1092,20 @@ test('setRawTextContent promotes single-line uninterpolated text to interpolated
   expect(literal.code()).toBe(`'${escapeTextLiteral(rawText)}'`)
 })
 
+test.each`
+  text               | fixed
+  ${"'abc'"}         | ${"'abc'"}
+  ${'"abc"'}         | ${'"abc"'}
+  ${"'''abc\n  cde"} | ${"'''abc\n  cde"}
+  ${"'abc"}          | ${"'abc'"}
+  ${'"abc'}          | ${'"abc"'}
+`('Fixing boundaries in $text', ({ text, fixed }) => {
+  const literal = Ast.TextLiteral.tryParse(text)
+  assert(literal != null)
+  literal.fixBoundaries()
+  expect(literal.code()).toBe(fixed)
+})
+
 test.each([
   { code: 'operator1', expected: { subject: 'operator1', accesses: [] } },
   { code: 'operator1 foo bar', expected: { subject: 'operator1 foo bar', accesses: [] } },
diff --git a/app/rust-ffi/src/lib.rs b/app/rust-ffi/src/lib.rs
index 4e8e3c07b798..61f688129ed4 100644
--- a/app/rust-ffi/src/lib.rs
+++ b/app/rust-ffi/src/lib.rs
@@ -26,14 +26,14 @@ pub fn parse_block(code: &str) -> Vec<u8> {
     enso_parser::format::serialize(&ast).expect("Failed to serialize AST to binary format")
 }
 
-#[wasm_bindgen]
-pub fn is_ident_or_operator(code: &str) -> u32 {
+fn starts_with_ident_or_operator<const ONLY_ONE_TOKEN_ALLOWED: bool>(code: &str) -> u32 {
     let parsed = enso_parser::lexer::run(code);
     if parsed.internal_error.is_some() {
         return 0;
     }
     let token = match &parsed.value[..] {
         [token] => token,
+        [token, ..] if !ONLY_ONE_TOKEN_ALLOWED => token,
         _ => return 0,
     };
     match &token.variant {
@@ -43,6 +43,17 @@ pub fn is_ident_or_operator(code: &str) -> u32 {
     }
 }
 
+#[wasm_bindgen]
+pub fn is_ident_or_operator(code: &str) -> u32 {
+    starts_with_ident_or_operator::<true>(code)
+}
+
+#[wasm_bindgen]
+pub fn is_first_token_ident_or_operator(code: &str) -> u32 {
+    starts_with_ident_or_operator::<false>(code)
+}
+
+
 #[wasm_bindgen]
 pub fn is_numeric_literal(code: &str) -> bool {
     let parsed = PARSER.with(|parser| parser.parse_block(code));
@@ -83,4 +94,20 @@ mod tests {
         assert!(!is_numeric_literal("1234!"));
         assert!(!is_numeric_literal("1234e5"));
     }
+
+    #[test]
+    fn test_checking_ident_or_operator() {
+        assert_eq!(is_ident_or_operator("abc"), 1);
+        assert_eq!(is_ident_or_operator("Abc"), 1);
+        assert_eq!(is_ident_or_operator("abc 14"), 0);
+        assert_eq!(is_ident_or_operator("+"), 2);
+        assert_eq!(is_ident_or_operator("+ 2"), 0);
+        assert_eq!(is_ident_or_operator("[]"), 0);
+
+        assert_eq!(is_first_token_ident_or_operator("abc"), 1);
+        assert_eq!(is_first_token_ident_or_operator("abc 14"), 1);
+        assert_eq!(is_first_token_ident_or_operator("+"), 2);
+        assert_eq!(is_first_token_ident_or_operator("+ 2"), 2);
+        assert_eq!(is_first_token_ident_or_operator("[]"), 0);
+    }
 }
diff --git a/app/ydoc-shared/src/ast/ffi.ts b/app/ydoc-shared/src/ast/ffi.ts
index b4e07e70c84a..2fd0f79832e1 100644
--- a/app/ydoc-shared/src/ast/ffi.ts
+++ b/app/ydoc-shared/src/ast/ffi.ts
@@ -6,6 +6,7 @@
 import { createXXHash128 } from 'hash-wasm'
 import type { IDataType } from 'hash-wasm/dist/lib/util'
 import {
+  is_first_token_ident_or_operator,
   is_ident_or_operator,
   is_numeric_literal,
   parse_block,
@@ -21,5 +22,12 @@ export function xxHash128(input: IDataType) {
   return xxHasher128.digest()
 }
 
-/* eslint-disable-next-line camelcase */
-export { is_ident_or_operator, is_numeric_literal, parse_block, parse_doc_to_json, parse_module }
+/* eslint-disable camelcase */
+export {
+  is_first_token_ident_or_operator,
+  is_ident_or_operator,
+  is_numeric_literal,
+  parse_block,
+  parse_doc_to_json,
+  parse_module,
+}
diff --git a/app/ydoc-shared/src/ast/token.ts b/app/ydoc-shared/src/ast/token.ts
index 6220b7403e6c..857d3059038c 100644
--- a/app/ydoc-shared/src/ast/token.ts
+++ b/app/ydoc-shared/src/ast/token.ts
@@ -135,6 +135,8 @@ export function isIdentifier(code: string): code is Identifier {
   return is_ident_or_operator(code) === 1
 }
 
+export function startsWithIdentifier
+
 /**
  * Whether the given code is a type or constructor identifier.
  * This is true if the code is an identifier beginning with an uppercase letter.
diff --git a/app/ydoc-shared/src/ast/tree.ts b/app/ydoc-shared/src/ast/tree.ts
index 7f802edc806c..eaa64a5c25a0 100644
--- a/app/ydoc-shared/src/ast/tree.ts
+++ b/app/ydoc-shared/src/ast/tree.ts
@@ -1890,13 +1890,17 @@ export class MutableTextLiteral extends TextLiteral implements MutableExpression
 
   setBoundaries(code: string) {
     this.fields.set('open', unspaced(Token.new(code)))
-    this.fields.set('close', unspaced(Token.new(code)))
+    if (code.length > 1) {
+      this.fields.set('close', undefined)
+    } else {
+      this.fields.set('close', unspaced(Token.new(code)))
+    }
   }
 
   fixBoundaries() {
     const open = this.open
     const close = this.close
-    if (open != null && close == null) {
+    if (open != null && close == null && open.code().length === 1) {
       this.fields.set('close', unspaced(Token.new(open.code())))
     } else if (open == null && close != null) {
       this.fields.set('open', unspaced(Token.new(close.code())))

From dc33a093f0dcc9cca95f1a05b922f98194d09973 Mon Sep 17 00:00:00 2001
From: Adam Obuchowicz <adam.obuchowicz@enso.org>
Date: Thu, 6 Mar 2025 13:47:34 +0100
Subject: [PATCH 5/7] Test for reading literals

---
 .../ComponentBrowser/__tests__/input.test.ts  | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 app/gui/src/project-view/components/ComponentBrowser/__tests__/input.test.ts

diff --git a/app/gui/src/project-view/components/ComponentBrowser/__tests__/input.test.ts b/app/gui/src/project-view/components/ComponentBrowser/__tests__/input.test.ts
new file mode 100644
index 000000000000..3d5637c9d5f7
--- /dev/null
+++ b/app/gui/src/project-view/components/ComponentBrowser/__tests__/input.test.ts
@@ -0,0 +1,47 @@
+import { useComponentBrowserInput } from '@/components/ComponentBrowser/input'
+import { GraphDb, NodeId } from '@/stores/graph/graphDatabase'
+import { ComputedValueRegistry } from '@/stores/project/computedValueRegistry'
+import { SuggestionDb } from '@/stores/suggestionDatabase'
+import { unwrap } from '@/util/data/result'
+import { parseAbsoluteProjectPathRaw } from '@/util/projectPath'
+import { expect, test } from 'vitest'
+import { assert, assertUnreachable } from 'ydoc-shared/util/assert'
+import { Range } from 'ydoc-shared/util/data/range'
+
+const aiMock = { query: assertUnreachable }
+const operator1Id = '3d0e9b96-3ca0-4c35-a820-7d3a1649de55' as NodeId
+const operator2Id = '5eb16101-dd2b-4034-a6e2-476e8bfa1f2b' as NodeId
+
+function mockGraphDb() {
+  const computedValueRegistryMock = ComputedValueRegistry.Mock()
+  computedValueRegistryMock.db.set(operator1Id, {
+    typename: unwrap(parseAbsoluteProjectPathRaw('Standard.Base.Number')),
+    rawTypename: 'Standard.Base.Number',
+    methodCall: undefined,
+    payload: { type: 'Value' },
+    profilingInfo: [],
+  })
+  const db = GraphDb.Mock(computedValueRegistryMock)
+  db.mockNode('operator1', operator1Id, 'Data.read')
+  db.mockNode('operator2', operator2Id)
+  return db
+}
+
+test.each`
+  inputContent   | expectedLiteral
+  ${'read'}      | ${undefined}
+  ${'operator1'} | ${undefined}
+  ${'12 + 14'}   | ${undefined}
+  ${'12'}        | ${'12'}
+  ${'12.6'}      | ${'12.6'}
+  ${'"text"'}    | ${'"text"'}
+  ${"'text'"}    | ${"'text'"}
+  ${"'text"}     | ${"'text'"}
+  ${"'''text"}   | ${"'''text"}
+`('Reading literal from $inputContent', ({ inputContent, expectedLiteral }) => {
+  const input = useComponentBrowserInput(mockGraphDb(), new SuggestionDb(), aiMock)
+  input.reset({ type: 'newNode' })
+  input.content = { text: inputContent, selection: Range.empty }
+  assert(input.mode.mode === 'componentBrowsing')
+  expect(input.mode.literal?.code()).toBe(expectedLiteral)
+})

From f3242fe4f4b6b731732622a7d8dec5ddd9b90331 Mon Sep 17 00:00:00 2001
From: Adam Obuchowicz <adam.obuchowicz@enso.org>
Date: Thu, 6 Mar 2025 13:59:42 +0100
Subject: [PATCH 6/7] Add missing tests

---
 .../ComponentBrowser/__tests__/input.test.ts  | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/app/gui/src/project-view/components/ComponentBrowser/__tests__/input.test.ts b/app/gui/src/project-view/components/ComponentBrowser/__tests__/input.test.ts
index 3d5637c9d5f7..58952d9f352b 100644
--- a/app/gui/src/project-view/components/ComponentBrowser/__tests__/input.test.ts
+++ b/app/gui/src/project-view/components/ComponentBrowser/__tests__/input.test.ts
@@ -45,3 +45,23 @@ test.each`
   assert(input.mode.mode === 'componentBrowsing')
   expect(input.mode.literal?.code()).toBe(expectedLiteral)
 })
+
+test.each`
+  inputContent     | source         | expectedCode
+  ${'read'}        | ${'operator1'} | ${'operator1.read'}
+  ${'read'}        | ${'operator2'} | ${'operator2.read'}
+  ${'read "file"'} | ${'operator2'} | ${'operator2.read "file"'}
+  ${'+ 2'}         | ${'operator1'} | ${'operator1 + 2'}
+  ${'+ 3'}         | ${'operator2'} | ${'operator2 + 3'}
+`(
+  'Code generated by CB from $inputContent with source node $sourceNode',
+  ({ inputContent, source, expectedCode }) => {
+    const db = mockGraphDb()
+    const input = useComponentBrowserInput(db, new SuggestionDb(), aiMock)
+    const sourcePort = db.getNodeFirstOutputPort(db.getIdentDefiningNode(source))
+    assert(sourcePort != null)
+    input.reset({ type: 'newNode', sourcePort })
+    input.content = { text: inputContent, selection: Range.empty }
+    expect(input.code).toBe(expectedCode)
+  },
+)

From dc91f6470fdfce45935cea6489a19b1af52f5091 Mon Sep 17 00:00:00 2001
From: Adam Obuchowicz <adam.obuchowicz@enso.org>
Date: Thu, 6 Mar 2025 14:12:39 +0100
Subject: [PATCH 7/7] Fixes and missing parts

---
 .../components/ComponentBrowser/ComponentList.vue           | 2 +-
 .../src/project-view/components/ComponentBrowser/input.ts   | 4 ++--
 app/ydoc-server-polyglot/src/ffiPolyglot.ts                 | 1 +
 app/ydoc-server-polyglot/src/polyglot.d.ts                  | 1 +
 app/ydoc-shared/src/ast/token.ts                            | 6 ++++--
 5 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/app/gui/src/project-view/components/ComponentBrowser/ComponentList.vue b/app/gui/src/project-view/components/ComponentBrowser/ComponentList.vue
index 15d6d7dbabfc..807e65e50c4b 100644
--- a/app/gui/src/project-view/components/ComponentBrowser/ComponentList.vue
+++ b/app/gui/src/project-view/components/ComponentBrowser/ComponentList.vue
@@ -19,7 +19,7 @@ const MOUSE_SELECTION_DEBOUNCE = 200
 
 const props = defineProps<{
   filter: Filter
-  literal?: Ast.TextLiteral | Ast.NumericLiteral | undefined
+  literal?: Ast.Ast | undefined
 }>()
 const emit = defineEmits<{
   acceptSuggestion: [suggestion: Component]
diff --git a/app/gui/src/project-view/components/ComponentBrowser/input.ts b/app/gui/src/project-view/components/ComponentBrowser/input.ts
index 507838ebbb87..e711be114d06 100644
--- a/app/gui/src/project-view/components/ComponentBrowser/input.ts
+++ b/app/gui/src/project-view/components/ComponentBrowser/input.ts
@@ -10,6 +10,7 @@ import {
   type SuggestionId,
 } from '@/stores/suggestionDatabase/entry'
 import { Ast } from '@/util/ast'
+import { startsWithIdentifier } from '@/util/ast/abstract'
 import { Err, Ok, type Result } from '@/util/data/result'
 import { type ProjectPath } from '@/util/projectPath'
 import { qnJoin, qnLastSegment } from '@/util/qualifiedName'
@@ -284,8 +285,7 @@ export function useComponentBrowserInput(
   function applySourceNode(text: string) {
     return (
       sourceNodeIdentifier.value ?
-        /^[a-zA-Z]/.test(text) ?
-          `${sourceNodeIdentifier.value}.${text}`
+        startsWithIdentifier(sourceNodeIdentifier.value) ? `${sourceNodeIdentifier.value}.${text}`
         : `${sourceNodeIdentifier.value} ${text}`
       : text
     )
diff --git a/app/ydoc-server-polyglot/src/ffiPolyglot.ts b/app/ydoc-server-polyglot/src/ffiPolyglot.ts
index 531518beada9..4075e6cc6b21 100644
--- a/app/ydoc-server-polyglot/src/ffiPolyglot.ts
+++ b/app/ydoc-server-polyglot/src/ffiPolyglot.ts
@@ -7,6 +7,7 @@
 
 export const {
   is_ident_or_operator,
+  is_first_token_ident_or_operator,
   is_numeric_literal,
   parse_doc_to_json,
   parse_block,
diff --git a/app/ydoc-server-polyglot/src/polyglot.d.ts b/app/ydoc-server-polyglot/src/polyglot.d.ts
index 69baf887d7ad..20389332799f 100644
--- a/app/ydoc-server-polyglot/src/polyglot.d.ts
+++ b/app/ydoc-server-polyglot/src/polyglot.d.ts
@@ -15,5 +15,6 @@ declare function parse_block(code: string): Uint8Array
 declare function parse_module(code: string): Uint8Array
 declare function parse_doc_to_json(docs: string): string
 declare function is_ident_or_operator(code: string): number
+declare function is_first_token_ident_or_operator(code: string): number
 declare function is_numeric_literal(code: string): boolean
 declare function xxHash128(input: IDataType): string
diff --git a/app/ydoc-shared/src/ast/token.ts b/app/ydoc-shared/src/ast/token.ts
index 857d3059038c..6f768d0a41a9 100644
--- a/app/ydoc-shared/src/ast/token.ts
+++ b/app/ydoc-shared/src/ast/token.ts
@@ -1,7 +1,7 @@
 import { assert } from '../util/assert'
 import type { ExternalId } from '../yjsModel'
 import { isUuid } from '../yjsModel'
-import { is_ident_or_operator } from './ffi'
+import { is_first_token_ident_or_operator, is_ident_or_operator } from './ffi'
 import * as RawAst from './generated/ast'
 import { newExternalId } from './idMap'
 import type { AstId, DeepReadonly, NodeChild, Owned } from './tree'
@@ -135,7 +135,9 @@ export function isIdentifier(code: string): code is Identifier {
   return is_ident_or_operator(code) === 1
 }
 
-export function startsWithIdentifier
+export function startsWithIdentifier(code: string): boolean {
+  return is_first_token_ident_or_operator(code) === 1
+}
 
 /**
  * Whether the given code is a type or constructor identifier.