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

refactor(workspace): two-column grid; widget drives tool-call refresh

Browse Source 
WorkspaceView now renders tasks (1fr) on the left and notes (2fr) on
the right with the floating WorkspaceChatWidget layered on top. The
widget owns the SSE streamingToolCalls watcher and emits note-changed
and task-changed events; the view listens and reloads the affected
panel refs.

Dropped from the view:
- ChatPanel mount, empty-state quick chips, and Chat header toggle
- The conversation lifecycle + SSE watcher (moved into the widget)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Bryan Van Deusen
2026-04-22 11:09:50 -04:00
parent ae5c61a179
commit 6026c24450
2 changed files with 78 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/WorkspaceChatWidget.vue
+42 -1
View File
@@ -1,13 +1,54 @@
<script setup lang="ts">
import { ref, nextTick, onMounted, onUnmounted } from 'vue';
import { ref, nextTick, onMounted, onUnmounted, watch } from 'vue';
import { useChatStore } from '@/stores/chat';
import ChatPanel from '@/components/ChatPanel.vue';
import ChatInputBar from '@/components/ChatInputBar.vue';
const props = defineProps<{ projectId: number }>();
const emit = defineEmits<{
'note-changed': [noteId: number];
'task-changed': [];
}>();
const chatStore = useChatStore();
// SSE watcher — emit refresh events when tool calls succeed during streaming
const processedCount = ref(0);
watch(
() => chatStore.streamingToolCalls,
(calls) => {
for (let i = processedCount.value; i < calls.length; i++) {
const tc = calls[i];
if (tc.status !== 'success') continue;
// Note-editor refresh: any successful create_note/update_note
if (['create_note', 'update_note'].includes(tc.function) && tc.result?.data?.id) {
emit('note-changed', tc.result.data.id as number);
}
// Task-panel refresh: milestone changes, or note changes where the note is a task (has status)
const isTaskNoteChange =
['create_note', 'update_note'].includes(tc.function) &&
tc.result?.data?.status !== undefined;
const isMilestoneChange = ['create_milestone', 'update_milestone'].includes(tc.function);
if (isTaskNoteChange || isMilestoneChange) {
emit('task-changed');
}
}
processedCount.value = calls.length;
},
{ deep: true }
);
watch(
() => chatStore.streaming,
(s) => {
if (!s) processedCount.value = 0;
}
);
type WidgetState = 'closed' | 'collapsed' | 'expanded';
const widgetState = ref<WidgetState>('collapsed');
frontend/src/views/WorkspaceView.vue
+36 -199
View File
@@ -1,15 +1,13 @@
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from "vue";
import { ref, computed, onMounted } from "vue";
import { useRoute } from "vue-router";
import { apiGet } from "@/api/client";
import { useChatStore } from "@/stores/chat";
import { useToastStore } from "@/stores/toast";
import ChatPanel from "@/components/ChatPanel.vue";
import WorkspaceTaskPanel from "@/components/WorkspaceTaskPanel.vue";
import WorkspaceNoteEditor from "@/components/WorkspaceNoteEditor.vue";
import WorkspaceChatWidget from "@/components/WorkspaceChatWidget.vue";
const route = useRoute();
const chatStore = useChatStore();
const toast = useToastStore();
const projectId = computed(() => Number(route.params.projectId));
@@ -21,142 +19,62 @@ interface Project {
}
const project = ref<Project | null>(null);
const chatPanelRef = ref<InstanceType<typeof ChatPanel> | null>(null);
const taskPanelRef = ref<InstanceType<typeof WorkspaceTaskPanel> | null>(null);
const noteEditorRef = ref<InstanceType<typeof WorkspaceNoteEditor> | null>(null);
const activeNoteId = ref<number | null>(null);
let workspaceConvId: number | null = null;
let isNewConv = false;
function _storageKey(pid: number) {
return `workspace_conv_${pid}`;
}
// Panel collapse state — persisted per project
// Panel collapse state — persisted per project (tasks + notes only; chat is now a widget)
function _panelKey(pid: number) { return `workspace_panels_${pid}`; }
function _loadPanelState(pid: number) {
try {
const raw = localStorage.getItem(_panelKey(pid));
if (raw) {
const saved = JSON.parse(raw);
// Ensure at least one panel is open after restore
if (!saved.tasks && !saved.chat && !saved.notes) saved.chat = true;
return saved as { tasks: boolean; chat: boolean; notes: boolean };
const saved = JSON.parse(raw) as Partial<{ tasks: boolean; notes: boolean }>;
const tasks = saved.tasks ?? true;
const notes = saved.notes ?? true;
// Guard: at least one panel must be open
if (!tasks && !notes) return { tasks: true, notes: true };
return { tasks, notes };
}
} catch { /* ignore */ }
return { tasks: true, chat: true, notes: true };
return { tasks: true, notes: true };
}
const panelOpen = ref({ tasks: true, chat: true, notes: true });
const panelOpen = ref<{ tasks: boolean; notes: boolean }>({ tasks: true, notes: true });
const gridColumns = computed(() => {
return [
panelOpen.value.tasks ? "minmax(0, 0.8fr)" : "0px",
panelOpen.value.chat ? "minmax(0, 1.1fr)" : "0px",
panelOpen.value.notes ? "minmax(0, 1.1fr)" : "0px",
panelOpen.value.tasks ? "minmax(0, 1fr)" : "0px",
panelOpen.value.notes ? "minmax(0, 2fr)" : "0px",
].join(" ");
});
// SSE watcher — auto-load notes/tasks when tool calls succeed
const processedCount = ref(0);
watch(
() => chatStore.streamingToolCalls,
(calls) => {
for (let i = processedCount.value; i < calls.length; i++) {
const tc = calls[i];
if (
["create_note", "update_note"].includes(tc.function) &&
tc.status === "success" &&
tc.result?.data?.id
) {
activeNoteId.value = tc.result.data.id as number;
noteEditorRef.value?.reload();
}
if (
tc.status === "success" && (
["create_milestone", "update_milestone"].includes(tc.function) ||
(tc.function === "create_note" && tc.result?.data?.status) ||
(tc.function === "update_note" && tc.result?.data?.status !== undefined)
)
) {
taskPanelRef.value?.reload();
}
}
processedCount.value = calls.length;
},
{ deep: true }
);
watch(
() => chatStore.streaming,
(s) => {
if (!s) processedCount.value = 0;
}
);
function togglePanel(panel: keyof typeof panelOpen.value) {
const open = panelOpen.value;
const openCount = [open.tasks, open.chat, open.notes].filter(Boolean).length;
const openCount = [open.tasks, open.notes].filter(Boolean).length;
if (open[panel] && openCount <= 1) return;
panelOpen.value[panel] = !panelOpen.value[panel];
localStorage.setItem(_panelKey(projectId.value), JSON.stringify(panelOpen.value));
}
function prefill(text: string) {
chatPanelRef.value?.prefill(text);
function onNoteChanged(noteId: number) {
activeNoteId.value = noteId;
noteEditorRef.value?.reload();
}
function onTaskChanged() {
taskPanelRef.value?.reload();
}
onMounted(async () => {
// Restore panel state
panelOpen.value = _loadPanelState(projectId.value);
// Load project info
try {
project.value = await apiGet<Project>(`/api/projects/${projectId.value}`);
} catch {
toast.show("Failed to load project", "error");
}
const key = _storageKey(projectId.value);
const storedId = localStorage.getItem(key);
if (storedId) {
// Try to reuse the existing workspace conversation
const existingId = Number(storedId);
try {
await chatStore.fetchConversation(existingId);
workspaceConvId = existingId;
isNewConv = false;
chatStore.reconnectIfGenerating(existingId);
} catch {
// Conversation was deleted — create a fresh one
localStorage.removeItem(key);
}
}
if (workspaceConvId === null) {
// Create a new workspace conversation and persist its ID
const conv = await chatStore.createConversation();
workspaceConvId = conv.id;
isNewConv = true;
await chatStore.fetchConversation(conv.id);
localStorage.setItem(key, String(conv.id));
}
nextTick(() => chatPanelRef.value?.focus());
});
onUnmounted(async () => {
// Only delete if we created a brand-new conversation this session and it's still empty
if (workspaceConvId !== null && isNewConv) {
const conv = chatStore.conversations.find((c) => c.id === workspaceConvId);
if (conv && conv.message_count === 0) {
await chatStore.deleteConversation(workspaceConvId);
localStorage.removeItem(_storageKey(projectId.value));
}
}
});
</script>
@@ -176,13 +94,6 @@ onUnmounted(async () => {
>
Tasks
</button>
<button
:class="['panel-toggle', { active: panelOpen.chat }]"
title="Toggle Chat panel"
@click="togglePanel('chat')"
>
Chat
</button>
<button
:class="['panel-toggle', { active: panelOpen.notes }]"
title="Toggle Notes panel"
@@ -193,9 +104,8 @@ onUnmounted(async () => {
</div>
</header>
<!-- Three-panel body -->
<!-- Two-panel body -->
<div class="ws-body" :style="{ gridTemplateColumns: gridColumns }">
<!-- Left: Tasks -->
<div v-show="panelOpen.tasks" class="ws-panel">
<Transition name="panel-fade">
@@ -209,35 +119,8 @@ onUnmounted(async () => {
</Transition>
</div>
<!-- Center: Chat -->
<div v-show="panelOpen.chat" class="ws-panel ws-panel-chat">
<Transition name="panel-fade">
<div v-if="panelOpen.chat" class="panel-inner panel-inner-chat">
<!-- Quick chips (shown when conversation is empty) -->
<div
v-if="chatStore.currentConversation && !chatStore.currentConversation.messages.length && !chatStore.streaming"
class="empty-chat-prompt"
>
<p class="empty-hint">What would you like to work on?</p>
<div class="quick-chips">
<button class="quick-chip" @click="prefill('Summarize the current status of this project')">📊 Project status</button>
<button class="quick-chip" @click="prefill('Create a note about ')">📝 New note</button>
<button class="quick-chip" @click="prefill('Add tasks for ')">✓ Add tasks</button>
</div>
</div>
<ChatPanel
ref="chatPanelRef"
variant="full"
:projectId="projectId"
placeholder="Message the agent… (Enter to send)"
class="ws-chat-panel"
/>
</div>
</Transition>
</div>
<!-- Right: Note Editor -->
<div v-show="panelOpen.notes" class="ws-panel">
<div v-show="panelOpen.notes" class="ws-panel ws-panel-notes">
<Transition name="panel-fade">
<div v-if="panelOpen.notes" class="panel-inner">
<WorkspaceNoteEditor
@@ -249,13 +132,21 @@ onUnmounted(async () => {
</div>
</Transition>
</div>
</div>
<!-- Floating chat widget -->
<WorkspaceChatWidget
v-if="project"
:project-id="projectId"
@note-changed="onNoteChanged"
@task-changed="onTaskChanged"
/>
</div>
</template>
<style scoped>
.workspace-root {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
@@ -263,7 +154,6 @@ onUnmounted(async () => {
background: var(--color-bg);
}
/* Header */
.ws-header {
display: flex;
align-items: center;
@@ -318,7 +208,6 @@ onUnmounted(async () => {
color: var(--color-primary);
}
/* Three-panel layout */
.ws-body {
display: grid;
flex: 1;
@@ -331,6 +220,10 @@ onUnmounted(async () => {
min-width: 0;
}
.ws-panel-notes {
border-left: 1px solid var(--color-border);
}
.panel-inner {
height: 100%;
display: flex;
@@ -345,60 +238,4 @@ onUnmounted(async () => {
.panel-fade-leave-to {
opacity: 0;
}
/* Chat panel */
.ws-panel-chat {
border-left: 1px solid var(--color-border);
border-right: 1px solid var(--color-border);
display: flex;
flex-direction: column;
}
.panel-inner-chat {
position: relative;
}
.ws-chat-panel {
flex: 1;
min-height: 0;
}
.empty-chat-prompt {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
padding: 2rem 1rem;
pointer-events: none;
z-index: 1;
}
.empty-hint {
margin: 0 0 1rem;
color: var(--color-text-secondary);
font-size: 0.9rem;
}
.quick-chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
pointer-events: auto;
}
.quick-chip {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 20px;
padding: 0.4rem 0.85rem;
font-size: 0.82rem;
color: var(--color-text-secondary);
cursor: pointer;
transition: border-color 0.15s, color 0.15s, background 0.15s;
font-family: inherit;
}
.quick-chip:hover {
border-color: var(--color-primary);
color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
}
</style>