AperturePlus · AperturePlus · May 25, 2026 · May 25, 2026 · May 25, 2026 · May 25, 2026
diff --git a/app/.env.example b/app/.env.example
@@ -4,8 +4,8 @@ FF_DB_URI=postgresql://root:password@localhost:5432/fileflash
 APP_ENV=development
 
 # Required when APP_ENV=production or APP_ENV=prod.
-DEFAULT_ADMIN_USERNAME=admin
-DEFAULT_ADMIN_EMAIL=admin@example.com
+DEFAULT_ADMIN_USERNAME=administrator
+DEFAULT_ADMIN_EMAIL=admin@fileflash.next
 DEFAULT_ADMIN_PASSWORD=replace-with-32-bytes-or-longer-password
 
 JWT_SECRET_KEY=please-set-at-least-32-bytes-secret-key

diff --git a/web/src/components/templates/AgentLayout.vue b/web/src/components/templates/AgentLayout.vue
@@ -1,15 +1,82 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import SegmentedControl from '../molecules/SegmentedControl.vue';
+import { useLocaleStore } from '../../store/locale';
+
+const router = useRouter();
+const route = useRoute();
+const localeStore = useLocaleStore();
+const t = localeStore.t;
+
+const TABS = computed(() => [
+  { value: 'workspace', label: t('agent.v2.layout.tab.workspace') },
+  { value: 'skills', label: t('agent.v2.layout.tab.skills') },
+]);
+
+const currentTab = computed(() =>
+  route.path.startsWith('/agent/skills') ? 'skills' : 'workspace',
+);
+
+const onTab = (v: string | number) =>
+  router.push(v === 'skills' ? '/agent/skills' : '/agent');
+</script>
+
 <template>
   <div class="agent-layout">
-    <router-view v-slot="{ Component, route }">
-      <transition name="page-fade" mode="out-in">
-        <component :is="Component" :key="route.path" />
-      </transition>
-    </router-view>
+    <header class="agent-layout__head">
+      <span class="agent-layout__brand">{{ t('agent.v2.layout.brand') }}</span>
+      <SegmentedControl :model-value="currentTab" :options="TABS" @update:model-value="onTab" />
+    </header>
+    <div class="agent-layout__body">
+      <router-view v-slot="{ Component, route: r }">
+        <transition name="page-fade" mode="out-in">
+          <component :is="Component" :key="r.path" class="agent-layout__page" />
+        </transition>
+      </router-view>
+    </div>
   </div>
 </template>
 
 <style scoped>
-.agent-layout { display: flex; flex-direction: column; flex: 1; min-height: 0; }
+.agent-layout {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+}
+.agent-layout__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-md);
+  height: 48px;
+  padding: 0 var(--sp-lg);
+  border-bottom: 1px solid var(--border-default);
+  background: var(--surface-base);
+  flex-shrink: 0;
+}
+.agent-layout__brand {
+  font-family: var(--font-mono);
+  font-size: var(--text-label);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+  color: var(--text-tertiary);
+}
+.agent-layout__body {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  display: flex;
+  position: relative;
+}
+.agent-layout__page {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+}
+
 .page-fade-enter-active, .page-fade-leave-active {
   transition: opacity var(--mo-duration-mid) var(--mo-easing);
 }

diff --git a/web/src/components/templates/MainLayout.vue b/web/src/components/templates/MainLayout.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
 import { useFileStore } from '../../store/file';
 import { storeToRefs } from 'pinia';
 import AppHeader from '../organisms/shell/AppHeader.vue';
@@ -10,12 +11,15 @@ import Spinner from '../atoms/Spinner.vue';
 import FilePreviewDialog from '../organisms/files/FilePreviewDialog.vue';
 import type { FileItem } from '../../types/file';
 
+const route = useRoute();
 const fileStore = useFileStore();
 const { previewFile } = storeToRefs(fileStore);
 
 const leftCollapsed = ref(false);
 const rightVisible = ref(false);
 
