archsight 0.1.4 → 0.1.5

data/lib/archsight/web/public/js/lexical-editor.js

@@ -0,0 +1,308 @@
+// Lexical Rich Text Editor Module for Markdown editing
+// Uses ESM imports from esm.sh CDN
+
+import { createEditor, $getRoot, $getSelection, $isRangeSelection, FORMAT_TEXT_COMMAND, $createTextNode } from 'https://esm.sh/lexical@0.20.0';
+import { registerRichText, HeadingNode, QuoteNode, $createHeadingNode, $createQuoteNode } from 'https://esm.sh/@lexical/rich-text@0.20.0';
+import { registerHistory, createEmptyHistoryState } from 'https://esm.sh/@lexical/history@0.20.0';
+import { $convertFromMarkdownString, $convertToMarkdownString, TRANSFORMERS } from 'https://esm.sh/@lexical/markdown@0.20.0';
+import { ListNode, ListItemNode, registerList, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from 'https://esm.sh/@lexical/list@0.20.0';
+import { CodeNode, CodeHighlightNode, registerCodeHighlighting, $createCodeNode, $isCodeNode, getCodeLanguages } from 'https://esm.sh/@lexical/code@0.20.0';
+import { LinkNode, $createLinkNode, $isLinkNode } from 'https://esm.sh/@lexical/link@0.20.0';
+import { $setBlocksType } from 'https://esm.sh/@lexical/selection@0.20.0';
+import { $createParagraphNode } from 'https://esm.sh/lexical@0.20.0';
+
+let lexicalEditor = null;
+
+/**
+ * Initialize the Lexical editor in the given container element
+ * @param {HTMLElement} containerElement - The contenteditable element to use as editor root
+ * @returns {LexicalEditor} The initialized editor instance
+ */
+export function initLexicalEditor(containerElement) {
+  const config = {
+    namespace: 'ArchsightMarkdownEditor',
+    nodes: [HeadingNode, QuoteNode, ListNode, ListItemNode, CodeNode, CodeHighlightNode, LinkNode],
+    onError: (error) => {
+      console.error('Lexical Editor Error:', error);
+    },
+    theme: {
+      paragraph: 'lexical-paragraph',
+      heading: {
+        h1: 'lexical-h1',
+        h2: 'lexical-h2',
+        h3: 'lexical-h3',
+      },
+      list: {
+        ul: 'lexical-ul',
+        ol: 'lexical-ol',
+        listitem: 'lexical-li',
+      },
+      quote: 'lexical-quote',
+      code: 'lexical-code',
+      codeHighlight: {
+        atrule: 'tokenAttr',
+        attr: 'tokenAttr',
+        boolean: 'tokenProperty',
+        builtin: 'tokenSelector',
+        cdata: 'tokenComment',
+        char: 'tokenSelector',
+        class: 'tokenFunction',
+        'class-name': 'tokenFunction',
+        comment: 'tokenComment',
+        constant: 'tokenProperty',
+        deleted: 'tokenProperty',
+        doctype: 'tokenComment',
+        entity: 'tokenOperator',
+        function: 'tokenFunction',
+        important: 'tokenVariable',
+        inserted: 'tokenSelector',
+        keyword: 'tokenAttr',
+        namespace: 'tokenVariable',
+        number: 'tokenProperty',
+        operator: 'tokenOperator',
+        prolog: 'tokenComment',
+        property: 'tokenProperty',
+        punctuation: 'tokenPunctuation',
+        regex: 'tokenVariable',
+        selector: 'tokenSelector',
+        string: 'tokenSelector',
+        symbol: 'tokenProperty',
+        tag: 'tokenProperty',
+        url: 'tokenOperator',
+        variable: 'tokenVariable',
+      },
+      link: 'lexical-link',
+      text: {
+        bold: 'lexical-bold',
+        italic: 'lexical-italic',
+        underline: 'lexical-underline',
+        strikethrough: 'lexical-strikethrough',
+        code: 'lexical-text-code',
+      },
+    },
+  };
+
+  lexicalEditor = createEditor(config);
+  lexicalEditor.setRootElement(containerElement);
+
+  // Register plugins
+  registerRichText(lexicalEditor);
+  registerList(lexicalEditor);
+  registerCodeHighlighting(lexicalEditor);
+  registerHistory(lexicalEditor, createEmptyHistoryState(), 300);
+
+  return lexicalEditor;
+}
+
+/**
+ * Set the editor content from markdown string
+ * @param {string} markdown - The markdown string to load
+ */
+export function setLexicalMarkdown(markdown) {
+  if (!lexicalEditor) return;
+
+  lexicalEditor.update(() => {
+    // Clear existing content and convert markdown
+    const root = $getRoot();
+    root.clear();
+    $convertFromMarkdownString(markdown || '', TRANSFORMERS);
+  });
+}
+
+/**
+ * Get the current editor content as markdown string
+ * @returns {Promise<string>} The markdown string
+ */
+export function getLexicalMarkdown() {
+  return new Promise((resolve) => {
+    if (!lexicalEditor) {
+      resolve('');
+      return;
+    }
+
+    lexicalEditor.update(() => {
+      const markdown = $convertToMarkdownString(TRANSFORMERS);
+      resolve(markdown);
+    });
+  });
+}
+
+/**
+ * Get the editor instance
+ * @returns {LexicalEditor|null} The editor instance
+ */
+export function getEditor() {
+  return lexicalEditor;
+}
+
+/**
+ * Execute a text format command (bold, italic, etc.)
+ * @param {string} format - The format type ('bold', 'italic', 'underline', 'strikethrough', 'code')
+ */
+export function formatText(format) {
+  if (!lexicalEditor) return;
+  lexicalEditor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
+}
+
+/**
+ * Format selected block as heading, list, quote, or paragraph
+ * @param {string} blockType - The block type ('h1', 'h2', 'h3', 'bullet', 'number', 'quote', 'paragraph')
+ */
+export function formatBlock(blockType) {
+  if (!lexicalEditor) return;
+
+  if (blockType === 'bullet') {
+    lexicalEditor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+    return;
+  }
+
+  if (blockType === 'number') {
+    lexicalEditor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+    return;
+  }
+
+  lexicalEditor.update(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      if (blockType === 'h1' || blockType === 'h2' || blockType === 'h3') {
+        $setBlocksType(selection, () => $createHeadingNode(blockType));
+      } else if (blockType === 'quote') {
+        $setBlocksType(selection, () => $createQuoteNode());
+      } else if (blockType === 'paragraph') {
+        $setBlocksType(selection, () => $createParagraphNode());
+      }
+    }
+  });
+}
+
+/**
+ * Focus the editor
+ */
+export function focusEditor() {
+  if (!lexicalEditor) return;
+  lexicalEditor.focus();
+}
+
+/**
+ * Insert a code block at current selection
+ * @param {string} language - The programming language for the code block
+ */
+export function insertCodeBlock(language = '') {
+  if (!lexicalEditor) return;
+
+  lexicalEditor.update(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      const codeNode = $createCodeNode(language);
+      selection.insertNodes([codeNode]);
+      codeNode.select();
+    }
+  });
+}
+
+
+/**
+ * Set the language for the currently selected code block
+ * @param {string} language - The programming language
+ * @returns {boolean} True if language was set, false otherwise
+ */
+export function setCodeBlockLanguage(language) {
+  if (!lexicalEditor) return false;
+
+  let success = false;
+  lexicalEditor.update(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      const nodes = selection.getNodes();
+      for (const node of nodes) {
+        const parent = node.getParent();
+        if ($isCodeNode(parent)) {
+          parent.setLanguage(language);
+          success = true;
+          break;
+        }
+        if ($isCodeNode(node)) {
+          node.setLanguage(language);
+          success = true;
+          break;
+        }
+      }
+    }
+  });
+  return success;
+}
+
+/**
+ * Get the current code node's language if cursor is in a code block
+ * @returns {string|null} The language or null if not in a code block
+ */
+export function getCurrentCodeLanguage() {
+  if (!lexicalEditor) return null;
+
+  let language = null;
+  lexicalEditor.getEditorState().read(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      const nodes = selection.getNodes();
+      for (const node of nodes) {
+        const parent = node.getParent();
+        if ($isCodeNode(parent)) {
+          language = parent.getLanguage();
+          break;
+        }
+        if ($isCodeNode(node)) {
+          language = node.getLanguage();
+          break;
+        }
+      }
+    }
+  });
+  return language;
+}
+
+/**
+ * Insert or toggle a link
+ * Prompts user for URL if creating a new link
+ */
+export function insertLink() {
+  if (!lexicalEditor) return;
+
+  const url = prompt('Enter URL:', 'https://');
+  if (url === null) return; // User cancelled
+
+  lexicalEditor.update(() => {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return;
+
+    if (url === '') {
+      // Remove link - unwrap link nodes
+      const nodes = selection.getNodes();
+      nodes.forEach(node => {
+        const parent = node.getParent();
+        if ($isLinkNode(parent)) {
+          const children = parent.getChildren();
+          for (const child of children) {
+            parent.insertBefore(child);
+          }
+          parent.remove();
+        }
+      });
+    } else {
+      // Create link by wrapping selected content
+      const selectedText = selection.getTextContent();
+      if (selectedText) {
+        // Has selection - wrap it in a link
+        const linkNode = $createLinkNode(url);
+        selection.insertNodes([linkNode]);
+        // Move selected text into link
+        linkNode.append($createTextNode(selectedText));
+      } else {
+        // No selection - insert link with URL as text
+        const linkNode = $createLinkNode(url);
+        linkNode.append($createTextNode(url));
+        selection.insertNodes([linkNode]);
+      }
+    }
+  });
+}
+

