@antelopejs/dms-ai 0.1.5 → 0.2.0

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

@@ -1,291 +0,0 @@
-<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

@@ -1,218 +0,0 @@
-<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>

package/frontend-vue/app/chat/constants/connection-banner.ts

@@ -1,7 +0,0 @@
-export const BANNER_LABELS = {
-	connecting: "Connecting…",
-	reconnecting: "Reconnecting…",
-	disconnected: "Disconnected",
-} as const;
-
-export const RECONNECT_BUTTON_LABEL = "Reconnect now";

package/frontend-vue/app/chat/constants/conversation-drawer.ts

@@ -1,13 +0,0 @@
-export const DRAWER_TITLE = "Conversations";
-export const NEW_CONVERSATION_LABEL = "+ New";
-export const EMPTY_LIST_LABEL = "No conversations yet";
-export const DELETE_BUTTON_LABEL = "Delete";
-export const DELETE_BUTTON_GLYPH = "🗑";
-export const TOGGLE_DRAWER_LABEL = "Conversations";
-export const CLOSE_DRAWER_LABEL = "Close";
-
-export const RELATIVE_TIME_NOW = "just now";
-export const SECONDS_PER_MINUTE = 60;
-export const MINUTES_PER_HOUR = 60;
-export const HOURS_PER_DAY = 24;
-export const DAYS_BEFORE_DATE = 7;

package/frontend-vue/app/chat/constants/permissions.ts

@@ -1,50 +0,0 @@
-export const PERMISSION_DECISION_VALUES = [
-	"allow_once",
-	"allow_session",
-	"deny",
-] as const;
-
-export type PermissionDecision = (typeof PERMISSION_DECISION_VALUES)[number];
-
-export const PERMISSION_DECISIONS = {
-	ALLOW_ONCE: "allow_once",
-	ALLOW_SESSION: "allow_session",
-	DENY: "deny",
-} as const;
-
-export const PERMISSION_BUTTONS: ReadonlyArray<{
-	label: string;
-	decision: PermissionDecision;
-	variant: "primary" | "secondary" | "danger";
-}> = [
-	{
-		label: "Approve once",
-		decision: PERMISSION_DECISIONS.ALLOW_ONCE,
-		variant: "primary",
-	},
-	{
-		label: "Approve session",
-		decision: PERMISSION_DECISIONS.ALLOW_SESSION,
-		variant: "secondary",
-	},
-	{
-		label: "Deny",
-		decision: PERMISSION_DECISIONS.DENY,
-		variant: "danger",
-	},
-] as const;
-
-export const PERMISSION_LABELS = {
-	TOOL_NAME: "Tool",
-	SUMMARY: "Action",
-	ARGS_TOGGLE_SHOW: "Show details",
-	ARGS_TOGGLE_HIDE: "Hide details",
-	ARGS_HEADING: "Arguments",
-} as const;
-
-export const PERMISSION_INLINE_LABELS = {
-	HEADING_ONE: "Permission required",
-	HEADING_MANY: "Permissions required",
-	APPLY_ALL: "Allow all",
-	DENY_ALL: "Deny all",
-} as const;

package/frontend-vue/app/chat/utils/tool-summary.ts

@@ -1,53 +0,0 @@
-const MAX_DETAIL_CHARS = 80;
-const TRUNCATE_SUFFIX = "...";
-
-const TOOL_LABELS: Record<string, string> = {
-	Bash: "Run shell command",
-	Edit: "Edit file",
-	Write: "Write file",
-	Read: "Read file",
-	Glob: "Glob pattern",
-	Grep: "Grep pattern",
-};
-
-const DETAIL_ARG_KEYS: Record<string, string> = {
-	Bash: "command",
-	Edit: "file_path",
-	Write: "file_path",
-	Read: "file_path",
-	Glob: "pattern",
-	Grep: "pattern",
-};
-
-function shorten(value: string): string {
-	if (value.length <= MAX_DETAIL_CHARS) return value;
-	const sliceEnd = MAX_DETAIL_CHARS - TRUNCATE_SUFFIX.length;
-	return `${value.slice(0, sliceEnd)}${TRUNCATE_SUFFIX}`;
-}
-
-function readString(args: unknown, key: string): string {
-	if (args === null || typeof args !== "object") return "";
-	const value = (args as Record<string, unknown>)[key];
-	return typeof value === "string" ? value : "";
-}
-
-function detailFor(toolName: string, args: unknown): string {
-	const argKey = DETAIL_ARG_KEYS[toolName];
-	if (argKey === undefined) return "";
-	return shorten(readString(args, argKey));
-}
-
-/**
- * Mirror of the sidecar's tool-summary helper: a tool name and its args as a
- * short line for the collapsed cluster summary and the per-tool rows. Kept
- * small: the server already sends a `summary` on permission requests; this
- * only covers streamed tool calls, which carry raw args instead.
- */
-export function toolSummary(toolName: string, args: unknown): string {
-	const detail = detailFor(toolName, args);
-	return detail.length > 0 ? detail : toolName;
-}
-
-export function toolLabel(toolName: string): string {
-	return TOOL_LABELS[toolName] ?? toolName;
-}