Improved missing input conflict.

src/components/annotations/Annotation.svelte

@@ -33,7 +33,7 @@
         >
             <Speech
                 glyph={$index?.getNodeConcept(annotation.node) ??
-                    annotation.node.getGlyphs()}
+                    annotation.node.getGlyphs($locales)}
                 flip={annotation.kind === 'secondary'}
                 below
             >
@@ -93,6 +93,11 @@
 
     .annotation.flip {
         align-self: flex-end;
+        padding-inline-start: none;
+        border-inline-start: none;
+        padding-inline-end: var(--wordplay-spacing);
+        border-inline-end: var(--wordplay-focus-width) solid
+            var(--wordplay-error);
     }
 
     .annotation.step {

src/components/annotations/Annotations.svelte

@@ -148,33 +148,24 @@
                     // 2) zero or more secondary nodes
                     // From these, we generate one or two speech bubbles to illustrate the conflict.
                     return [
-                        ...(source.contains(primary.node)
-                            ? [
-                                  {
-                                      node: primary.node,
-                                      element: getNodeView(primary.node),
-                                      messages: [
-                                          primary.explanation(
-                                              $locales,
-                                              project.getNodeContext(
-                                                  primary.node,
-                                              ) ??
-                                                  project.getContext(
-                                                      project.getMain(),
-                                                  ),
-                                          ),
-                                      ],
-                                      kind: conflict.isMinor()
-                                          ? ('minor' as const)
-                                          : ('primary' as const),
-                                      context,
-                                      // Place the resolutions in the primary node.
-                                      resolutions: nodes.resolutions,
-                                  },
-                              ]
-                            : []),
-                        ...(secondary !== undefined &&
-                        source.contains(secondary.node)
+                        {
+                            node: primary.node,
+                            element: getNodeView(primary.node),
+                            messages: [
+                                primary.explanation(
+                                    $locales,
+                                    project.getNodeContext(primary.node) ??
+                                        project.getContext(project.getMain()),
+                                ),
+                            ],
+                            kind: conflict.isMinor()
+                                ? ('minor' as const)
+                                : ('primary' as const),
+                            context,
+                            // Place the resolutions in the primary node.
+                            resolutions: nodes.resolutions,
+                        },
+                        ...(secondary !== undefined
                             ? [
                                   {
                                       node: secondary.node,

src/components/concepts/SegmentHTMLView.svelte

@@ -42,7 +42,7 @@
             {spaces}
             outline={false}
             describe={false}
-        />{/if}{:else if segment instanceof ConceptLink}<ConceptLinkUI
+        />{/if}{:else if segment instanceof ConceptLink || segment instanceof ConceptRef}<ConceptLinkUI
         link={segment}
     />{:else if segment instanceof Words}<WordsHTMLView
         words={segment}

src/components/lore/Speech.svelte

@@ -44,10 +44,13 @@
 </script>
 
 <div
-    class="dialog {below ? 'column' : flip ? 'row reverse' : 'row'} {!below &&
-    baseline
-        ? 'baseline'
-        : ''}"
+    class="dialog {below
+        ? flip
+            ? 'column reverse'
+            : 'column'
+        : flip
+          ? 'row reverse'
+          : 'row'} {!below && baseline ? 'baseline' : ''}"
     class:big
     class:scroll
 >
@@ -69,7 +72,9 @@
     </div>
     <div
         class="message {below
-            ? 'below'
+            ? flip
+                ? 'below flip'
+                : 'below'
             : flip
               ? 'flip'
               : 'reading'} {typeof document !== 'undefined'
@@ -116,6 +121,11 @@
         max-width: 100%;
     }
 
+    .dialog.column.reverse {
+        align-items: flex-end;
+        padding-inline-start: calc(2 * var(--wordplay-spacing));
+    }
+
     .dialog.row.reverse {
         flex-direction: row-reverse;
     }
@@ -226,6 +236,26 @@
         top: calc(2 * var(--wordplay-spacing));
     }
 
+    .message.flip:before {
+        content: '';
+        position: absolute;
+        border-style: solid;
+        border-width: calc(var(--tail-width) + var(--wordplay-border-width)) 0
+            calc(var(--tail-width) + var(--wordplay-border-width))
+            calc(var(--tail-width) + var(--wordplay-border-width));
+        border-color: transparent var(--wordplay-border-color);
+        display: block;
+        width: 0;
+        margin-top: calc(
+            -1 * (var(--tail-width) + var(--wordplay-border-width))
+        );
+        inset-inline-end: calc(
+            var(--direction) * -1 *
+                (var(--tail-width) + 1 * var(--wordplay-border-width))
+        );
+        top: 50%;
+    }
+
     .message.flip:after {
         content: '';
         position: absolute;
@@ -243,28 +273,23 @@
         top: calc(2 * var(--wordplay-spacing));
     }
 
-    .message.flip:before {
+    .baseline .message.flip:before {
+        top: calc(2 * var(--wordplay-spacing));
+    }
+
+    .message.below:before {
         content: '';
         position: absolute;
         border-style: solid;
-        border-width: calc(var(--tail-width) + var(--wordplay-border-width)) 0
-            calc(var(--tail-width) + var(--wordplay-border-width))
+        border-width: 0 calc(var(--tail-width) + var(--wordplay-border-width))
             calc(var(--tail-width) + var(--wordplay-border-width));
-        border-color: transparent var(--wordplay-border-color);
+        border-color: var(--wordplay-border-color) transparent;
         display: block;
         width: 0;
-        margin-top: calc(
-            -1 * (var(--tail-width) + var(--wordplay-border-width))
-        );
-        inset-inline-end: calc(
-            var(--direction) * -1 *
-                (var(--tail-width) + 1 * var(--wordplay-border-width))
+        top: calc(-1 * (var(--tail-width) + var(--wordplay-border-width)));
+        inset-inline-start: calc(
+            2 * var(--tail-width) - 1 * var(--wordplay-border-width)
         );
-        top: 50%;
-    }
-
-    .baseline .message.flip:before {
-        top: calc(2 * var(--wordplay-spacing));
     }
 
     .message.below:after {
@@ -279,7 +304,7 @@
         inset-inline-start: calc(2 * var(--tail-width));
     }
 
-    .message.below:before {
+    .message.below.flip:before {
         content: '';
         position: absolute;
         border-style: solid;
@@ -288,12 +313,24 @@
         border-color: var(--wordplay-border-color) transparent;
         display: block;
         width: 0;
-        top: calc(-1 * (var(--tail-width) + var(--wordplay-border-width)));
+        top: 0;
         inset-inline-start: calc(
-            2 * var(--tail-width) - 1 * var(--wordplay-border-width)
+            100% - 5 * var(--tail-width) - 1 * var(--wordplay-border-width)
         );
     }
 
+    .message.below.flip:after {
+        content: '';
+        position: absolute;
+        border-style: solid;
+        border-width: 0 var(--tail-width) var(--tail-width);
+        border-color: var(--wordplay-background) transparent;
+        display: block;
+        width: 0;
+        top: 0;
+        inset-inline-start: calc(100% - 5 * var(--tail-width));
+    }
+
     .emotion-kind {
         animation: kind ease 1;
         animation-duration: 0.5s;

src/components/output/OutputView.svelte

@@ -878,7 +878,7 @@
             <div class="message exception" class:mini data-uiid="exception"
                 >{#if mini}!{:else}<Speech
                         glyph={$index?.getNodeConcept(exception.creator) ??
-                            exception.creator.getGlyphs()}
+                            exception.creator.getGlyphs($locales)}
                         invert
                     >
                         <svelte:fragment slot="content">

src/concepts/NodeConcept.ts

@@ -23,8 +23,8 @@ export default class NodeConcept extends Concept {
         this.template = template;
     }
 
-    getGlyphs() {
-        return this.template.getGlyphs();
+    getGlyphs(locales: Locales) {
+        return this.template.getGlyphs(locales);
     }
 
     /** Returns the emotions for the glyphs */
@@ -57,7 +57,7 @@ export default class NodeConcept extends Concept {
 
     getName(locales: Locales, symbolic: boolean) {
         return symbolic
-            ? this.template.getGlyphs().symbols
+            ? this.template.getGlyphs(locales).symbols
             : this.template.getLabel(locales);
     }
 

src/conflicts/MissingInput.ts

@@ -11,6 +11,7 @@ import NodeRef from '@locale/NodeRef';
 import type StreamDefinition from '../nodes/StreamDefinition';
 import concretize from '../locale/concretize';
 import type Locales from '../locale/Locales';
+import ConceptRef from '@locale/ConceptRef';
 
 export default class MissingInput extends Conflict {
     readonly func: FunctionDefinition | StructureDefinition | StreamDefinition;
@@ -22,7 +23,7 @@ export default class MissingInput extends Conflict {
         func: FunctionDefinition | StructureDefinition | StreamDefinition,
         evaluate: Evaluate | BinaryEvaluate,
         last: Token | Expression,
-        expected: Bind
+        expected: Bind,
     ) {
         super(false);
         this.func = func;
@@ -34,31 +35,35 @@ export default class MissingInput extends Conflict {
     getConflictingNodes() {
         return {
             primary: {
-                node: this.evaluate,
+                node: this.input,
                 explanation: (locales: Locales, context: Context) =>
                     concretize(
                         locales,
                         locales.get(
-                            (l) => l.node.Evaluate.conflict.MissingInput.primary
+                            (l) =>
+                                l.node.Evaluate.conflict.MissingInput.primary,
                         ),
-                        new NodeRef(
-                            this.input,
-                            locales,
-                            context,
-                            locales.getName(this.input.names)
-                        )
+                        context.project.contains(this.input)
+                            ? new NodeRef(this.input, locales, context)
+                            : new ConceptRef(
+                                  `${this.func.getPreferredName(
+                                      locales.getLocales(),
+                                  )}/${this.input.getPreferredName(
+                                      locales.getLocales(),
+                                  )}`,
+                              ),
                     ),
             },
             secondary: {
-                node: this.input.names,
+                node: this.evaluate.fun,
                 explanation: (locales: Locales, context: Context) =>
                     concretize(
                         locales,
                         locales.get(
                             (l) =>
-                                l.node.Evaluate.conflict.MissingInput.secondary
+                                l.node.Evaluate.conflict.MissingInput.secondary,
                         ),
-                        new NodeRef(this.evaluate, locales, context)
+                        new NodeRef(this.evaluate.fun, locales, context),
                     ),
             },
         };

src/locale/ConceptRef.ts

@@ -8,4 +8,8 @@ export default class ConceptRef {
     getDescription() {
         return this.concept;
     }
+
+    toText() {
+        return this.concept;
+    }
 }

src/locale/concretize.ts

@@ -4,14 +4,16 @@ import { isUnwritten, withoutAnnotations } from './LocaleText';
 import type Locales from './Locales';
 import type NodeRef from './NodeRef';
 import type ValueRef from './ValueRef';
+import type ConceptRef from './ConceptRef';
 
 export type TemplateInput =
     | number
     | boolean
     | string
     | undefined
     | NodeRef
-    | ValueRef;
+    | ValueRef
+    | ConceptRef;
 
 /** We maintain cache a mapping from template strings to compiled markup, since they are fixed structures.
  * We just reuse them with different inputs.*/

src/locale/en-US.json

@@ -611,8 +611,8 @@
                     "secondary": "oh, am I not supposed to be here?"
                 },
                 "MissingInput": {
-                    "primary": "I'm missing $1, can you add it?",
-                    "secondary": "this input is required, but $1 didn't provide it"
+                    "primary": "I can't evaluate without the input named $1 :(",
+                    "secondary": "Oh, oops. Can you help us out and add it to my list of inputs?"
                 },
                 "NotInstantiable": "I can't make this @StructureDefinition, it has unimplemented functions.",
                 "UnexpectedInput": {

src/nodes/Bind.ts

@@ -675,8 +675,15 @@ export default class Bind extends Expression {
         return [locales.getName(this.names)];
     }
 
-    getGlyphs() {
-        return Glyphs.Bind;
+    getGlyphs(locales: Locales) {
+        const preferredName =
+            this.names.getPreferredName(locales.getLocales())?.getName() ??
+            this.names.getNames()[0];
+        return preferredName
+            ? {
+                  symbols: preferredName,
+              }
+            : Glyphs.Bind;
     }
 
     getKind() {

src/nodes/Content.ts

@@ -1,3 +1,4 @@
+import type ConceptRef from '@locale/ConceptRef';
 import type Locales from '../locale/Locales';
 import type NodeRef from '../locale/NodeRef';
 import type ValueRef from '../locale/ValueRef';
@@ -15,8 +16,8 @@ export default abstract class Content extends Node {
         locales: Locales,
         inputs: TemplateInput[],
         /** A mutable list of token replacements, to preserve preceding space after modifications */
-        replacements: [Node, Node][]
-    ): Content | Token | NodeRef | ValueRef | undefined;
+        replacements: [Node, Node][],
+    ): Content | Token | NodeRef | ValueRef | ConceptRef | undefined;
 
     abstract toText(): string;
 }

src/nodes/Input.ts

@@ -167,7 +167,7 @@ export default class Input extends SimpleExpression {
     }
 
     getGlyphs(): Glyph {
-        return Glyphs.Bind;
+        return { symbols: this.name.getText() + Glyphs.Bind };
     }
 
     getNodeLocale(locales: Locales): NodeText | DescriptiveNodeText {