737491d3f0
Rust SSH service: russh async client, DashMap session registry, TOFU host key verification, CWD tracking via separate exec channel (never touches terminal stream), base64 event emission for terminal I/O. 52/52 tests passing. Vue 3 frontend: ported from Wails v3 to Tauri v2 — useTerminal composable with streaming TextDecoder + rAF batching, session store with multi-connection support, connection store/tree, sidebar, tab bar, status bar, keyboard shortcuts. All Wails imports replaced with Tauri API equivalents. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
70 lines
2.2 KiB
Vue
70 lines
2.2 KiB
Vue
<template>
|
|
<div class="h-6 flex items-center justify-between px-4 bg-[var(--wraith-bg-secondary)] border-t border-[var(--wraith-border)] text-[10px] text-[var(--wraith-text-muted)] shrink-0">
|
|
<!-- Left: connection info -->
|
|
<div class="flex items-center gap-3">
|
|
<template v-if="sessionStore.activeSession">
|
|
<span class="flex items-center gap-1">
|
|
<span
|
|
class="w-1.5 h-1.5 rounded-full"
|
|
:class="sessionStore.activeSession.protocol === 'ssh' ? 'bg-[#3fb950]' : 'bg-[#1f6feb]'"
|
|
/>
|
|
{{ sessionStore.activeSession.protocol.toUpperCase() }}
|
|
</span>
|
|
<span class="text-[var(--wraith-text-secondary)]">·</span>
|
|
<span>{{ connectionInfo }}</span>
|
|
</template>
|
|
<template v-else>
|
|
<span>Ready</span>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Right: terminal info -->
|
|
<div class="flex items-center gap-3">
|
|
<button
|
|
class="hover:text-[var(--wraith-text-primary)] transition-colors cursor-pointer"
|
|
title="Change terminal theme"
|
|
@click="emit('open-theme-picker')"
|
|
>
|
|
Theme: {{ activeThemeName }}
|
|
</button>
|
|
<span>UTF-8</span>
|
|
<span v-if="sessionStore.activeDimensions">
|
|
{{ sessionStore.activeDimensions.cols }}×{{ sessionStore.activeDimensions.rows }}
|
|
</span>
|
|
<span v-else>120×40</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref } from "vue";
|
|
import { useSessionStore } from "@/stores/session.store";
|
|
import { useConnectionStore } from "@/stores/connection.store";
|
|
|
|
const sessionStore = useSessionStore();
|
|
const connectionStore = useConnectionStore();
|
|
|
|
const activeThemeName = ref("Default");
|
|
|
|
const emit = defineEmits<{
|
|
(e: "open-theme-picker"): void;
|
|
}>();
|
|
|
|
const connectionInfo = computed(() => {
|
|
const session = sessionStore.activeSession;
|
|
if (!session) return "";
|
|
|
|
const conn = connectionStore.connections.find((c) => c.id === session.connectionId);
|
|
if (!conn) return session.name;
|
|
|
|
const user = session.username ? `${session.username}@` : "";
|
|
return `${user}${conn.hostname}:${conn.port}`;
|
|
});
|
|
|
|
function setThemeName(name: string): void {
|
|
activeThemeName.value = name;
|
|
}
|
|
|
|
defineExpose({ setThemeName, activeThemeName });
|
|
</script>
|