data/lib/archsight/web/views/partials/editor/_field.haml

@@ -0,0 +1,80 @@
+.field-group{class: field.textarea? || field.code? ? "field-full-width" : ""}
+  .label-row
+    %label{for: field.key, title: field.description}
+      = field.title
+      - if field.required
+        %span.required *
+    - if field.markdown?
+      %button.btn-edit-markdown{type: "button",
+                                 onclick: "openMarkdownEditor('#{field.key}')",
+                                 title: "Open rich text editor"}
+        %i.iconoir-edit-pencil
+        Edit
+
+  - if field.select?
+    %select{id: field.key,
+            name: "annotations[#{field.key}]",
+            "aria-invalid": error ? "true" : nil}
+      %option{value: "", selected: value.nil? || value.empty?} Select...
+      - field.options.each do |opt|
+        %option{value: opt, selected: value == opt}= opt
+
+  - elsif field.textarea?
+    .markdown-field
+      %textarea{id: field.key,
+                name: "annotations[#{field.key}]",
+                "aria-invalid": error ? "true" : nil,
+                placeholder: field.markdown? ? "Enter markdown content..." : "One entry per line..."}= value
+      - if field.markdown?
+        %small.future-hint
+          %i.iconoir-info-circle
+          Supports Markdown formatting
+
+  - elsif field.code?
+    .code-field
+      %textarea{id: field.key,
+                name: "annotations[#{field.key}]",
+                "aria-invalid": error ? "true" : nil,
+                placeholder: "Enter #{field.code_language} code...",
+                spellcheck: "false"}= value
+      %small.future-hint
+        %i.iconoir-code
+        = "#{field.code_language.to_s.capitalize} code"
+
+  - elsif field.number?
+    %input{id: field.key,
+           type: "number",
+           name: "annotations[#{field.key}]",
+           value: value,
+           step: field.step,
+           "aria-invalid": error ? "true" : nil}
+
+  - elsif field.url?
+    %input{id: field.key,
+           type: "url",
+           name: "annotations[#{field.key}]",
+           value: value,
+           placeholder: "https://...",
+           "aria-invalid": error ? "true" : nil}
+
+  - elsif field.list?
+    %input{id: field.key,
+           type: "text",
+           name: "annotations[#{field.key}]",
+           value: value,
+           placeholder: "Comma-separated values",
+           "aria-invalid": error ? "true" : nil}
+
+  - else
+    %input{id: field.key,
+           type: "text",
+           name: "annotations[#{field.key}]",
+           value: value,
+           "aria-invalid": error ? "true" : nil}
+
+  - if field.description && !field.textarea? && !field.code?
+    %small.field-description= field.description
+
+  - if error
+    .field-error
+      = error.join(", ")

