bvandeusen/FabledScribe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 50 Wiki Activity

Redesign writing assistant UI: right-side panel, diff view, proofread, floating inline assist

Browse Source 
- sectionParser.ts: add parseFallbackSections() — splits heading-less notes
  by paragraph boundaries; single-line ≤120 char paragraphs become pseudo-headings
  so Q&A-style notes get individual selectable sections in the assist panel

- useAssist.ts: add DiffLine type + computeDiff() (LCS line diff), isProofreading
  ref, diff computed, proofread() method (full-document one-click), reset
  isProofreading in accept() and reject()

- NoteEditorView + TaskEditorView: complete layout redesign
  - Assist panel moves from bottom 33% to right-side 320px column (flex-row)
  - ✨ Assist toggle button in toolbar, state persisted to localStorage
  - Floating ✨ pill button (teleported to <body>) above text selections;
    click opens panel with selection pre-loaded and instruction textarea focused
  - Proofread button in panel header: sends entire document, labels streaming
    as "Proofreading document..." and review as "Document proofread"
  - Review state shows LCS line-level diff (red removed, green added);
    "Show full text" toggle switches to rendered proposal
  - Mobile (≤768px): panel drops to bottom 45% height

- theme.css: add global .inline-assist-btn styles for teleported floating button

- Site-wide max-width increase: list/chat/settings views 960px→1200px;
  viewer layout 1200px→1400px (content area 960px→1100px);
  editor pages already at 1400px

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Bryan Van Deusen
2026-02-19 16:43:41 -05:00
parent 32e4ee12f2
commit 0c4e7fe5cb
15 changed files with 892 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/assets/theme.css
+19
View File
@@ -128,3 +128,22 @@ button:focus-visible {
display: none !important; display: none !important;
} }
} }
/* Floating inline assist button (teleported to body, cannot be scoped) */
.inline-assist-btn {
position: fixed;
z-index: 150;
transform: translateX(-50%);
background: var(--color-primary);
color: #fff;
border: none;
border-radius: 999px;
padding: 0.3rem 0.8rem;
font-size: 0.8rem;
cursor: pointer;
box-shadow: 0 2px 8px var(--color-shadow);
white-space: nowrap;
}
.inline-assist-btn:hover {
filter: brightness(1.1);
}
frontend/src/composables/useAssist.ts
+52
View File
@@ -14,6 +14,33 @@ export interface AssistTarget {
endOffset: number; endOffset: number;
} }
export interface DiffLine {
type: 'equal' | 'delete' | 'insert';
text: string;
}
function computeDiff(a: string, b: string): DiffLine[] {
const aLines = a.split('\n');
const bLines = b.split('\n');
const m = aLines.length, n = bLines.length;
const dp: number[][] = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
for (let i = m - 1; i >= 0; i--)
for (let j = n - 1; j >= 0; j--)
dp[i][j] = aLines[i] === bLines[j]
? dp[i+1][j+1] + 1
: Math.max(dp[i+1][j], dp[i][j+1]);
const result: DiffLine[] = [];
let i = 0, j = 0;
while (i < m && j < n) {
if (aLines[i] === bLines[j]) { result.push({ type: 'equal', text: aLines[i++] }); j++; }
else if (dp[i+1][j] >= dp[i][j+1]) result.push({ type: 'delete', text: aLines[i++] });
else result.push({ type: 'insert', text: bLines[j++] });
}
while (i < m) result.push({ type: 'delete', text: aLines[i++] });
while (j < n) result.push({ type: 'insert', text: bLines[j++] });
return result;
}
export function useAssist(body: Ref<string>) { export function useAssist(body: Ref<string>) {
const chatStore = useChatStore(); const chatStore = useChatStore();
@@ -25,6 +52,7 @@ export function useAssist(body: Ref<string>) {
const streamingText = ref(""); const streamingText = ref("");
const proposedText = ref(""); const proposedText = ref("");
const error = ref(""); const error = ref("");
const isProofreading = ref(false);
// Snapshot of body at the time a section/selection was chosen // Snapshot of body at the time a section/selection was chosen
let bodySnapshot = ""; let bodySnapshot = "";
@@ -56,6 +84,11 @@ export function useAssist(body: Ref<string>) {
state.value !== "streaming" state.value !== "streaming"
); );
const diff = computed<DiffLine[]>(() => {
if (state.value !== 'review' || !target.value || !proposedText.value) return [];
return computeDiff(target.value.text, proposedText.value);
});
function refreshSections() { function refreshSections() {
sections.value = parseMarkdownSections(body.value); sections.value = parseMarkdownSections(body.value);
} }
@@ -145,6 +178,20 @@ export function useAssist(body: Ref<string>) {
} }
} }
async function proofread() {
if (state.value === 'streaming') return;
isProofreading.value = true;
selectedSection.value = null;
customSelection.value = { start: 0, end: body.value.length, text: body.value };
bodySnapshot = body.value;
error.value = '';
instruction.value =
"Proofread for clarity, grammar, spelling, and flow. " +
"Preserve the author's voice and all factual content. " +
"Return only the improved text without explanation.";
await submit();
}
function accept(): string { function accept(): string {
if (!target.value || !proposedText.value) return body.value; if (!target.value || !proposedText.value) return body.value;
@@ -177,6 +224,7 @@ export function useAssist(body: Ref<string>) {
proposedText.value = ""; proposedText.value = "";
error.value = ""; error.value = "";
state.value = "idle"; state.value = "idle";
isProofreading.value = false;
return newBody; return newBody;
} }
@@ -186,6 +234,7 @@ export function useAssist(body: Ref<string>) {
streamingText.value = ""; streamingText.value = "";
error.value = ""; error.value = "";
state.value = "idle"; state.value = "idle";
isProofreading.value = false;
// Keep selection + instruction for retry // Keep selection + instruction for retry
} }
@@ -205,11 +254,14 @@ export function useAssist(body: Ref<string>) {
proposedText, proposedText,
error, error,
canSubmit, canSubmit,
diff,
isProofreading,
refreshSections, refreshSections,
selectSection, selectSection,
selectTextRange, selectTextRange,
clearSelection, clearSelection,
submit, submit,
proofread,
accept, accept,
reject, reject,
}; };
frontend/src/utils/sectionParser.ts
+68 -11
View File
@@ -8,6 +8,73 @@ export interface MarkdownSection {
const HEADING_RE = /^(#{1,6})\s+(.*)$/gm; const HEADING_RE = /^(#{1,6})\s+(.*)$/gm;
function parseFallbackSections(body: string): MarkdownSection[] {
if (!body.trim())
return [];
const isPseudoHeading = (text: string): boolean => {
const t = text.trim();
return (
t.length > 0 && t.length <= 120 &&
!t.includes('\n') &&
!/^[-*+>]/.test(t) &&
!/^\d+\./.test(t) &&
!/^`{3,}/.test(t)
);
};
// Build paragraph list with exact start/end offsets
const separatorRe = /\n{2,}/g;
const paragraphs: Array<{ text: string; start: number; end: number }> = [];
let lastEnd = 0;
let sep: RegExpExecArray | null;
while ((sep = separatorRe.exec(body)) !== null) {
if (sep.index > lastEnd)
paragraphs.push({ text: body.slice(lastEnd, sep.index), start: lastEnd, end: sep.index });
lastEnd = sep.index + sep[0].length;
}
if (lastEnd < body.length)
paragraphs.push({ text: body.slice(lastEnd), start: lastEnd, end: body.length });
if (paragraphs.length === 0)
return [{ heading: '', level: 0, content: body, startOffset: 0, endOffset: body.length }];
const headingIndices = new Set(
paragraphs.map((p, i) => isPseudoHeading(p.text) ? i : -1).filter(i => i >= 0)
);
if (headingIndices.size === 0)
return [{ heading: '', level: 0, content: body, startOffset: 0, endOffset: body.length }];
const sections: MarkdownSection[] = [];
const headingIdxArray = [...headingIndices].sort((a, b) => a - b);
const firstHi = headingIdxArray[0];
// Preamble (content before first pseudo-heading)
if (firstHi > 0) {
sections.push({
heading: '', level: 0,
content: body.slice(paragraphs[0].start, paragraphs[firstHi].start),
startOffset: paragraphs[0].start,
endOffset: paragraphs[firstHi].start,
});
}
// One section per pseudo-heading
for (let h = 0; h < headingIdxArray.length; h++) {
const hi = headingIdxArray[h];
const nextHi = h + 1 < headingIdxArray.length ? headingIdxArray[h + 1] : null;
const sectionEnd = nextHi !== null ? paragraphs[nextHi].start : body.length;
sections.push({
heading: paragraphs[hi].text.trim(),
level: 0,
content: body.slice(paragraphs[hi].start, sectionEnd),
startOffset: paragraphs[hi].start,
endOffset: sectionEnd,
});
}
return sections;
}
export function parseMarkdownSections(body: string): MarkdownSection[] { export function parseMarkdownSections(body: string): MarkdownSection[] {
const sections: MarkdownSection[] = []; const sections: MarkdownSection[] = [];
const matches: { index: number; level: number; heading: string }[] = []; const matches: { index: number; level: number; heading: string }[] = [];
@@ -23,17 +90,7 @@ export function parseMarkdownSections(body: string): MarkdownSection[] {
// Preamble: text before the first heading // Preamble: text before the first heading
if (matches.length === 0) { if (matches.length === 0) {
// Entire body is a single preamble section return parseFallbackSections(body);
if (body.length > 0) {
sections.push({
heading: "",
level: 0,
content: body,
startOffset: 0,
endOffset: body.length,
});
}
return sections;
} }
if (matches[0].index > 0) { if (matches[0].index > 0) {
frontend/src/views/ChatView.vue
+2 -2
View File
@@ -676,7 +676,7 @@ onUnmounted(() => {
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-width: 960px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
} }
@@ -821,7 +821,7 @@ onUnmounted(() => {
/* Input wrapper */ /* Input wrapper */
.input-wrapper { .input-wrapper {
max-width: 960px; max-width: 1200px;
margin: 0 auto 2rem; margin: 0 auto 2rem;
padding: 0 1rem; padding: 0 1rem;
width: 100%; width: 100%;
frontend/src/views/HomeView.vue
+1 -1
View File
@@ -424,7 +424,7 @@ function clearDashboardResponse() {
<style scoped> <style scoped>
.home { .home {
max-width: 960px; max-width: 1200px;
margin: 2rem auto; margin: 2rem auto;
padding: 0 1rem; padding: 0 1rem;
} }
frontend/src/views/LogsView.vue
+1 -1
View File
@@ -252,7 +252,7 @@ function clearFilters() {
<style scoped> <style scoped>
.logs-page { .logs-page {
max-width: 960px; max-width: 1200px;
margin: 2rem auto; margin: 2rem auto;
padding: 0 1rem; padding: 0 1rem;
} }
frontend/src/views/NoteEditorView.vue
+364 -145
View File
@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from "vue"; import { ref, onMounted, onUnmounted, computed, nextTick } from "vue";
import { useRoute, useRouter, onBeforeRouteLeave } from "vue-router"; import { useRoute, useRouter, onBeforeRouteLeave } from "vue-router";
import { useNotesStore } from "@/stores/notes"; import { useNotesStore } from "@/stores/notes";
import { useToastStore } from "@/stores/toast"; import { useToastStore } from "@/stores/toast";
@@ -38,10 +38,45 @@ const assist = useAssist(body);
const renderedStreaming = computed(() => renderMarkdown(assist.streamingText.value)); const renderedStreaming = computed(() => renderMarkdown(assist.streamingText.value));
const renderedProposal = computed(() => renderMarkdown(assist.proposedText.value)); const renderedProposal = computed(() => renderMarkdown(assist.proposedText.value));
function onSelectionChange(payload: { text: string; start: number; end: number }) { // Assist panel toggle (persisted)
assist.selectTextRange(payload.start, payload.end); const ASSIST_KEY = 'fa-assist-open';
const assistOpen = ref(localStorage.getItem(ASSIST_KEY) !== 'false');
function toggleAssist() {
assistOpen.value = !assistOpen.value;
localStorage.setItem(ASSIST_KEY, String(assistOpen.value));
} }
// Floating inline assist button
const floatingAssist = ref({ show: false, top: 0, left: 0 });
const pendingSelection = ref<{ start: number; end: number } | null>(null);
const instructionRef = ref<HTMLTextAreaElement | null>(null);
function onSelectionChange(payload: { text: string; start: number; end: number }) {
if (payload.text.trim().length > 0) {
const sel = window.getSelection();
if (sel && sel.rangeCount > 0) {
const rect = sel.getRangeAt(0).getBoundingClientRect();
floatingAssist.value = { show: true, top: rect.top - 44, left: rect.left + rect.width / 2 };
pendingSelection.value = { start: payload.start, end: payload.end };
}
} else {
floatingAssist.value.show = false;
pendingSelection.value = null;
}
}
function handleInlineAssist() {
if (!pendingSelection.value) return;
assist.selectTextRange(pendingSelection.value.start, pendingSelection.value.end);
assistOpen.value = true;
localStorage.setItem(ASSIST_KEY, 'true');
floatingAssist.value.show = false;
nextTick(() => instructionRef.value?.focus());
}
// Diff view toggle
const showFullProposed = ref(false);
function handleAssistAccept() { function handleAssistAccept() {
const newBody = assist.accept(); const newBody = assist.accept();
if (newBody !== body.value) { if (newBody !== body.value) {
@@ -49,6 +84,7 @@ function handleAssistAccept() {
markDirty(); markDirty();
toast.show("Section updated"); toast.show("Section updated");
} }
showFullProposed.value = false;
} }
function truncateTarget(text: string, max = 60): string { function truncateTarget(text: string, max = 60): string {
@@ -195,7 +231,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
</script> </script>
<template> <template>
<main class="editor-layout"> <main class="editor-page">
<div class="editor-header"> <div class="editor-header">
<div class="toolbar"> <div class="toolbar">
<router-link to="/notes" class="btn-back">Back</router-link> <router-link to="/notes" class="btn-back">Back</router-link>
@@ -205,6 +241,9 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
<button v-if="isEditing" class="btn-delete" @click="remove"> <button v-if="isEditing" class="btn-delete" @click="remove">
Delete Delete
</button> </button>
<button class="btn-assist-toggle" :class="{ active: assistOpen }" @click="toggleAssist">
✨ Assist
</button>
</div> </div>
<input <input
v-model="title" v-model="title"
@@ -251,87 +290,137 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
<MarkdownToolbar v-show="!showPreview" :editor="tiptapEditor" /> <MarkdownToolbar v-show="!showPreview" :editor="tiptapEditor" />
</div> </div>
<div class="editor-scroll"> <div class="editor-body">
<div v-show="!showPreview"> <div class="editor-main">
<TiptapEditor <div v-show="!showPreview">
ref="editorRef" <TiptapEditor
:modelValue="body" ref="editorRef"
placeholder="Write your note in Markdown... Use #tags inline" :modelValue="body"
:fetchTags="(q: string) => store.fetchAllTags(q)" placeholder="Write your note in Markdown... Use #tags inline"
@update:modelValue="onBodyUpdate" :fetchTags="(q: string) => store.fetchAllTags(q)"
@selectionChange="onSelectionChange" @update:modelValue="onBodyUpdate"
/> @selectionChange="onSelectionChange"
/>
</div>
<div
v-show="showPreview"
class="preview-pane prose"
v-html="renderedPreview"
></div>
</div> </div>
<div <aside v-if="assistOpen" class="assist-panel">
v-show="showPreview" <!-- Panel header -->
class="preview-pane prose" <div class="assist-panel-header">
v-html="renderedPreview" <span class="assist-panel-title">✨ AI Assist</span>
></div> <button
class="btn-proofread"
@click="assist.proofread()"
:disabled="assist.state.value === 'streaming'"
>Proofread</button>
<button class="btn-close-assist" @click="toggleAssist">×</button>
</div>
<!-- Panel body -->
<div class="assist-panel-body">
<!-- IDLE -->
<div v-if="assist.state.value === 'idle'" class="assist-idle">
<div class="assist-sections-label">Sections</div>
<div class="assist-sections">
<div
v-for="(section, i) in assist.sections.value"
:key="i"
:class="['assist-section-item', { selected: assist.selectedSection.value === section }]"
@click="assist.selectSection(section)"
>
{{ section.heading || '(preamble)' }}
</div>
<div v-if="!assist.sections.value.length" class="assist-empty">
Write some content to get started.
</div>
</div>
<template v-if="assist.target.value">
<div class="assist-target-preview">
Editing: <em>{{ truncateTarget(assist.target.value.text) }}</em>
</div>
<textarea
ref="instructionRef"
v-model="assist.instruction.value"
placeholder="What should I do with this section?"
class="assist-instruction"
rows="3"
></textarea>
<div class="assist-input-actions">
<button
class="btn-generate"
@click="assist.submit()"
:disabled="!assist.canSubmit.value"
>Generate</button>
<button class="btn-clear" @click="assist.clearSelection()">Clear</button>
</div>
</template>
<div v-else class="assist-hint">
Select a section above or highlight text in the editor.
</div>
</div>
<!-- ERROR -->
<div v-if="assist.error.value" class="assist-error">{{ assist.error.value }}</div>
<!-- STREAMING -->
<div v-if="assist.state.value === 'streaming'" class="assist-streaming">
<div class="assist-streaming-label">
{{ assist.isProofreading.value
? 'Proofreading document...'
: `Revising: "${truncateTarget(assist.target.value?.text ?? '')}"` }}
</div>
<div class="assist-preview-box prose" v-html="renderedStreaming"></div>
<span class="typing-indicator">●●●</span>
</div>
<!-- REVIEW -->
<div v-if="assist.state.value === 'review'" class="assist-review">
<div class="assist-review-header">
<span>{{ assist.isProofreading.value ? 'Document proofread' : 'Proposed changes' }}</span>
<button class="btn-toggle-view" @click="showFullProposed = !showFullProposed">
{{ showFullProposed ? 'Show diff' : 'Show full text' }}
</button>
</div>
<div v-if="!showFullProposed" class="diff-view">
<div
v-for="(line, i) in assist.diff.value"
:key="i"
:class="['diff-line', `diff-${line.type}`]"
>
<span class="diff-marker">{{ line.type === 'delete' ? '−' : line.type === 'insert' ? '+' : ' ' }}</span>
<span class="diff-text">{{ line.text }}</span>
</div>
<div v-if="!assist.diff.value.length" class="diff-empty">No changes.</div>
</div>
<div v-else class="assist-preview-box prose" v-html="renderedProposal"></div>
<div class="assist-actions">
<button class="btn-accept" @click="handleAssistAccept">✓ Accept</button>
<button class="btn-reject" @click="() => { assist.reject(); showFullProposed = false; }">✗ Reject</button>
</div>
</div>
</div>
</aside>
</div> </div>
<!-- AI Assist --> <!-- Floating inline assist button (teleported to body) -->
<aside class="assist-panel"> <teleport to="body">
<div class="assist-panel-header"> <button
<h3 class="assist-panel-title">AI Assist</h3> v-if="floatingAssist.show"
</div> class="inline-assist-btn"
:style="{ top: floatingAssist.top + 'px', left: floatingAssist.left + 'px' }"
<div class="assist-panel-body"> @mousedown.prevent="handleInlineAssist"
<div v-if="assist.state.value === 'idle'" class="assist-controls"> >
<div class="assist-sections"> ✨ Assist
<div </button>
v-for="(section, i) in assist.sections.value" </teleport>
:key="i"
:class="['assist-section-item', { selected: assist.selectedSection.value === section }]"
@click="assist.selectSection(section)"
>
{{ section.heading || '(preamble)' }}
</div>
<div v-if="assist.sections.value.length === 0" class="assist-empty">
No sections found. Add headings (## ...) or select text.
</div>
</div>
<div class="assist-input" v-if="assist.target.value">
<div class="assist-target-preview">
Editing: {{ truncateTarget(assist.target.value.text) }}
</div>
<textarea
v-model="assist.instruction.value"
placeholder="What should I do with this section?"
class="assist-instruction"
rows="2"
></textarea>
<div class="assist-input-actions">
<button
class="btn-generate"
@click="assist.submit()"
:disabled="!assist.canSubmit.value"
>
Generate
</button>
<button class="btn-clear" @click="assist.clearSelection()">Clear</button>
</div>
</div>
</div>
<div v-if="assist.error.value" class="assist-error">
{{ assist.error.value }}
</div>
<div v-if="assist.state.value === 'streaming'" class="assist-preview">
<div class="assist-proposed prose" v-html="renderedStreaming"></div>
<span class="typing-indicator">...</span>
</div>
<div v-if="assist.state.value === 'review'" class="assist-review">
<div class="assist-proposed prose" v-html="renderedProposal"></div>
<div class="assist-actions">
<button class="btn-accept" @click="handleAssistAccept">Accept</button>
<button class="btn-reject" @click="assist.reject()">Reject</button>
</div>
</div>
</div>
</aside>
<!-- Delete confirmation --> <!-- Delete confirmation -->
<teleport to="body"> <teleport to="body">
@@ -351,10 +440,9 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
<style scoped> <style scoped>
/* ── Layout ── */ /* ── Layout ── */
.editor-layout { .editor-page {
max-width: 960px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
padding: 0 1rem;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -365,13 +453,20 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.75rem; gap: 0.75rem;
padding: 1rem 0 0.5rem; padding: 1rem 1.5rem 0.5rem;
border-bottom: 1px solid var(--color-border);
} }
.editor-scroll { .editor-body {
flex: 1 1 0; flex: 1;
min-height: 0; min-height: 0;
display: flex;
overflow: hidden;
}
.editor-main {
flex: 1;
min-width: 0;
overflow-y: auto; overflow-y: auto;
padding: 0.5rem 0 1rem; padding: 0.75rem 1.5rem 1.5rem;
} }
/* ── Toolbar & inputs ── */ /* ── Toolbar & inputs ── */
@@ -403,7 +498,21 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
}
.btn-assist-toggle {
margin-left: auto; margin-left: auto;
padding: 0.4rem 0.9rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: none;
color: var(--color-text-secondary);
cursor: pointer;
font-size: 0.85rem;
}
.btn-assist-toggle.active {
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
border-color: var(--color-primary);
color: var(--color-primary);
} }
.title-input { .title-input {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
@@ -505,53 +614,87 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
/* ── Assist panel ── */ /* ── Assist panel ── */
.assist-panel { .assist-panel {
flex: 0 0 33.33%; width: 320px;
min-height: 0; flex-shrink: 0;
border-left: 1px solid var(--color-border);
background: var(--color-bg-secondary);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-top: 1px solid var(--color-border);
box-shadow: 0 -4px 16px var(--color-shadow);
background: var(--color-bg-card);
border-radius: var(--radius-md) var(--radius-md) 0 0;
overflow: hidden; overflow: hidden;
} }
.assist-panel-header { .assist-panel-header {
flex-shrink: 0; flex-shrink: 0;
padding: 0.75rem 1rem 0; display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 0.9rem;
border-bottom: 1px solid var(--color-border);
} }
.assist-panel-title { .assist-panel-title {
margin: 0; flex: 1;
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 600; font-weight: 700;
color: var(--color-text-secondary); color: var(--color-text-secondary);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.05em;
}
.btn-proofread {
padding: 0.3rem 0.65rem;
font-size: 0.78rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: none;
color: var(--color-text-secondary);
cursor: pointer;
}
.btn-proofread:hover:not(:disabled) {
border-color: var(--color-primary);
color: var(--color-primary);
}
.btn-proofread:disabled {
opacity: 0.5;
cursor: default;
}
.btn-close-assist {
padding: 0.1rem 0.4rem;
border: none;
background: none;
color: var(--color-text-muted);
cursor: pointer;
font-size: 1rem;
line-height: 1;
} }
.assist-panel-body { .assist-panel-body {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
overflow-y: auto; overflow-y: auto;
padding: 0.75rem 1rem 1rem; padding: 0.75rem 0.9rem 1rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.6rem;
} }
.assist-controls {
display: flex; /* Section list */
gap: 0.75rem; .assist-sections-label {
flex: 1; font-size: 0.72rem;
min-height: 0; font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
margin-bottom: 0.2rem;
} }
.assist-sections { .assist-sections {
flex: 0 0 40%;
overflow-y: auto;
border: 1px solid var(--color-input-border); border: 1px solid var(--color-input-border);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
background: var(--color-bg); background: var(--color-bg);
max-height: 200px;
overflow-y: auto;
flex-shrink: 0;
} }
.assist-section-item { .assist-section-item {
padding: 0.35rem 0.75rem; padding: 0.35rem 0.7rem;
cursor: pointer; cursor: pointer;
font-size: 0.85rem; font-size: 0.82rem;
border-left: 3px solid transparent; border-left: 3px solid transparent;
color: var(--color-text); color: var(--color-text);
white-space: nowrap; white-space: nowrap;
@@ -566,38 +709,35 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
background: var(--color-bg-secondary); background: var(--color-bg-secondary);
font-weight: 500; font-weight: 500;
} }
.assist-empty { .assist-empty,
padding: 0.75rem; .assist-hint {
font-size: 0.85rem; padding: 0.6rem 0.7rem;
color: var(--color-text-secondary); font-size: 0.82rem;
} color: var(--color-text-muted);
.assist-input {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
} }
.assist-target-preview { .assist-target-preview {
font-size: 0.8rem; font-size: 0.8rem;
color: var(--color-text-secondary); color: var(--color-text-secondary);
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
}
.assist-target-preview em {
font-style: normal;
color: var(--color-text);
} }
.assist-instruction { .assist-instruction {
width: 100%; width: 100%;
flex: 1; padding: 0.5rem 0.65rem;
min-height: 2.5rem;
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-input-border); border: 1px solid var(--color-input-border);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
font-size: 0.9rem; font-size: 0.88rem;
font-family: inherit; font-family: inherit;
resize: none; resize: vertical;
background: var(--color-bg); background: var(--color-bg);
color: var(--color-text); color: var(--color-text);
box-sizing: border-box; box-sizing: border-box;
min-height: 3.5rem;
} }
.assist-input-actions { .assist-input-actions {
display: flex; display: flex;
@@ -625,8 +765,37 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
font-size: 0.85rem; font-size: 0.85rem;
color: var(--color-text-secondary); color: var(--color-text-secondary);
} }
/* Streaming */
.assist-streaming-label {
font-size: 0.8rem;
color: var(--color-text-secondary);
font-style: italic;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.assist-preview-box {
padding: 0.65rem;
border: 1px solid var(--color-input-border);
border-radius: var(--radius-sm);
background: var(--color-bg);
font-size: 0.9rem;
max-height: 300px;
overflow-y: auto;
}
.typing-indicator {
color: var(--color-text-muted);
font-size: 0.75rem;
letter-spacing: 0.15em;
animation: blink 1s step-end infinite;
}
@keyframes blink {
50% { opacity: 0; }
}
/* Error */
.assist-error { .assist-error {
margin-top: 0.5rem;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
background: color-mix(in srgb, var(--color-danger) 10%, transparent); background: color-mix(in srgb, var(--color-danger) 10%, transparent);
border: 1px solid var(--color-danger); border: 1px solid var(--color-danger);
@@ -634,29 +803,72 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
font-size: 0.85rem; font-size: 0.85rem;
color: var(--color-danger); color: var(--color-danger);
} }
.assist-preview,
.assist-review { /* Review / diff */
margin-top: 0.75rem; .assist-review-header {
padding: 0.75rem; display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.8rem;
font-weight: 600;
color: var(--color-text-secondary);
}
.btn-toggle-view {
font-size: 0.75rem;
color: var(--color-primary);
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.diff-view {
border: 1px solid var(--color-input-border); border: 1px solid var(--color-input-border);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
background: var(--color-bg); background: var(--color-bg);
font-size: 0.82rem;
font-family: monospace;
max-height: 340px;
overflow-y: auto;
padding: 0.4rem 0;
} }
.assist-proposed { .diff-line {
font-size: 0.95rem; display: flex;
align-items: baseline;
padding: 0.05rem 0.5rem;
line-height: 1.5;
} }
.typing-indicator { .diff-delete {
display: inline-block; background: color-mix(in srgb, var(--color-danger) 12%, transparent);
color: var(--color-text-secondary); color: var(--color-danger);
animation: blink 1s step-end infinite;
} }
@keyframes blink { .diff-insert {
50% { opacity: 0; } background: color-mix(in srgb, var(--color-success) 12%, transparent);
color: var(--color-success);
}
.diff-equal {
color: var(--color-text-muted);
}
.diff-marker {
flex-shrink: 0;
width: 1rem;
text-align: center;
user-select: none;
font-weight: 700;
}
.diff-text {
flex: 1;
white-space: pre-wrap;
word-break: break-word;
}
.diff-empty {
padding: 0.5rem;
color: var(--color-text-muted);
font-style: italic;
font-size: 0.82rem;
} }
.assist-actions { .assist-actions {
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
margin-top: 0.75rem;
} }
.btn-accept { .btn-accept {
padding: 0.4rem 1rem; padding: 0.4rem 1rem;
@@ -726,14 +938,21 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
/* ── Mobile ── */ /* ── Mobile ── */
@media (max-width: 768px) { @media (max-width: 768px) {
.assist-panel { .editor-body {
flex-basis: 45%;
}
.assist-controls {
flex-direction: column; flex-direction: column;
} }
.assist-sections { .assist-panel {
flex: none; width: auto;
flex: 0 0 45%;
border-left: none;
border-top: 1px solid var(--color-border);
border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.editor-header {
padding: 0.75rem 1rem 0.5rem;
}
.editor-main {
padding: 0.5rem 1rem 1rem;
} }
} }
</style> </style>
frontend/src/views/NoteViewerView.vue
+2 -2
View File
@@ -171,14 +171,14 @@ async function convertToTask() {
<style scoped> <style scoped>
.viewer-layout { .viewer-layout {
display: flex; display: flex;
max-width: 1200px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
gap: 2rem; gap: 2rem;
} }
.viewer { .viewer {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
max-width: 960px; max-width: 1100px;
margin: 2rem 0; margin: 2rem 0;
padding: 0 1rem; padding: 0 1rem;
} }
frontend/src/views/NotesListView.vue
+1 -1
View File
@@ -133,7 +133,7 @@ function onOffsetUpdate(offset: number) {
<style scoped> <style scoped>
.notes-list { .notes-list {
max-width: 960px; max-width: 1200px;
margin: 2rem auto; margin: 2rem auto;
padding: 0 1rem; padding: 0 1rem;
} }
frontend/src/views/SettingsView.vue
+1 -1
View File
@@ -595,7 +595,7 @@ async function handleRestoreFile(event: Event) {
<style scoped> <style scoped>
.settings-page { .settings-page {
max-width: 960px; max-width: 1200px;
margin: 2rem auto; margin: 2rem auto;
padding: 0 1rem; padding: 0 1rem;
} }
frontend/src/views/TaskEditorView.vue
+364 -145
View File
@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from "vue"; import { ref, onMounted, onUnmounted, computed, nextTick } from "vue";
import { useRoute, useRouter, onBeforeRouteLeave } from "vue-router"; import { useRoute, useRouter, onBeforeRouteLeave } from "vue-router";
import { useTasksStore } from "@/stores/tasks"; import { useTasksStore } from "@/stores/tasks";
import { useNotesStore } from "@/stores/notes"; import { useNotesStore } from "@/stores/notes";
@@ -44,10 +44,45 @@ const assist = useAssist(body);
const renderedStreaming = computed(() => renderMarkdown(assist.streamingText.value)); const renderedStreaming = computed(() => renderMarkdown(assist.streamingText.value));
const renderedProposal = computed(() => renderMarkdown(assist.proposedText.value)); const renderedProposal = computed(() => renderMarkdown(assist.proposedText.value));
function onSelectionChange(payload: { text: string; start: number; end: number }) { // Assist panel toggle (persisted)
assist.selectTextRange(payload.start, payload.end); const ASSIST_KEY = 'fa-assist-open';
const assistOpen = ref(localStorage.getItem(ASSIST_KEY) !== 'false');
function toggleAssist() {
assistOpen.value = !assistOpen.value;
localStorage.setItem(ASSIST_KEY, String(assistOpen.value));
} }
// Floating inline assist button
const floatingAssist = ref({ show: false, top: 0, left: 0 });
const pendingSelection = ref<{ start: number; end: number } | null>(null);
const instructionRef = ref<HTMLTextAreaElement | null>(null);
function onSelectionChange(payload: { text: string; start: number; end: number }) {
if (payload.text.trim().length > 0) {
const sel = window.getSelection();
if (sel && sel.rangeCount > 0) {
const rect = sel.getRangeAt(0).getBoundingClientRect();
floatingAssist.value = { show: true, top: rect.top - 44, left: rect.left + rect.width / 2 };
pendingSelection.value = { start: payload.start, end: payload.end };
}
} else {
floatingAssist.value.show = false;
pendingSelection.value = null;
}
}
function handleInlineAssist() {
if (!pendingSelection.value) return;
assist.selectTextRange(pendingSelection.value.start, pendingSelection.value.end);
assistOpen.value = true;
localStorage.setItem(ASSIST_KEY, 'true');
floatingAssist.value.show = false;
nextTick(() => instructionRef.value?.focus());
}
// Diff view toggle
const showFullProposed = ref(false);
function handleAssistAccept() { function handleAssistAccept() {
const newBody = assist.accept(); const newBody = assist.accept();
if (newBody !== body.value) { if (newBody !== body.value) {
@@ -55,6 +90,7 @@ function handleAssistAccept() {
markDirty(); markDirty();
toast.show("Section updated"); toast.show("Section updated");
} }
showFullProposed.value = false;
} }
function truncateTarget(text: string, max = 60): string { function truncateTarget(text: string, max = 60): string {
@@ -215,7 +251,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
</script> </script>
<template> <template>
<main class="editor-layout"> <main class="editor-page">
<div class="editor-header"> <div class="editor-header">
<div class="toolbar"> <div class="toolbar">
<router-link to="/tasks" class="btn-back">Back</router-link> <router-link to="/tasks" class="btn-back">Back</router-link>
@@ -225,6 +261,9 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
<button v-if="isEditing" class="btn-delete" @click="remove"> <button v-if="isEditing" class="btn-delete" @click="remove">
Delete Delete
</button> </button>
<button class="btn-assist-toggle" :class="{ active: assistOpen }" @click="toggleAssist">
✨ Assist
</button>
</div> </div>
<input <input
v-model="title" v-model="title"
@@ -300,87 +339,137 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
<MarkdownToolbar v-show="!showPreview" :editor="tiptapEditor" /> <MarkdownToolbar v-show="!showPreview" :editor="tiptapEditor" />
</div> </div>
<div class="editor-scroll"> <div class="editor-body">
<div v-show="!showPreview"> <div class="editor-main">
<TiptapEditor <div v-show="!showPreview">
ref="editorRef" <TiptapEditor
:modelValue="body" ref="editorRef"
placeholder="Describe this task... Use #tags inline" :modelValue="body"
:fetchTags="(q: string) => notesStore.fetchAllTags(q)" placeholder="Describe this task... Use #tags inline"
@update:modelValue="onBodyUpdate" :fetchTags="(q: string) => notesStore.fetchAllTags(q)"
@selectionChange="onSelectionChange" @update:modelValue="onBodyUpdate"
/> @selectionChange="onSelectionChange"
/>
</div>
<div
v-show="showPreview"
class="preview-pane prose"
v-html="renderedPreview"
></div>
</div> </div>
<div <aside v-if="assistOpen" class="assist-panel">
v-show="showPreview" <!-- Panel header -->
class="preview-pane prose" <div class="assist-panel-header">
v-html="renderedPreview" <span class="assist-panel-title">✨ AI Assist</span>
></div> <button
class="btn-proofread"
@click="assist.proofread()"
:disabled="assist.state.value === 'streaming'"
>Proofread</button>
<button class="btn-close-assist" @click="toggleAssist">×</button>
</div>
<!-- Panel body -->
<div class="assist-panel-body">
<!-- IDLE -->
<div v-if="assist.state.value === 'idle'" class="assist-idle">
<div class="assist-sections-label">Sections</div>
<div class="assist-sections">
<div
v-for="(section, i) in assist.sections.value"
:key="i"
:class="['assist-section-item', { selected: assist.selectedSection.value === section }]"
@click="assist.selectSection(section)"
>
{{ section.heading || '(preamble)' }}
</div>
<div v-if="!assist.sections.value.length" class="assist-empty">
Write some content to get started.
</div>
</div>
<template v-if="assist.target.value">
<div class="assist-target-preview">
Editing: <em>{{ truncateTarget(assist.target.value.text) }}</em>
</div>
<textarea
ref="instructionRef"
v-model="assist.instruction.value"
placeholder="What should I do with this section?"
class="assist-instruction"
rows="3"
></textarea>
<div class="assist-input-actions">
<button
class="btn-generate"
@click="assist.submit()"
:disabled="!assist.canSubmit.value"
>Generate</button>
<button class="btn-clear" @click="assist.clearSelection()">Clear</button>
</div>
</template>
<div v-else class="assist-hint">
Select a section above or highlight text in the editor.
</div>
</div>
<!-- ERROR -->
<div v-if="assist.error.value" class="assist-error">{{ assist.error.value }}</div>
<!-- STREAMING -->
<div v-if="assist.state.value === 'streaming'" class="assist-streaming">
<div class="assist-streaming-label">
{{ assist.isProofreading.value
? 'Proofreading document...'
: `Revising: "${truncateTarget(assist.target.value?.text ?? '')}"` }}
</div>
<div class="assist-preview-box prose" v-html="renderedStreaming"></div>
<span class="typing-indicator">●●●</span>
</div>
<!-- REVIEW -->
<div v-if="assist.state.value === 'review'" class="assist-review">
<div class="assist-review-header">
<span>{{ assist.isProofreading.value ? 'Document proofread' : 'Proposed changes' }}</span>
<button class="btn-toggle-view" @click="showFullProposed = !showFullProposed">
{{ showFullProposed ? 'Show diff' : 'Show full text' }}
</button>
</div>
<div v-if="!showFullProposed" class="diff-view">
<div
v-for="(line, i) in assist.diff.value"
:key="i"
:class="['diff-line', `diff-${line.type}`]"
>
<span class="diff-marker">{{ line.type === 'delete' ? '−' : line.type === 'insert' ? '+' : ' ' }}</span>
<span class="diff-text">{{ line.text }}</span>
</div>
<div v-if="!assist.diff.value.length" class="diff-empty">No changes.</div>
</div>
<div v-else class="assist-preview-box prose" v-html="renderedProposal"></div>
<div class="assist-actions">
<button class="btn-accept" @click="handleAssistAccept">✓ Accept</button>
<button class="btn-reject" @click="() => { assist.reject(); showFullProposed = false; }">✗ Reject</button>
</div>
</div>
</div>
</aside>
</div> </div>
<!-- AI Assist --> <!-- Floating inline assist button (teleported to body) -->
<aside class="assist-panel"> <teleport to="body">
<div class="assist-panel-header"> <button
<h3 class="assist-panel-title">AI Assist</h3> v-if="floatingAssist.show"
</div> class="inline-assist-btn"
:style="{ top: floatingAssist.top + 'px', left: floatingAssist.left + 'px' }"
<div class="assist-panel-body"> @mousedown.prevent="handleInlineAssist"
<div v-if="assist.state.value === 'idle'" class="assist-controls"> >
<div class="assist-sections"> ✨ Assist
<div </button>
v-for="(section, i) in assist.sections.value" </teleport>
:key="i"
:class="['assist-section-item', { selected: assist.selectedSection.value === section }]"
@click="assist.selectSection(section)"
>
{{ section.heading || '(preamble)' }}
</div>
<div v-if="assist.sections.value.length === 0" class="assist-empty">
No sections found. Add headings (## ...) or select text.
</div>
</div>
<div class="assist-input" v-if="assist.target.value">
<div class="assist-target-preview">
Editing: {{ truncateTarget(assist.target.value.text) }}
</div>
<textarea
v-model="assist.instruction.value"
placeholder="What should I do with this section?"
class="assist-instruction"
rows="2"
></textarea>
<div class="assist-input-actions">
<button
class="btn-generate"
@click="assist.submit()"
:disabled="!assist.canSubmit.value"
>
Generate
</button>
<button class="btn-clear" @click="assist.clearSelection()">Clear</button>
</div>
</div>
</div>
<div v-if="assist.error.value" class="assist-error">
{{ assist.error.value }}
</div>
<div v-if="assist.state.value === 'streaming'" class="assist-preview">
<div class="assist-proposed prose" v-html="renderedStreaming"></div>
<span class="typing-indicator">...</span>
</div>
<div v-if="assist.state.value === 'review'" class="assist-review">
<div class="assist-proposed prose" v-html="renderedProposal"></div>
<div class="assist-actions">
<button class="btn-accept" @click="handleAssistAccept">Accept</button>
<button class="btn-reject" @click="assist.reject()">Reject</button>
</div>
</div>
</div>
</aside>
<!-- Delete confirmation --> <!-- Delete confirmation -->
<teleport to="body"> <teleport to="body">
@@ -400,10 +489,9 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
<style scoped> <style scoped>
/* ── Layout ── */ /* ── Layout ── */
.editor-layout { .editor-page {
max-width: 960px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
padding: 0 1rem;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -414,13 +502,20 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.75rem; gap: 0.75rem;
padding: 1rem 0 0.5rem; padding: 1rem 1.5rem 0.5rem;
border-bottom: 1px solid var(--color-border);
} }
.editor-scroll { .editor-body {
flex: 1 1 0; flex: 1;
min-height: 0; min-height: 0;
display: flex;
overflow: hidden;
}
.editor-main {
flex: 1;
min-width: 0;
overflow-y: auto; overflow-y: auto;
padding: 0.5rem 0 1rem; padding: 0.75rem 1.5rem 1.5rem;
} }
/* ── Toolbar & inputs ── */ /* ── Toolbar & inputs ── */
@@ -452,7 +547,21 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
}
.btn-assist-toggle {
margin-left: auto; margin-left: auto;
padding: 0.4rem 0.9rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: none;
color: var(--color-text-secondary);
cursor: pointer;
font-size: 0.85rem;
}
.btn-assist-toggle.active {
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
border-color: var(--color-primary);
color: var(--color-primary);
} }
.title-input { .title-input {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
@@ -580,53 +689,87 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
/* ── Assist panel ── */ /* ── Assist panel ── */
.assist-panel { .assist-panel {
flex: 0 0 33.33%; width: 320px;
min-height: 0; flex-shrink: 0;
border-left: 1px solid var(--color-border);
background: var(--color-bg-secondary);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-top: 1px solid var(--color-border);
box-shadow: 0 -4px 16px var(--color-shadow);
background: var(--color-bg-card);
border-radius: var(--radius-md) var(--radius-md) 0 0;
overflow: hidden; overflow: hidden;
} }
.assist-panel-header { .assist-panel-header {
flex-shrink: 0; flex-shrink: 0;
padding: 0.75rem 1rem 0; display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 0.9rem;
border-bottom: 1px solid var(--color-border);
} }
.assist-panel-title { .assist-panel-title {
margin: 0; flex: 1;
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 600; font-weight: 700;
color: var(--color-text-secondary); color: var(--color-text-secondary);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.05em;
}
.btn-proofread {
padding: 0.3rem 0.65rem;
font-size: 0.78rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: none;
color: var(--color-text-secondary);
cursor: pointer;
}
.btn-proofread:hover:not(:disabled) {
border-color: var(--color-primary);
color: var(--color-primary);
}
.btn-proofread:disabled {
opacity: 0.5;
cursor: default;
}
.btn-close-assist {
padding: 0.1rem 0.4rem;
border: none;
background: none;
color: var(--color-text-muted);
cursor: pointer;
font-size: 1rem;
line-height: 1;
} }
.assist-panel-body { .assist-panel-body {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
overflow-y: auto; overflow-y: auto;
padding: 0.75rem 1rem 1rem; padding: 0.75rem 0.9rem 1rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.6rem;
} }
.assist-controls {
display: flex; /* Section list */
gap: 0.75rem; .assist-sections-label {
flex: 1; font-size: 0.72rem;
min-height: 0; font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
margin-bottom: 0.2rem;
} }
.assist-sections { .assist-sections {
flex: 0 0 40%;
overflow-y: auto;
border: 1px solid var(--color-input-border); border: 1px solid var(--color-input-border);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
background: var(--color-bg); background: var(--color-bg);
max-height: 200px;
overflow-y: auto;
flex-shrink: 0;
} }
.assist-section-item { .assist-section-item {
padding: 0.35rem 0.75rem; padding: 0.35rem 0.7rem;
cursor: pointer; cursor: pointer;
font-size: 0.85rem; font-size: 0.82rem;
border-left: 3px solid transparent; border-left: 3px solid transparent;
color: var(--color-text); color: var(--color-text);
white-space: nowrap; white-space: nowrap;
@@ -641,38 +784,35 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
background: var(--color-bg-secondary); background: var(--color-bg-secondary);
font-weight: 500; font-weight: 500;
} }
.assist-empty { .assist-empty,
padding: 0.75rem; .assist-hint {
font-size: 0.85rem; padding: 0.6rem 0.7rem;
color: var(--color-text-secondary); font-size: 0.82rem;
} color: var(--color-text-muted);
.assist-input {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
} }
.assist-target-preview { .assist-target-preview {
font-size: 0.8rem; font-size: 0.8rem;
color: var(--color-text-secondary); color: var(--color-text-secondary);
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
}
.assist-target-preview em {
font-style: normal;
color: var(--color-text);
} }
.assist-instruction { .assist-instruction {
width: 100%; width: 100%;
flex: 1; padding: 0.5rem 0.65rem;
min-height: 2.5rem;
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-input-border); border: 1px solid var(--color-input-border);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
font-size: 0.9rem; font-size: 0.88rem;
font-family: inherit; font-family: inherit;
resize: none; resize: vertical;
background: var(--color-bg); background: var(--color-bg);
color: var(--color-text); color: var(--color-text);
box-sizing: border-box; box-sizing: border-box;
min-height: 3.5rem;
} }
.assist-input-actions { .assist-input-actions {
display: flex; display: flex;
@@ -700,8 +840,37 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
font-size: 0.85rem; font-size: 0.85rem;
color: var(--color-text-secondary); color: var(--color-text-secondary);
} }
/* Streaming */
.assist-streaming-label {
font-size: 0.8rem;
color: var(--color-text-secondary);
font-style: italic;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.assist-preview-box {
padding: 0.65rem;
border: 1px solid var(--color-input-border);
border-radius: var(--radius-sm);
background: var(--color-bg);
font-size: 0.9rem;
max-height: 300px;
overflow-y: auto;
}
.typing-indicator {
color: var(--color-text-muted);
font-size: 0.75rem;
letter-spacing: 0.15em;
animation: blink 1s step-end infinite;
}
@keyframes blink {
50% { opacity: 0; }
}
/* Error */
.assist-error { .assist-error {
margin-top: 0.5rem;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
background: color-mix(in srgb, var(--color-danger) 10%, transparent); background: color-mix(in srgb, var(--color-danger) 10%, transparent);
border: 1px solid var(--color-danger); border: 1px solid var(--color-danger);
@@ -709,29 +878,72 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
font-size: 0.85rem; font-size: 0.85rem;
color: var(--color-danger); color: var(--color-danger);
} }
.assist-preview,
.assist-review { /* Review / diff */
margin-top: 0.75rem; .assist-review-header {
padding: 0.75rem; display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.8rem;
font-weight: 600;
color: var(--color-text-secondary);
}
.btn-toggle-view {
font-size: 0.75rem;
color: var(--color-primary);
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.diff-view {
border: 1px solid var(--color-input-border); border: 1px solid var(--color-input-border);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
background: var(--color-bg); background: var(--color-bg);
font-size: 0.82rem;
font-family: monospace;
max-height: 340px;
overflow-y: auto;
padding: 0.4rem 0;
} }
.assist-proposed { .diff-line {
font-size: 0.95rem; display: flex;
align-items: baseline;
padding: 0.05rem 0.5rem;
line-height: 1.5;
} }
.typing-indicator { .diff-delete {
display: inline-block; background: color-mix(in srgb, var(--color-danger) 12%, transparent);
color: var(--color-text-secondary); color: var(--color-danger);
animation: blink 1s step-end infinite;
} }
@keyframes blink { .diff-insert {
50% { opacity: 0; } background: color-mix(in srgb, var(--color-success) 12%, transparent);
color: var(--color-success);
}
.diff-equal {
color: var(--color-text-muted);
}
.diff-marker {
flex-shrink: 0;
width: 1rem;
text-align: center;
user-select: none;
font-weight: 700;
}
.diff-text {
flex: 1;
white-space: pre-wrap;
word-break: break-word;
}
.diff-empty {
padding: 0.5rem;
color: var(--color-text-muted);
font-style: italic;
font-size: 0.82rem;
} }
.assist-actions { .assist-actions {
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
margin-top: 0.75rem;
} }
.btn-accept { .btn-accept {
padding: 0.4rem 1rem; padding: 0.4rem 1rem;
@@ -801,14 +1013,21 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
/* ── Mobile ── */ /* ── Mobile ── */
@media (max-width: 768px) { @media (max-width: 768px) {
.assist-panel { .editor-body {
flex-basis: 45%;
}
.assist-controls {
flex-direction: column; flex-direction: column;
} }
.assist-sections { .assist-panel {
flex: none; width: auto;
flex: 0 0 45%;
border-left: none;
border-top: 1px solid var(--color-border);
border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.editor-header {
padding: 0.75rem 1rem 0.5rem;
}
.editor-main {
padding: 0.5rem 1rem 1rem;
} }
} }
</style> </style>
frontend/src/views/TaskViewerView.vue
+2 -2
View File
@@ -201,14 +201,14 @@ function onTagClick(tag: string) {
<style scoped> <style scoped>
.viewer-layout { .viewer-layout {
display: flex; display: flex;
max-width: 1200px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
gap: 2rem; gap: 2rem;
} }
.viewer { .viewer {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
max-width: 960px; max-width: 1100px;
margin: 2rem 0; margin: 2rem 0;
padding: 0 1rem; padding: 0 1rem;
} }
frontend/src/views/TasksListView.vue
+1 -1
View File
@@ -170,7 +170,7 @@ function onOffsetUpdate(offset: number) {
<style scoped> <style scoped>
.tasks-list { .tasks-list {
max-width: 960px; max-width: 1200px;
margin: 2rem auto; margin: 2rem auto;
padding: 0 1rem; padding: 0 1rem;
} }
frontend/src/views/UserManagementView.vue
+1 -1
View File
@@ -289,7 +289,7 @@ function formatDate(iso: string): string {
<style scoped> <style scoped>
.users-page { .users-page {
max-width: 960px; max-width: 1200px;
margin: 2rem auto; margin: 2rem auto;
padding: 0 1rem; padding: 0 1rem;
} }
summary.md
+13 -7
View File
@@ -12,7 +12,7 @@
> Include file-level details in the commit body when the change is non-trivial. > Include file-level details in the commit body when the change is non-trivial.
## Last Updated ## Last Updated
2026-02-19 — Phase 12: persistent context sidebar, note title in chat, expanded tool suite 2026-02-19 — Phase 13: Writing assistant UI redesign (right-side panel, diff view, proofread, floating inline assist, fallback section detection, increased site-wide max-width)
## Project Overview ## Project Overview
Fabled Assistant is a self-hosted note-taking and task-tracking application with Fabled Assistant is a self-hosted note-taking and task-tracking application with
@@ -285,14 +285,14 @@ fabledassistant/
│ ├── App.vue # Shell: .app-shell (100dvh flex column) with AppHeader + .app-content (flex:1, scrollable) wrapping router-view; starts status polling + loads settings on mount │ ├── App.vue # Shell: .app-shell (100dvh flex column) with AppHeader + .app-content (flex:1, scrollable) wrapping router-view; starts status polling + loads settings on mount
│ ├── main.ts # App init, imports theme.css │ ├── main.ts # App init, imports theme.css
│ ├── assets/ │ ├── assets/
│ │ └── theme.css # CSS custom properties: light/dark themes, body reset, design tokens, responsive breakpoints (480/768/1024), utility classes (.hide-mobile/.hide-desktop), mobile touch targets │ │ └── theme.css # CSS custom properties: light/dark themes, body reset, design tokens, responsive breakpoints (480/768/1024), utility classes (.hide-mobile/.hide-desktop), mobile touch targets; global .inline-assist-btn (teleported floating pill)
│ ├── api/ │ ├── api/
│ │ └── client.ts # ApiError class, apiGet/apiPost/apiPut/apiPatch/apiDelete + apiSSEStream (fetch+ReadableStream), apiStreamPost (legacy), auto 401→login redirect │ │ └── client.ts # ApiError class, apiGet/apiPost/apiPut/apiPatch/apiDelete + apiSSEStream (fetch+ReadableStream), apiStreamPost (legacy), auto 401→login redirect
│ ├── composables/ │ ├── composables/
│ │ ├── useTheme.ts # Theme toggle, localStorage, prefers-color-scheme │ │ ├── useTheme.ts # Theme toggle, localStorage, prefers-color-scheme
│ │ ├── useShortcuts.ts # Shared showShortcuts ref + open/close/toggle helpers (used by App.vue + AppHeader.vue) │ │ ├── useShortcuts.ts # Shared showShortcuts ref + open/close/toggle helpers (used by App.vue + AppHeader.vue)
│ │ ├── useAutocomplete.ts # Legacy textarea autocomplete (replaced by Tiptap suggestion extensions) │ │ ├── useAutocomplete.ts # Legacy textarea autocomplete (replaced by Tiptap suggestion extensions)
│ │ └── useAssist.ts # AI Assist composable: section parsing, target selection, two-step POST+SSE streaming (apiPost → apiSSEStream), accept/reject; watches body ref for auto-sync │ │ └── useAssist.ts # AI Assist composable: section parsing, target selection, two-step POST+SSE streaming (apiPost → apiSSEStream), accept/reject, proofread (full-document), LCS line diff (DiffLine/computeDiff), isProofreading ref; watches body ref for auto-sync
│ ├── stores/ │ ├── stores/
│ │ ├── auth.ts # Auth state: user, isAuthenticated, isAdmin, login/register/logout/checkAuth │ │ ├── auth.ts # Auth state: user, isAuthenticated, isAdmin, login/register/logout/checkAuth
│ │ ├── notes.ts # CRUD + tag filter, resolveTitle, convertToTask, convertToNote, fetchBacklinks, fetchAllTags (with toast errors) │ │ ├── notes.ts # CRUD + tag filter, resolveTitle, convertToTask, convertToNote, fetchBacklinks, fetchAllTags (with toast errors)
@@ -315,7 +315,8 @@ fabledassistant/
│ ├── utils/ │ ├── utils/
│ │ ├── tags.ts # extractTags(), linkifyTags() (with (?<!&) to skip HTML entities), linkifyWikilinks() │ │ ├── tags.ts # extractTags(), linkifyTags() (with (?<!&) to skip HTML entities), linkifyWikilinks()
│ │ ├── markdown.ts # renderMarkdown() (full) + renderPreview() (strips links/images) — decodes HTML entities before marked, replaces &#39; after sanitization │ │ ├── markdown.ts # renderMarkdown() (full) + renderPreview() (strips links/images) — decodes HTML entities before marked, replaces &#39; after sanitization
│ │ └── markdownSerializer.ts # Tiptap JSON → markdown serializer: handles all StarterKit nodes + marks │ │ ├── markdownSerializer.ts # Tiptap JSON → markdown serializer: handles all StarterKit nodes + marks
│ │ └── sectionParser.ts # parseMarkdownSections() (heading-based) + parseFallbackSections() (paragraph/Q&A-style — single-line ≤120 char paragraphs become pseudo-headings)
│ ├── views/ │ ├── views/
│ │ ├── LoginView.vue # Login form with error display, link to register │ │ ├── LoginView.vue # Login form with error display, link to register
│ │ ├── RegisterView.vue # Register form with password confirmation; shows "closed" message when registration disabled │ │ ├── RegisterView.vue # Register form with password confirmation; shows "closed" message when registration disabled
@@ -325,10 +326,10 @@ fabledassistant/
│ │ ├── HomeView.vue # Actionable dashboard: overdue, due today, due this week, high priority, in progress tasks; recent chats with inline chat input; recently edited notes; model warming on mount │ │ ├── HomeView.vue # Actionable dashboard: overdue, due today, due this week, high priority, in progress tasks; recent chats with inline chat input; recently edited notes; model warming on mount
│ │ ├── SettingsView.vue # Settings page: assistant name, model catalog, data export/restore (admin) │ │ ├── SettingsView.vue # Settings page: assistant name, model catalog, data export/restore (admin)
│ │ ├── NotesListView.vue # Note list: search, sort, tag filter pills, pagination │ │ ├── NotesListView.vue # Note list: search, sort, tag filter pills, pagination
│ │ ├── NoteEditorView.vue # Create/edit: Tiptap editor, sticky toolbar, AI Assist panel (bottom 1/3), LLM tag suggestions, Ctrl+S, unsaved guard │ │ ├── NoteEditorView.vue # Create/edit: Tiptap editor, sticky toolbar, AI Assist panel (right-side 320px, collapsible), line-level diff view, Proofread action, floating inline ✨ pill on text selection, LLM tag suggestions, Ctrl+S, unsaved guard
│ │ ├── NoteViewerView.vue # Markdown render, wikilink auto-create, convert-to-task, backlinks, table of contents sidebar │ │ ├── NoteViewerView.vue # Markdown render, wikilink auto-create, convert-to-task, backlinks, table of contents sidebar
│ │ ├── TasksListView.vue # Task list: search, status/priority filters, sort, pagination │ │ ├── TasksListView.vue # Task list: search, status/priority filters, sort, pagination
│ │ ├── TaskEditorView.vue # Create/edit task: Tiptap editor, sticky toolbar, AI Assist panel, LLM tag suggestions, Ctrl+S, dirty guard │ │ ├── TaskEditorView.vue # Create/edit task: Tiptap editor, sticky toolbar, AI Assist panel (right-side 320px, collapsible), line-level diff view, Proofread action, floating inline ✨ pill on text selection, LLM tag suggestions, Ctrl+S, dirty guard
│ │ └── TaskViewerView.vue # Task detail: rendered markdown, badges, convert-to-note, backlinks, table of contents sidebar │ │ └── TaskViewerView.vue # Task detail: rendered markdown, badges, convert-to-note, backlinks, table of contents sidebar
│ ├── components/ │ ├── components/
│ │ ├── LogsView.vue # Admin log viewer: stats summary, category/search/date filters, paginated table with expandable detail rows │ │ ├── LogsView.vue # Admin log viewer: stats summary, category/search/date filters, paginated table with expandable detail rows
@@ -512,7 +513,7 @@ When adding a new migration, follow these conventions:
- Task attributes: status (todo/in_progress/done), priority (none/low/medium/high), due_date - Task attributes: status (todo/in_progress/done), priority (none/low/medium/high), due_date
- Obsidian-style `[[wikilinks]]` with auto-create on click, backlinks ("what links here") - Obsidian-style `[[wikilinks]]` with auto-create on click, backlinks ("what links here")
- Tiptap WYSIWYG editor with markdown round-trip, tag/wikilink autocomplete and decorations, sticky toolbar - Tiptap WYSIWYG editor with markdown round-trip, tag/wikilink autocomplete and decorations, sticky toolbar
- AI Assist panel in editor: background LLM generation via SSE with section targeting, accept/reject - AI Assist panel (right-side 320px, toggle persisted to localStorage): section targeting, floating ✨ pill on text selection, full-document Proofread action, line-level diff view in review state (LCS algorithm), "Show full text" toggle, accept/reject; panel collapses to bottom 45% on mobile (≤768px)
- Table of contents sidebar on note/task viewers (auto-generated from headings, hidden ≤1200px) - Table of contents sidebar on note/task viewers (auto-generated from headings, hidden ≤1200px)
- Inline edit buttons on NoteCard/TaskCard (hover on desktop, always visible on touch) - Inline edit buttons on NoteCard/TaskCard (hover on desktop, always visible on touch)
- Search (ILIKE), sort, tag filter pills, pagination on list views - Search (ILIKE), sort, tag filter pills, pagination on list views
@@ -660,6 +661,7 @@ When adding a new migration, follow these conventions:
- App shell: navbar always visible, 100dvh flex layout, all views fit within viewport - App shell: navbar always visible, 100dvh flex layout, all views fit within viewport
- Toast notifications (success/error/warning, 4s auto-dismiss) - Toast notifications (success/error/warning, 4s auto-dismiss)
- DOMPurify sanitization on all rendered markdown - DOMPurify sanitization on all rendered markdown
- **Site-wide max-width:** List/chat/settings views 1200px; editor pages 1400px; note/task viewer layout 1400px (content area 1100px)
### Infrastructure ### Infrastructure
- Multi-stage Dockerfile: Node build → Python runtime, auto-migration on startup - Multi-stage Dockerfile: Node build → Python runtime, auto-migration on startup
@@ -684,3 +686,7 @@ When adding a new migration, follow these conventions:
- Application-level rate limiting on auth endpoints - Application-level rate limiting on auth endpoints
- Security headers middleware (CSP, X-Frame-Options, etc.) — currently handled at reverse proxy level - Security headers middleware (CSP, X-Frame-Options, etc.) — currently handled at reverse proxy level
- Session invalidation on user deletion - Session invalidation on user deletion
- **Note relation map (Obsidian-style graph):** Interactive force-directed graph visualizing connections between
notes via wikilinks (`[[Title]]`) and shared tags. Nodes = notes/tasks; edges = wikilink references or
tag co-occurrence. Clicking a node navigates to that note. Filter by tag or depth. Useful for discovering
clusters of related notes and orphaned notes with no connections.