@antelopejs/dms-ai 0.1.6 → 0.2.0

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

@@ -1,323 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from "vue";
-import {
-	PERMISSION_BUTTONS,
-	PERMISSION_DECISIONS,
-	PERMISSION_INLINE_LABELS,
-	PERMISSION_LABELS,
-	type PermissionDecision,
-} from "../constants/permissions";
-import type { PermissionRequestData } from "../types/permission";
-import { stringifyValue } from "../utils/format";
-
-interface Props {
-	requests: PermissionRequestData[];
-}
-
-const props = defineProps<Props>();
-interface Emits {
-	decide: [requestId: string, decision: PermissionDecision];
-	decideAll: [decision: PermissionDecision];
-}
-
-const emit = defineEmits<Emits>();
-
-const expanded = ref<Set<string>>(new Set());
-
-const heading = computed<string>(() =>
-	props.requests.length > 1
-		? PERMISSION_INLINE_LABELS.HEADING_MANY
-		: PERMISSION_INLINE_LABELS.HEADING_ONE,
-);
-const showBulk = computed<boolean>(() => props.requests.length > 1);
-
-const argsTextById = computed<Record<string, string>>(() => {
-	const out: Record<string, string> = {};
-	for (const req of props.requests) {
-		out[req.requestId] = stringifyValue(req.args);
-	}
-	return out;
-});
-
-function isExpanded(id: string): boolean {
-	return expanded.value.has(id);
-}
-
-function toggleArgs(id: string): void {
-	const next = new Set(expanded.value);
-	if (next.has(id)) next.delete(id);
-	else next.add(id);
-	expanded.value = next;
-}
-
-function decide(id: string, decision: PermissionDecision): void {
-	emit("decide", id, decision);
-}
-
-function allowAll(): void {
-	emit("decideAll", PERMISSION_DECISIONS.ALLOW_ONCE);
-}
-
-function denyAll(): void {
-	emit("decideAll", PERMISSION_DECISIONS.DENY);
-}
-</script>
-
-<template>
-	<section class="perm-tray" role="group" :aria-label="heading">
-		<header class="perm-tray-head">
-			<span class="perm-tray-title">{{ heading }}</span>
-			<div v-if="showBulk" class="perm-bulk">
-				<button type="button" class="perm-bulk-btn deny" @click="denyAll">
-					{{ PERMISSION_INLINE_LABELS.DENY_ALL }}
-				</button>
-				<button type="button" class="perm-bulk-btn allow" @click="allowAll">
-					{{ PERMISSION_INLINE_LABELS.APPLY_ALL }}
-				</button>
-			</div>
-		</header>
-
-		<article v-for="req in requests" :key="req.requestId" class="perm-card">
-			<div class="perm-card-top">
-				<span class="perm-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>
-				<div class="perm-card-text">
-					<span class="perm-tool">{{ req.toolName }}</span>
-					<span class="perm-summary">{{ req.summary }}</span>
-				</div>
-			</div>
-
-			<button
-				v-if="argsTextById[req.requestId].length > 0"
-				type="button"
-				class="perm-args-toggle"
-				:aria-expanded="isExpanded(req.requestId)"
-				@click="toggleArgs(req.requestId)"
-			>
-				{{
-					isExpanded(req.requestId)
-						? PERMISSION_LABELS.ARGS_TOGGLE_HIDE
-						: PERMISSION_LABELS.ARGS_TOGGLE_SHOW
-				}}
-			</button>
-			<pre v-if="isExpanded(req.requestId)" class="perm-args-pre">{{
-				argsTextById[req.requestId]
-			}}</pre>
-
-			<footer class="perm-actions">
-				<button
-					v-for="button in PERMISSION_BUTTONS"
-					:key="button.decision"
-					type="button"
-					class="perm-button"
-					:data-variant="button.variant"
-					@click="decide(req.requestId, button.decision)"
-				>
-					{{ button.label }}
-				</button>
-			</footer>
-		</article>
-	</section>
-</template>
-
-<style scoped>
-.perm-tray {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	padding: 10px 12px;
-	border-top: 1px solid var(--hair-strong);
-	background: var(--surface-inset);
-	max-height: 46vh;
-	overflow-y: auto;
-}
-
-.perm-tray-head {
-	display: flex;
-	align-items: center;
-	gap: 10px;
-}
-
-.perm-tray-title {
-	flex: 1;
-	font-size: 11px;
-	font-weight: 700;
-	letter-spacing: 0.04em;
-	text-transform: uppercase;
-	color: var(--fg-tertiary);
-}
-
-.perm-bulk {
-	display: flex;
-	gap: 6px;
-	flex: 0 0 auto;
-}
-
-.perm-bulk-btn {
-	padding: 5px 11px;
-	border-radius: var(--corner-md);
-	border: 1px solid transparent;
-	font: inherit;
-	font-size: 12px;
-	font-weight: 600;
-	cursor: pointer;
-}
-
-.perm-bulk-btn.allow {
-	background: var(--accent);
-	color: var(--accent-fg);
-}
-
-.perm-bulk-btn.allow:hover {
-	background: var(--accent-strong);
-}
-
-.perm-bulk-btn.deny {
-	background: transparent;
-	color: var(--danger-400);
-	border-color: color-mix(in srgb, var(--danger-400) 35%, transparent);
-}
-
-.perm-bulk-btn.deny:hover {
-	background: color-mix(in srgb, var(--danger-400) 18%, transparent);
-}
-
-.perm-card {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	padding: 11px 12px;
-	border: 1px solid var(--hair);
-	border-radius: var(--corner-md);
-	background: var(--surface-card);
-}
-
-.perm-card-top {
-	display: flex;
-	align-items: center;
-	gap: 10px;
-}
-
-.perm-icon {
-	width: 28px;
-	height: 28px;
-	flex: 0 0 auto;
-	display: grid;
-	place-items: center;
-	border-radius: 7px;
-	background: var(--surface-inset);
-	border: 1px solid var(--hair);
-	color: var(--fg-secondary);
-}
-
-.perm-card-text {
-	flex: 1;
-	min-width: 0;
-	display: flex;
-	flex-direction: column;
-	gap: 2px;
-}
-
-.perm-tool {
-	font-family: var(--font-code);
-	font-size: 12.5px;
-	font-weight: 600;
-	color: var(--accent);
-}
-
-.perm-summary {
-	font-size: 12.5px;
-	line-height: 1.4;
-	color: var(--fg-secondary);
-	word-break: break-word;
-}
-
-.perm-args-toggle {
-	align-self: flex-start;
-	background: none;
-	border: none;
-	color: var(--accent);
-	font: inherit;
-	font-size: 12px;
-	padding: 0;
-	cursor: pointer;
-}
-
-.perm-args-toggle:hover {
-	text-decoration: underline;
-}
-
-.perm-args-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: 200px;
-	overflow: auto;
-}
-
-.perm-actions {
-	display: flex;
-	gap: 8px;
-	flex-wrap: wrap;
-}
-
-.perm-button {
-	padding: 6px 12px;
-	border-radius: var(--corner-md);
-	border: 1px solid transparent;
-	font: inherit;
-	font-size: 12px;
-	font-weight: 600;
-	cursor: pointer;
-}
-
-.perm-button[data-variant="primary"] {
-	background: var(--accent);
-	color: var(--accent-fg);
-}
-
-.perm-button[data-variant="primary"]:hover {
-	background: var(--accent-strong);
-}
-
-.perm-button[data-variant="secondary"] {
-	background: var(--surface-inset);
-	color: var(--fg);
-	border-color: var(--hair);
-}
-
-.perm-button[data-variant="secondary"]:hover {
-	background: var(--surface-card-2);
-}
-
-.perm-button[data-variant="danger"] {
-	background: var(--danger-bg);
-	color: var(--danger-400);
-	border-color: color-mix(in srgb, var(--danger-400) 35%, transparent);
-}
-
-.perm-button[data-variant="danger"]:hover {
-	background: color-mix(in srgb, var(--danger-400) 20%, transparent);
-}
-</style>

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