data/lib/archsight/web/views/partials/editor/_form.haml

@@ -0,0 +1,131 @@
+- action_url = @mode == :edit ? "/kinds/#{@kind}/instances/#{@instance_name}/generate" : "/kinds/#{@kind}/generate"
+- title = @mode == :edit ? "Edit #{@kind}" : "New #{@kind}"
+- back_url = @mode == :edit ? "/kinds/#{@kind}/instances/#{@instance_name}" : "/kinds/#{@kind}"
+
+- if @generated_yaml
+  %article.yaml-output
+    %header
+      %h3
+        %i{class: "iconoir-#{@klass.icon} icon-#{@klass.layer}"}
+        = title
+      %a.btn-back{href: back_url}
+        %i.iconoir-arrow-left
+        Back
+    != haml :'partials/editor/_yaml_output', locals: { yaml: @generated_yaml, path_ref: @path_ref, kind: @kind, name: @name, content_hash: @content_hash }
+- else
+  %form.editor-form{method: "post", action: action_url, "data-kind": @kind}
+    / Metadata
+    %article
+      %header
+        %h3
+          %i{class: "iconoir-#{@klass.icon} icon-#{@klass.layer}"}
+          = title
+        %a.btn-back{href: back_url}
+          %i.iconoir-arrow-left
+          Back
+      - if @mode == :edit
+        / Show name as disabled field in edit mode
+        .field-group
+          %input#name{type: "text",
+                      name: "name_display",
+                      placeholder: "Name",
+                      value: @name,
+                      disabled: true}
+          %input{type: "hidden", name: "name", value: @name}
+          - if @content_hash
+            %input{type: "hidden", name: "content_hash", value: @content_hash}
+      - else
+        / Editable name field for new resources
+        .field-group
+          %label{for: "name"}
+            Name
+            %span.required *
+          %input#name{type: "text",
+                      name: "name",
+                      value: @name,
+                      required: true,
+                      placeholder: "Enter resource name (no spaces)",
+                      pattern: "\\S+",
+                      "aria-invalid": @errors["name"] ? "true" : nil}
+          - if @errors["name"]
+            .field-error
+              = @errors["name"].join(", ")
+
+    / Annotations
+    %article
+      %header
+        %h3 Annotations
+      .annotations-grid
+        - @fields.each do |field|
+          != haml :'partials/editor/_field', locals: { field: field, value: @annotations[field.key], error: @errors[field.key] }
+
+    / Relations
+    %article
+      %header
+        %h3 Relations
+      != haml :'partials/editor/_relations', locals: { relations: @relations, kind: @kind }
+
+    / Submit
+    .form-actions
+      %button{type: "submit"}
+        %i.iconoir-code
+        Generate YAML
+      %a.secondary{role: "button", href: @mode == :edit ? "/kinds/#{@kind}/instances/#{@instance_name}" : "/kinds/#{@kind}"}
+        Cancel
+
+/ Markdown Editor Overlay
+#markdown-editor-overlay.hidden
+  .markdown-editor-backdrop{onclick: "closeMarkdownEditor()"}
+  .markdown-editor-panel
+    .lexical-toolbar
+      %button.toolbar-btn{type: "button", onclick: "formatLexical('bold')", title: "Bold (Ctrl+B)"}
+        %i.iconoir-bold
+      %button.toolbar-btn{type: "button", onclick: "formatLexical('italic')", title: "Italic (Ctrl+I)"}
+        %i.iconoir-italic
+      %button.toolbar-btn{type: "button", onclick: "formatLexical('strikethrough')", title: "Strikethrough"}
+        %i.iconoir-strikethrough
+      %button.toolbar-btn{type: "button", onclick: "formatLexical('code')", title: "Inline Code"}
+        %i.iconoir-code
+      .toolbar-divider
+      %button.toolbar-btn{type: "button", onclick: "formatLexicalBlock('h1')", title: "Heading 1"}
+        H1
+      %button.toolbar-btn{type: "button", onclick: "formatLexicalBlock('h2')", title: "Heading 2"}
+        H2
+      %button.toolbar-btn{type: "button", onclick: "formatLexicalBlock('h3')", title: "Heading 3"}
+        H3
+      .toolbar-divider
+      %button.toolbar-btn{type: "button", onclick: "formatLexicalBlock('bullet')", title: "Bullet List"}
+        %i.iconoir-list
+      %button.toolbar-btn{type: "button", onclick: "formatLexicalBlock('number')", title: "Numbered List"}
+        %i.iconoir-numbered-list-left
+      %button.toolbar-btn{type: "button", onclick: "formatLexicalBlock('quote')", title: "Quote"}
+        %i.iconoir-quote
+      .toolbar-divider
+      %button.toolbar-btn{type: "button", onclick: "insertLink()", title: "Insert Link"}
+        %i.iconoir-link
+      .toolbar-divider
+      %button.toolbar-btn{type: "button", onclick: "insertCodeBlock()", title: "Code Block"}
+        %i.iconoir-code-brackets
+      %select#code-language-picker.toolbar-select.hidden{onchange: "applyCodeLanguage(this.value)", title: "Code Language"}
+        %option{value: ""} Language...
+        %option{value: "javascript"} JavaScript
+        %option{value: "typescript"} TypeScript
+        %option{value: "ruby"} Ruby
+        %option{value: "python"} Python
+        %option{value: "html"} HTML
+        %option{value: "css"} CSS
+        %option{value: "json"} JSON
+        %option{value: "yaml"} YAML
+        %option{value: "bash"} Bash
+        %option{value: "sql"} SQL
+        %option{value: "go"} Go
+        %option{value: "rust"} Rust
+        %option{value: "java"} Java
+        %option{value: "mermaid"} Mermaid
+        %option{value: "markdown"} Markdown
+        %option{value: "text"} Plain Text
+      .toolbar-spacer
+      %button.secondary.toolbar-action{type: "button", onclick: "closeMarkdownEditor()"} Cancel
+      %button.toolbar-action{type: "button", onclick: "saveMarkdownEditor()"} Save
+    .lexical-editor-container
+      #lexical-editor-root{contenteditable: "true"}