+const fullscreen = computed(() => route.matched.some((r) => r.meta?.fullscreen));
+
 const previewForDialog = computed<FileItem | null>(() =>
   previewFile.value && previewFile.value.itemType === 'file' ? (previewFile.value as FileItem) : null,
 );
@@ -29,7 +33,7 @@ function onClosePreview() {
 </script>
 
 <template>
-  <div class="main-layout">
+  <div class="main-layout" :class="{ 'is-fullscreen': fullscreen }">
     <AppHeader
       :left-collapsed="leftCollapsed"
       :right-visible="rightVisible"
@@ -40,10 +44,10 @@ function onClosePreview() {
       <LeftSidebar :collapsed="leftCollapsed" />
       <main class="layout-content">
         <div class="content-scroll">
-          <router-view v-slot="{ Component, route }">
+          <router-view v-slot="{ Component, route: r }">
             <transition name="page-fade" mode="out-in">
               <Suspense>
-                <component :is="Component" :key="route.path" />
+                <component :is="Component" :key="r.path" />
                 <template #fallback>
                   <div class="fallback">
                     <Spinner label="Loading page" />
@@ -53,7 +57,7 @@ function onClosePreview() {
             </transition>
           </router-view>
         </div>
-        <Footer />
+        <Footer v-if="!fullscreen" />
       </main>
       <RightSidebar :visible="rightVisible" />
     </div>
@@ -68,6 +72,14 @@ function onClosePreview() {
 .content-scroll { flex: 1; overflow: auto; padding: var(--sp-lg); }
 .fallback { display: flex; align-items: center; justify-content: center; min-height: 240px; }
 
+.main-layout.is-fullscreen .content-scroll {
+  padding: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
 .page-fade-enter-active, .page-fade-leave-active {
   transition: opacity var(--mo-duration-mid) var(--mo-easing), transform var(--mo-duration-mid) var(--mo-easing);
 }

diff --git a/web/src/pages/agent/AgentLayout.vue b/web/src/pages/agent/AgentLayout.vue
diff --git a/web/src/pages/agent/index.ts b/web/src/pages/agent/index.ts
diff --git a/web/src/pages/agent/workspace/AgentWorkspace.vue b/web/src/pages/agent/workspace/AgentWorkspace.vue
@@ -71,6 +71,7 @@ const onHint = (text: string) => { taskInput.value = text; sendMessage(); };
   min-width: 0;
   overflow: hidden;
   background: var(--surface-base);
+  position: relative;
 }
 .aw__left { min-height: 0; min-width: 0; }
 .aw__center {
@@ -85,10 +86,11 @@ const onHint = (text: string) => { taskInput.value = text; sendMessage(); };
 @media (max-width: 1280px) {
   .aw { grid-template-columns: 240px 1fr; }
   .aw__right {
-    position: fixed; right: 0; top: 48px; bottom: 0;
+    position: absolute; right: 0; top: 0; bottom: 0;
+    width: 320px;
     z-index: 50;
     transform: translateX(100%);
-    transition: transform 200ms var(--mo-easing);
+    transition: transform var(--mo-duration-mid) var(--mo-easing);
     background: var(--surface-base);
     border-left: 1px solid var(--border-default);
   }

diff --git a/web/src/router/routes.ts b/web/src/router/routes.ts
@@ -190,19 +190,19 @@ export const routes: Array<RouteRecordRaw> = [
       {
         path: "agent",
         component: AgentLayout,
-        meta: { navId: "agent" },
+        meta: { navId: "agent", fullscreen: true },
         children: [
           {
             path: "",
             name: "AgentWorkspace",
             component: () => import("../pages/agent/workspace/index.ts"),
-            meta: { navId: "agent" },
+            meta: { navId: "agent", fullscreen: true },
           },
           {
             path: "skills",
             name: "AgentSkills",
             component: () => import("../pages/agent/skills/index.ts"),
-            meta: { navId: "agent" },
+            meta: { navId: "agent", fullscreen: true },
           },
         ],
       },