@@ -1,275 +0,0 @@
-<script setup lang="ts">
-import { computed, reactive } from "vue";
-import type { QuestionRequestData } from "../types/question";
-
-interface Props {
-	requests: QuestionRequestData[];
-}
-
-const props = defineProps<Props>();
-interface Emits {
-	answer: [requestId: string, answers: string[]];
-}
-
-const emit = defineEmits<Emits>();
-
-interface Selection {
-	mode: "option" | "other";
-	option: string;
-	other: string;
-}
-
-const state = reactive<Record<string, Selection>>({});
-
-function keyOf(requestId: string, qIndex: number): string {
-	return `${requestId}#${qIndex}`;
-}
-
-function entryOf(requestId: string, qIndex: number): Selection {
-	const key = keyOf(requestId, qIndex);
-	const existing = state[key];
-	if (existing !== undefined) return existing;
-	const fresh: Selection = { mode: "option", option: "", other: "" };
-	state[key] = fresh;
-	return fresh;
-}
-
-function answerFor(requestId: string, qIndex: number): string {
-	const entry = state[keyOf(requestId, qIndex)];
-	if (entry === undefined) return "";
-	return entry.mode === "other" ? entry.other.trim() : entry.option;
-}
-
-function isOptionSelected(
-	requestId: string,
-	qIndex: number,
-	label: string,
-): boolean {
-	const entry = state[keyOf(requestId, qIndex)];
-	return entry?.mode === "option" && entry.option === label;
-}
-
-function isOtherActive(requestId: string, qIndex: number): boolean {
-	return state[keyOf(requestId, qIndex)]?.mode === "other";
-}
-
-function pickOption(requestId: string, qIndex: number, label: string): void {
-	const entry = entryOf(requestId, qIndex);
-	entry.mode = "option";
-	entry.option = label;
-}
-
-function pickOther(requestId: string, qIndex: number): void {
-	entryOf(requestId, qIndex).mode = "other";
-}
-
-function onOtherInput(requestId: string, qIndex: number, event: Event): void {
-	entryOf(requestId, qIndex).other = (event.target as HTMLInputElement).value;
-}
-
-const answerableById = computed<Record<string, boolean>>(() => {
-	const out: Record<string, boolean> = {};
-	for (const req of props.requests) {
-		out[req.requestId] = req.questions.every(
-			(_q, qi) => answerFor(req.requestId, qi).length > 0,
-		);
-	}
-	return out;
-});
-
-function submit(req: QuestionRequestData): void {
-	if (!answerableById.value[req.requestId]) return;
-	const answers = req.questions.map((_q, qi) => answerFor(req.requestId, qi));
-	emit("answer", req.requestId, answers);
-}
-</script>
-
-<template>
-	<section class="q-tray" role="group" aria-label="Question from the assistant">
-		<article v-for="req in requests" :key="req.requestId" class="q-card">
-			<div v-for="(question, qi) in req.questions" :key="qi" class="q-block">
-				<span class="q-header">{{ question.header }}</span>
-				<p class="q-question">{{ question.question }}</p>
-
-				<div class="q-options">
-					<button
-						v-for="option in question.options"
-						:key="option.label"
-						type="button"
-						class="q-option"
-						:data-selected="isOptionSelected(req.requestId, qi, option.label)"
-						:title="option.description"
-						@click="pickOption(req.requestId, qi, option.label)"
-					>
-						<span class="q-option-label">{{ option.label }}</span>
-						<span class="q-option-desc">{{ option.description }}</span>
-					</button>
-
-					<div class="q-other">
-						<button
-							type="button"
-							class="q-option q-other-toggle"
-							:data-selected="isOtherActive(req.requestId, qi)"
-							@click="pickOther(req.requestId, qi)"
-						>
-							<span class="q-option-label">Other…</span>
-						</button>
-						<input
-							v-if="isOtherActive(req.requestId, qi)"
-							type="text"
-							class="q-other-input"
-							placeholder="Type a custom answer"
-							@input="onOtherInput(req.requestId, qi, $event)"
-							@keydown.enter.prevent="submit(req)"
-						/>
-					</div>
-				</div>
-			</div>
-
-			<footer class="q-actions">
-				<button
-					type="button"
-					class="q-send"
-					:disabled="!answerableById[req.requestId]"
-					@click="submit(req)"
-				>
-					Send answer
-				</button>
-			</footer>
-		</article>
-	</section>
-</template>
-
-<style scoped>
-.q-tray {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	padding: 10px 12px;
-	border-top: 1px solid var(--hair-strong);
-	background: var(--surface-inset);
-	max-height: 52vh;
-	overflow-y: auto;
-}
-
-.q-card {
-	display: flex;
-	flex-direction: column;
-	gap: 12px;
-	padding: 12px;
-	border: 1px solid var(--hair);
-	border-radius: var(--corner-md);
-	background: var(--surface-card);
-}
-
-.q-block {
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
-}
-
-.q-header {
-	font-size: 11px;
-	font-weight: 700;
-	letter-spacing: 0.04em;
-	text-transform: uppercase;
-	color: var(--fg-tertiary);
-}
-
-.q-question {
-	margin: 0;
-	font-size: 13px;
-	line-height: 1.4;
-	color: var(--fg);
-	word-break: break-word;
-}
-
-.q-options {
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
-}
-
-.q-option {
-	display: flex;
-	flex-direction: column;
-	gap: 2px;
-	text-align: left;
-	padding: 8px 10px;
-	border-radius: var(--corner-md);
-	border: 1px solid var(--hair);
-	background: var(--surface-inset);
-	color: var(--fg);
-	font: inherit;
-	cursor: pointer;
-}
-
-.q-option:hover {
-	background: var(--surface-card-2);
-}
-
-.q-option[data-selected="true"] {
-	border-color: var(--accent);
-	background: var(--accent-bg);
-}
-
-.q-option-label {
-	font-size: 12.5px;
-	font-weight: 600;
-	color: var(--fg);
-}
-
-.q-option-desc {
-	font-size: 11.5px;
-	line-height: 1.35;
-	color: var(--fg-secondary);
-	word-break: break-word;
-}
-
-.q-other {
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
-}
-
-.q-other-input {
-	padding: 7px 10px;
-	border-radius: var(--corner-md);
-	border: 1px solid var(--hair);
-	background: var(--surface-inset);
-	color: var(--fg);
-	font: inherit;
-	font-size: 12.5px;
-}
-
-.q-other-input:focus {
-	outline: none;
-	border-color: var(--accent);
-}
-
-.q-actions {
-	display: flex;
-	justify-content: flex-end;
-}
-
-.q-send {
-	padding: 6px 14px;
-	border-radius: var(--corner-md);
-	border: 1px solid transparent;
-	background: var(--accent);
-	color: var(--accent-fg);
-	font: inherit;
-	font-size: 12px;
-	font-weight: 600;
-	cursor: pointer;
-}
-
-.q-send:hover:not(:disabled) {
-	background: var(--accent-strong);
-}
-
-.q-send:disabled {
-	opacity: 0.5;
-	cursor: not-allowed;
-}
-</style>

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