data/lib/archsight/web/views/partials/editor/_relations.haml

@@ -0,0 +1,39 @@
+- verbs = relation_verbs(kind)
+- all_relations = available_relations(kind)
+- verb_kind_options = all_relations.map { |v, _, k| ["#{v}:#{k}", v, k] }.sort_by(&:first).uniq
+- target_kinds = verb_kind_options.map { |_, _, k| k }.uniq
+- instances_by_kind = target_kinds.each_with_object({}) { |k, h| h[k] = db.instances_by_kind(k).keys.sort rescue [] }
+
+.relations-editor{"data-kind": kind, "data-instances": instances_by_kind.to_json}
+  - if verb_kind_options.empty?
+    %p.no-relations This resource type has no defined relations.
+  - else
+    / Existing relations list (read-only display with hidden inputs)
+    #relations-list
+      - if relations&.any?
+        - sorted_relations = relations.sort_by { |r| [r[:verb].to_s, r[:kind].to_s, r[:name].to_s] }
+        - sorted_relations.each do |rel|
+          .relation-item
+            %span.relation-text
+              %strong= rel[:verb]
+              \→ #{rel[:kind]}:
+              %em= rel[:name]
+            %input{type: "hidden", name: "relations[][verb]", value: rel[:verb]}
+            %input{type: "hidden", name: "relations[][kind]", value: rel[:kind]}
+            %input{type: "hidden", name: "relations[][name]", value: rel[:name]}
+            %button.btn-remove{type: "button", onclick: "removeRelation(this)", title: "Remove"}
+              %i.iconoir-xmark
+
+    / Add relation form - inline with verb:kind and instance dropdowns
+    .add-relation-row
+      %select#new-relation-verb-kind{onchange: "updateInstanceOptions()"}
+        %option{value: ""} Select relation...
+        - verb_kind_options.each do |combo, verb, target_kind|
+          %option{value: combo, "data-verb": verb, "data-kind": target_kind}= "#{verb} \u2192 #{target_kind}"
+
+      %select#new-relation-instance
+        %option{value: ""} Select instance...
+
+      %button.secondary.btn-add{type: "button", onclick: "addRelation()"}
+        %i.iconoir-plus
+        Add

