@antelopejs/dms-ai 0.1.3 → 0.1.5

package/frontend-vue/app/chat/components/TodoList.vue

@@ -0,0 +1,291 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, watch } from "vue";
+import { TODO_PANEL_TITLE, TODO_STATUS } from "../constants/conversation";
+import type { TodoItem } from "../utils/todos";
+
+interface Props {
+	todos: TodoItem[];
+	isRunning: boolean;
+}
+
+const props = defineProps<Props>();
+
+const TODO_ITEM_GAP_PX = 2;
+
+const expanded = ref(true);
+const itemsEl = ref<HTMLElement | null>(null);
+
+const activeIndex = computed<number>(() =>
+	props.todos.findIndex((t) => t.status === TODO_STATUS.IN_PROGRESS),
+);
+
+async function scrollActiveIntoView(): Promise<void> {
+	if (!expanded.value || activeIndex.value < 0) return;
+	await nextTick();
+	const el = itemsEl.value;
+	if (el === null) return;
+	const child = el.children[activeIndex.value];
+	if (child === undefined) return;
+	const list = el.getBoundingClientRect();
+	const item = child.getBoundingClientRect();
+	const margin = item.height + TODO_ITEM_GAP_PX;
+	if (item.top < list.top + margin) {
+		el.scrollTop += item.top - list.top - margin;
+	} else if (item.bottom > list.bottom - margin) {
+		el.scrollTop += item.bottom - list.bottom + margin;
+	}
+}
+
+watch(
+	() => [props.todos, expanded.value],
+	() => {
+		void scrollActiveIntoView();
+	},
+);
+
+onMounted(() => {
+	void scrollActiveIntoView();
+});
+
+const completedCount = computed<number>(
+	() => props.todos.filter((t) => t.status === TODO_STATUS.COMPLETED).length,
+);
+
+const allDone = computed<boolean>(
+	() => props.todos.length > 0 && completedCount.value === props.todos.length,
+);
+
+const progressPercent = computed<number>(() => {
+	if (props.todos.length === 0) return 0;
+	return Math.round((completedCount.value / props.todos.length) * 100);
+});
+
+const activeLabel = computed<string>(() => {
+	const active = props.todos.find((t) => t.status === TODO_STATUS.IN_PROGRESS);
+	if (active !== undefined) return active.activeForm;
+	if (allDone.value) return "";
+	const next = props.todos.find((t) => t.status === TODO_STATUS.PENDING);
+	return next?.content ?? "";
+});
+
+function toggle(): void {
+	expanded.value = !expanded.value;
+}
+
+function todoText(todo: TodoItem): string {
+	return todo.status === TODO_STATUS.IN_PROGRESS
+		? todo.activeForm
+		: todo.content;
+}
+</script>
+
+<template>
+	<section class="todo-dock" :data-complete="allDone">
+		<button
+			type="button"
+			class="todo-head"
+			:aria-expanded="expanded"
+			@click="toggle"
+		>
+			<span class="todo-toggle">{{ expanded ? "▾" : "▸" }}</span>
+			<span class="todo-title">{{ TODO_PANEL_TITLE }}</span>
+			<span v-if="!expanded && activeLabel.length > 0" class="todo-active">
+				{{ activeLabel }}
+			</span>
+			<span class="todo-count">{{ completedCount }}/{{ todos.length }}</span>
+		</button>
+		<div class="todo-track" aria-hidden="true">
+			<div class="todo-fill" :style="{ width: `${progressPercent}%` }"></div>
+		</div>
+		<ul v-if="expanded" ref="itemsEl" class="todo-items">
+			<li
+				v-for="(todo, i) in todos"
+				:key="i"
+				class="todo-item"
+				:data-status="todo.status"
+			>
+				<span class="todo-glyph" :data-status="todo.status" aria-hidden="true">
+					<svg
+						v-if="todo.status === 'completed'"
+						viewBox="0 0 24 24"
+						width="12"
+						height="12"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="3"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<path d="M20 6 9 17l-5-5" />
+					</svg>
+					<svg
+						v-else-if="todo.status === 'in_progress' && isRunning"
+						class="todo-spin"
+						viewBox="0 0 24 24"
+						width="12"
+						height="12"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2.5"
+						stroke-linecap="round"
+					>
+						<path d="M21 12a9 9 0 1 1-6.2-8.6" />
+					</svg>
+					<svg
+						v-else
+						viewBox="0 0 24 24"
+						width="12"
+						height="12"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+					>
+						<circle cx="12" cy="12" r="8" />
+					</svg>
+				</span>
+				<span class="todo-text">{{ todoText(todo) }}</span>
+			</li>
+		</ul>
+	</section>
+</template>
+
+<style scoped>
+.todo-dock {
+	flex: 0 0 auto;
+	background: var(--surface-side);
+	border-top: 1px solid var(--hair);
+}
+
+.todo-head {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	width: 100%;
+	padding: 8px 14px;
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	font: inherit;
+	text-align: left;
+	color: var(--fg);
+}
+
+.todo-head:hover {
+	background: var(--surface-inset);
+}
+
+.todo-toggle {
+	color: var(--fg-tertiary);
+	font-size: 11px;
+	flex: 0 0 auto;
+}
+
+.todo-title {
+	font-weight: 600;
+	font-size: 12.5px;
+	flex: 0 0 auto;
+}
+
+.todo-active {
+	flex: 1;
+	min-width: 0;
+	font-size: 11.5px;
+	color: var(--fg-tertiary);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.todo-count {
+	margin-left: auto;
+	font-family: var(--font-code);
+	font-size: 10px;
+	font-weight: 700;
+	letter-spacing: 0.04em;
+	color: var(--fg-tertiary);
+	flex: 0 0 auto;
+}
+
+.todo-dock[data-complete="true"] .todo-count {
+	color: var(--success-400);
+}
+
+.todo-track {
+	height: 2px;
+	background: var(--surface-inset);
+}
+
+.todo-fill {
+	height: 100%;
+	background: var(--accent);
+	transition: width 0.25s ease;
+}
+
+.todo-dock[data-complete="true"] .todo-fill {
+	background: var(--success-400);
+}
+
+.todo-items {
+	list-style: none;
+	margin: 0;
+	padding: 6px 8px 8px;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	max-height: 150px;
+	overflow-y: auto;
+}
+
+.todo-item {
+	display: flex;
+	align-items: flex-start;
+	gap: 8px;
+	padding: 3px 4px;
+	font-size: 12.5px;
+	line-height: 1.45;
+}
+
+.todo-glyph {
+	width: 16px;
+	height: 16px;
+	flex: 0 0 auto;
+	display: grid;
+	place-items: center;
+	margin-top: 1px;
+	color: var(--fg-tertiary);
+}
+
+.todo-glyph[data-status="completed"] {
+	color: var(--success-400);
+}
+
+.todo-glyph[data-status="in_progress"] {
+	color: var(--accent);
+}
+
+.todo-spin {
+	animation: todo-spin 0.9s linear infinite;
+}
+
+@keyframes todo-spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+.todo-text {
+	min-width: 0;
+	word-break: break-word;
+	color: var(--fg-secondary);
+}
+
+.todo-item[data-status="completed"] .todo-text {
+	color: var(--fg-tertiary);
+	text-decoration: line-through;
+}
+
+.todo-item[data-status="in_progress"] .todo-text {
+	color: var(--fg);
+	font-weight: 500;
+}
+</style>

package/frontend-vue/app/chat/components/ToolCallEntry.vue

@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { STATUS_LABELS, TOOL_STATUS } from "../constants/conversation";
+import type { ToolCallMessage } from "../types/conversation";
+import { stringifyValue } from "../utils/format";
+import { toolLabel, toolSummary } from "../utils/tool-summary";
+
+interface Props {
+	message: ToolCallMessage;
+}
+
+const props = defineProps<Props>();
+const isExpanded = ref(false);
+
+const STATUS_BADGE_LABELS: Record<string, string> = {
+	[TOOL_STATUS.PENDING]: STATUS_LABELS.PENDING,
+	[TOOL_STATUS.SUCCESS]: STATUS_LABELS.SUCCESS,
+	[TOOL_STATUS.ERROR]: STATUS_LABELS.ERROR,
+};
+
+const statusLabel = computed<string>(
+	() => STATUS_BADGE_LABELS[props.message.status] ?? props.message.status,
+);
+
+const title = computed<string>(() =>
+	props.message.toolName.length > 0
+		? toolLabel(props.message.toolName)
+		: "Tool",
+);
+const summary = computed<string>(() =>
+	toolSummary(props.message.toolName, props.message.args),
+);
+
+const argsText = computed<string>(() => stringifyValue(props.message.args));
+const resultText = computed<string>(() => stringifyValue(props.message.result));
+
+function toggle(): void {
+	isExpanded.value = !isExpanded.value;
+}
+</script>
+
+<template>
+	<article class="tool-entry" :data-status="message.status">
+		<button
+			type="button"
+			class="tool-header"
+			:aria-expanded="isExpanded"
+			@click="toggle"
+		>
+			<span class="tool-icon" aria-hidden="true">
+				<svg
+					viewBox="0 0 24 24"
+					width="14"
+					height="14"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path
+						d="M14.7 6.3a4 4 0 0 0-5.6 5.6l-6 6a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l6-6a4 4 0 0 0 5.6-5.6l-2.5 2.5-2-2 2.5-2.5z"
+					/>
+				</svg>
+			</span>
+			<span class="tool-text">
+				<span class="tool-name">{{ title }}</span>
+				<span v-if="summary.length > 0" class="tool-summary">
+					{{ summary }}
+				</span>
+			</span>
+			<span class="tool-status" :data-status="message.status">
+				{{ statusLabel }}
+			</span>
+			<span class="tool-toggle">{{ isExpanded ? "▾" : "▸" }}</span>
+		</button>
+		<div v-if="isExpanded" class="tool-body">
+			<section v-if="argsText.length > 0" class="tool-section">
+				<h4 class="tool-section-title">args</h4>
+				<pre class="tool-pre">{{ argsText }}</pre>
+			</section>
+			<section v-if="resultText.length > 0" class="tool-section">
+				<h4 class="tool-section-title">result</h4>
+				<pre class="tool-pre">{{ resultText }}</pre>
+			</section>
+		</div>
+	</article>
+</template>
+
+<style scoped>
+.tool-entry {
+	border: 1px solid var(--hair);
+	border-radius: var(--corner-md);
+	background: var(--surface-card);
+	overflow: hidden;
+}
+
+.tool-header {
+	display: flex;
+	align-items: center;
+	gap: 9px;
+	width: 100%;
+	padding: 8px 10px;
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	font: inherit;
+	text-align: left;
+	color: var(--fg);
+}
+
+.tool-header:hover {
+	background: var(--surface-card-2);
+}
+
+.tool-icon {
+	width: 24px;
+	height: 24px;
+	flex: 0 0 auto;
+	display: grid;
+	place-items: center;
+	border-radius: 6px;
+	background: var(--surface-inset);
+	border: 1px solid var(--hair);
+	color: var(--fg-secondary);
+}
+
+.tool-text {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	align-items: baseline;
+	gap: 8px;
+}
+
+.tool-name {
+	font-weight: 600;
+	font-size: 12.5px;
+	flex: 0 0 auto;
+}
+
+.tool-summary {
+	font-family: var(--font-code);
+	font-size: 11px;
+	color: var(--fg-tertiary);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	min-width: 0;
+}
+
+.tool-status {
+	font-family: var(--font-code);
+	font-size: 9px;
+	font-weight: 700;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+	padding: 2px 6px;
+	border-radius: var(--corner-sm);
+	background: var(--surface-inset);
+	color: var(--fg-tertiary);
+	flex: 0 0 auto;
+}
+
+.tool-status[data-status="pending"] {
+	background: var(--warning-bg);
+	color: var(--warning-400);
+}
+
+.tool-status[data-status="success"] {
+	background: var(--success-bg);
+	color: var(--success-400);
+}
+
+.tool-status[data-status="error"] {
+	background: var(--danger-bg);
+	color: var(--danger-400);
+}
+
+.tool-toggle {
+	color: var(--fg-tertiary);
+	font-size: 11px;
+	flex: 0 0 auto;
+}
+
+.tool-body {
+	padding: 10px 12px;
+	border-top: 1px solid var(--hair);
+}
+
+.tool-section + .tool-section {
+	margin-top: 8px;
+}
+
+.tool-section-title {
+	margin: 0 0 4px;
+	font-family: var(--font-code);
+	font-size: 10px;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	color: var(--fg-tertiary);
+}
+
+.tool-pre {
+	margin: 0;
+	padding: 8px;
+	background: var(--surface-inset);
+	border: 1px solid var(--hair);
+	border-radius: var(--corner-sm);
+	font-family: var(--font-code);
+	font-size: 11px;
+	color: var(--fg-secondary);
+	white-space: pre-wrap;
+	word-break: break-word;
+	max-height: 300px;
+	overflow: auto;
+}
+</style>