@@ -1,109 +0,0 @@
-<script setup lang="ts">
-import type { QueuedMessage } from "../types/conversation";
-
-interface Props {
-	queue: QueuedMessage[];
-}
-
-defineProps<Props>();
-
-const CANCEL_ICON = "i-ph-x";
-interface Emits {
-	cancel: [id: string];
-}
-
-defineEmits<Emits>();
-
-function attachmentLabel(message: QueuedMessage): string {
-	const count = message.attachments.length;
-	if (count === 0) return "";
-	return count === 1 ? "1 file" : `${count} files`;
-}
-</script>
-
-<template>
-	<ul class="queued" aria-label="Queued messages">
-		<li v-for="message in queue" :key="message.id" class="queued-item">
-			<span class="queued-tag" aria-hidden="true">Queued</span>
-			<span class="queued-text">{{ message.content }}</span>
-			<span v-if="attachmentLabel(message).length > 0" class="queued-att">
-				{{ attachmentLabel(message) }}
-			</span>
-			<button
-				type="button"
-				class="queued-cancel"
-				:aria-label="`Cancel queued message`"
-				title="Cancel"
-				@click="$emit('cancel', message.id)"
-			>
-				<UIcon :name="CANCEL_ICON" class="size-[13px]" />
-			</button>
-		</li>
-	</ul>
-</template>
-
-<style scoped>
-.queued {
-	list-style: none;
-	margin: 0;
-	padding: 8px 14px 0;
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-	background: var(--surface-side);
-}
-
-.queued-item {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 5px 8px;
-	background: var(--surface-inset);
-	border: 1px dashed var(--hair-strong);
-	border-radius: var(--corner-md);
-	font-size: 12.5px;
-}
-
-.queued-tag {
-	flex: 0 0 auto;
-	font-family: var(--font-code);
-	font-size: 9px;
-	font-weight: 700;
-	letter-spacing: 0.04em;
-	text-transform: uppercase;
-	color: var(--fg-tertiary);
-}
-
-.queued-text {
-	flex: 1;
-	min-width: 0;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	color: var(--fg-secondary);
-}
-
-.queued-att {
-	flex: 0 0 auto;
-	font-size: 10px;
-	color: var(--fg-tertiary);
-}
-
-.queued-cancel {
-	flex: 0 0 auto;
-	display: grid;
-	place-items: center;
-	width: 20px;
-	height: 20px;
-	border: none;
-	background: transparent;
-	border-radius: 5px;
-	color: var(--fg-tertiary);
-	cursor: pointer;
-}
-
-.queued-cancel:hover {
-	background: var(--danger-bg);
-	color: var(--danger-400);
-}
-</style>