data/lib/archsight/web/views/partials/editor/_yaml_output.haml

@@ -0,0 +1,33 @@
+%p.yaml-success
+  %i.iconoir-check-circle
+  Generated YAML
+
+%pre#yaml-content
+  %code.language-yaml= yaml
+
+%footer
+  - if defined?(path_ref) && path_ref
+    %p.yaml-file-info
+      %i.iconoir-folder
+      %span
+        Source: #{path_ref.path}:#{path_ref.line_no}
+  - else
+    %p.yaml-instructions
+      %i.iconoir-info-circle
+      %span
+        Copy this YAML and save it to a
+        %code .yaml
+        file in your resources directory,
+        %br
+        then reload the application.
+  .yaml-actions
+    - if defined?(path_ref) && path_ref && inline_edit_enabled?
+      %button#save-yaml{type: "button", data: { kind: kind, name: name, "content-hash": content_hash }}
+        %i.iconoir-check-circle
+        Save to File
+    %button#copy-yaml{type: "button", "data-clipboard-target": "#yaml-content"}
+      %i.iconoir-copy
+      Copy to Clipboard
+    %a.secondary{role: "button", href: "javascript:history.back()"}
+      %i.iconoir-edit-pencil
+      Edit Again

data/lib/archsight/web/views/partials/instance/_analysis_detail.haml

