console/app/components/showcase/Editor.vue at main · agentruntimecontrolprotocol/console · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<script setup lang="ts">
const basicContent = ref('<p>Agent <strong>runtime-alpha</strong> accepted job <code>job_01HZ</code> and is processing trace events.</p>')

const markdownContent = ref(`# Session Trace

**Runtime:** agent-runtime-alpha
**Job:** \`job_01HZ9K\`

> Lease renewed. Session remains active.

- Event dispatched: \`agent.started\`
- Event dispatched: \`agent.heartbeat\`
- Trace finalized with exit code \`0\`
`)

const readonlyContent = ref('<p>Session <strong>sess_XK92</strong> is <em>read-only</em>. Runtime lease has expired — no further writes accepted.</p>')

const toolbarItems = [
  [
    { kind: 'mark', mark: 'bold', icon: 'i-material-symbols-format-bold', tooltip: { text: 'Bold' } },
    { kind: 'mark', mark: 'italic', icon: 'i-material-symbols-format-italic', tooltip: { text: 'Italic' } },
    { kind: 'mark', mark: 'strike', icon: 'i-material-symbols-format-strikethrough', tooltip: { text: 'Strikethrough' } },
    { kind: 'mark', mark: 'code', icon: 'i-material-symbols-code', tooltip: { text: 'Inline code' } },
  ],
  [
    { kind: 'heading', level: 1, icon: 'i-material-symbols-format-h1', tooltip: { text: 'Heading 1' } },
    { kind: 'heading', level: 2, icon: 'i-material-symbols-format-h2', tooltip: { text: 'Heading 2' } },
    { kind: 'paragraph', icon: 'i-material-symbols-format-paragraph', tooltip: { text: 'Paragraph' } },
  ],
  [
    { kind: 'bulletList', icon: 'i-material-symbols-format-list-bulleted', tooltip: { text: 'Bullet list' } },
    { kind: 'orderedList', icon: 'i-material-symbols-format-list-numbered', tooltip: { text: 'Ordered list' } },
    { kind: 'blockquote', icon: 'i-material-symbols-format-quote', tooltip: { text: 'Blockquote' } },
    { kind: 'codeBlock', icon: 'i-material-symbols-data-object', tooltip: { text: 'Code block' } },
  ],
  [
    { kind: 'undo', icon: 'i-material-symbols-undo', tooltip: { text: 'Undo' } },
    { kind: 'redo', icon: 'i-material-symbols-redo', tooltip: { text: 'Redo' } },
    { kind: 'clearFormatting', icon: 'i-material-symbols-format-clear', tooltip: { text: 'Clear formatting' } },
  ],
]
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Basic editor with toolbar">
      <div class="w-full max-w-2xl rounded-lg border border-(--ui-border) overflow-hidden">
        <UEditor v-model="basicContent" placeholder="Describe your agent job…" :mention="false">
          <template #default="{ editor }">
            <UEditorToolbar :editor="editor" :items="toolbarItems" />
          </template>
        </UEditor>
      </div>
    </GallerySection>

    <GallerySection title="Markdown mode">
      <div class="w-full max-w-2xl rounded-lg border border-(--ui-border) overflow-hidden">
        <UEditor
          v-model="markdownContent"
          content-type="markdown"
          placeholder="Write a session trace in Markdown…"
          :mention="false"
        >
          <template #default="{ editor }">
            <UEditorToolbar :editor="editor" :items="toolbarItems" />
          </template>
        </UEditor>
      </div>
    </GallerySection>

    <GallerySection title="Read-only (expired lease)">
      <div class="w-full max-w-2xl rounded-lg border border-(--ui-border) bg-(--ui-bg-muted) overflow-hidden opacity-70">
        <UEditor
          v-model="readonlyContent"
          :editable="false"
          :mention="false"
          placeholder="No content."
        />
      </div>
    </GallerySection>

    <GallerySection title="Placeholder only (empty editor)">
      <div class="w-full max-w-2xl rounded-lg border border-(--ui-border) overflow-hidden">
        <UEditor
          placeholder="Start typing an agent instruction or event payload…"
          :mention="false"
        >
          <template #default="{ editor }">
            <UEditorToolbar :editor="editor" :items="[[
              { kind: 'mark', mark: 'bold', icon: 'i-material-symbols-format-bold' },
              { kind: 'mark', mark: 'italic', icon: 'i-material-symbols-format-italic' },
              { kind: 'mark', mark: 'code', icon: 'i-material-symbols-code' },
              { kind: 'bulletList', icon: 'i-material-symbols-format-list-bulleted' },
              { kind: 'codeBlock', icon: 'i-material-symbols-data-object' },
            ]]" />
          </template>
        </UEditor>
      </div>
    </GallerySection>
  </div>
</template>