@@ -4,7 +4,6 @@
 - description = analysis.annotations['analysis/description']
 - handler = analysis.annotations['analysis/handler'] || 'ruby'
 - timeout = analysis.annotations['analysis/timeout'] || '30s'
-- enabled = analysis.annotations['analysis/enabled'] != 'false'
 
 %article.analysis-header
   %header
@@ -13,8 +12,10 @@
       .instance-title-text
         %span.instance-name= @instance
         %span.instance-kind-subtitle= @kind
-    - unless enabled
-      %span.badge.badge-warning Disabled
+    .header-actions
+      %a.btn-header{href: "/kinds/#{@kind}/instances/#{@instance}/edit", title: "Edit this resource"}
+        %i.iconoir-edit-pencil
+        Edit
   - if description
     .analysis-description
       != markdown(description)
@@ -49,14 +50,6 @@
         %span.analysis-meta-item
           %i.iconoir-timer
           = timeout
-        - if enabled
-          %span.analysis-meta-item.status-enabled
-            %i.iconoir-check-circle
-            Enabled
-        - else
-          %span.analysis-meta-item.status-disabled
-            %i.iconoir-xmark-circle
-            Disabled
       .analysis-script
         .analysis-script-header
           %strong Script

data/lib/archsight/web/views/partials/instance/_detail.haml

@@ -28,6 +28,10 @@
             %span.generated-time
               generated
               = time_ago(instance.annotations['generated/at'])
+      - else
+        %a.btn-header{href: "/kinds/#{@kind}/instances/#{@instance}/edit", title: "Edit this resource"}
+          %i.iconoir-edit-pencil
+          Edit
     - if instance.has_relations?
       .graph-container
         #graphviz.canvas

data/lib/archsight/web/views/partials/layout/_content.haml

@@ -2,6 +2,8 @@
   - if @doc_content
     %article
       != @doc_content
+  - elsif @editor_mode
+    != haml :'partials/editor/_form'
   - elsif @instances
     != haml :search
   - elsif @kind && @instance
@@ -37,8 +39,12 @@
           %h2
             %i{class: "iconoir-#{Archsight::Resources[@kind].icon} icon-#{Archsight::Resources[@kind].layer}"}
             = @kind
-          %a.kind-help{href: "/doc/resources/#{kind_snake}", title: "Documentation for #{@kind}"}
-            %i.iconoir-help-circle
+          .header-actions
+            %a.kind-help{href: "/doc/resources/#{kind_snake}", title: "Documentation for #{@kind}"}
+              %i.iconoir-help-circle
+            %a.btn-header{href: "/kinds/#{@kind}/new", title: "Create new #{@kind}"}
+              %i.iconoir-plus
+              New
         != haml :"partials/instance/_list", locals: { instances: db.instances_by_kind(@kind).values.sort_by(&:name), omit_kind: true }
   - elsif !@kind
     != haml :"partials/instance/_graph"

data/lib/archsight/web/views/partials/layout/_head.haml

@@ -12,6 +12,7 @@
   %link{href: asset_path('/css/highlight.min.css'), rel: 'stylesheet'}/
   %link{href: asset_path('/css/mermaid-layers.css'), rel: 'stylesheet'}/
   %link{href: asset_path('/css/graph.css'), rel: 'stylesheet'}/
+  %link{href: asset_path('/css/editor.css'), rel: 'stylesheet'}/
   %script{src: asset_path('/js/htmx.min.js')}
   %script{src: asset_path('/js/mermaid.min.js')}
   %script{src: asset_path('/js/svg-pan-zoom.min.js')}
@@ -20,5 +21,6 @@
   %script{src: asset_path("/js/mermaid-init.js")}
   %script{ src: asset_path("/js/highlight.min.js") }
   %script{ src: asset_path("/js/sparkline.js") }
+  %script{ src: asset_path("/js/editor.js"), type: "module" }
   :javascript
     hljs.highlightAll();