Add Tauri CLI, app icons, and packaging config.

Wire up local build scripts and lockfiles so the desktop app can be developed and bundled consistently.
Scaffold Tauri app with local-first recording UI.
2026-08-12 13:00:30 +02:00 · 2026-08-12 12:18:15 +02:00
74 changed files with 8002 additions and 0 deletions
@@ -0,0 +1,8 @@
 node_modules/
 dist/
 .DS_Store
 target/
 src-tauri/target/
 *.tsbuildinfo
 dist-packages/
 app-icon.png
@@ -0,0 +1,12 @@
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>mp3Transriber</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
  </html>
@@ -0,0 +1,27 @@
 {
  "name": "mp3transriber",
  "private": true,
  "version": "0.1.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "preview": "vite preview",
    "tauri": "tauri",
    "tauri:dev": "tauri dev",
    "tauri:build": "tauri build"
  },
  "dependencies": {
    "@tauri-apps/api": "^2.0.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@tauri-apps/cli": "^2.11.4",
    "@types/react": "^19.0.0",
    "@types/react-dom": "^19.0.0",
    "@vitejs/plugin-react": "^5.0.0",
    "typescript": "^5.0.0",
    "vite": "^7.0.0"
  }
 }
@@ -0,0 +1,19 @@
 [package]
 name = "mp3transriber"
 version = "0.1.0"
 edition = "2021"
 [build-dependencies]
 tauri-build = { version = "2", features = [] }
 [dependencies]
 rusqlite = { version = "0.37", features = ["bundled"] }
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 tauri = { version = "2", features = [] }
 tauri-plugin-shell = "2"
 uuid = { version = "1", features = ["v4", "serde"] }
 [features]
 default = ["custom-protocol"]
 custom-protocol = ["tauri/custom-protocol"]
@@ -0,0 +1,3 @@
 fn main() {
    tauri_build::build()
 }
@@ -0,0 +1,11 @@
 {
  "$schema": "../gen/schemas/desktop-schema.json",
  "identifier": "default",
  "description": "Default capability set for the main window",
  "windows": ["main"],
  "permissions": [
    "core:default",
    "shell:allow-execute",
    "shell:allow-open"
  ]
 }
@@ -0,0 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
  <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
  <background android:drawable="@color/ic_launcher_background"/>
 </adaptive-icon>
@@ -0,0 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
  <color name="ic_launcher_background">#fff</color>
 </resources>
@@ -0,0 +1,164 @@
 use std::path::Path;
 use rusqlite::{params, Connection};
 use crate::models::{Recording, RecordingMetadata, TranscriptRecord};
 pub struct Database {
    connection: Connection,
 }
 impl Database {
    pub fn open(path: &Path) -> Result<Self, String> {
        let connection = Connection::open(path).map_err(|err| err.to_string())?;
        let database = Self { connection };
        database.migrate()?;
        Ok(database)
    }
    fn migrate(&self) -> Result<(), String> {
        self.connection
            .execute_batch(
                "
                CREATE TABLE IF NOT EXISTS recordings (
                    id TEXT PRIMARY KEY,
                    file_name TEXT NOT NULL,
                    file_path TEXT NOT NULL UNIQUE,
                    imported_at TEXT NOT NULL,
                    title TEXT,
                    artist TEXT,
                    album TEXT,
                    date TEXT,
                    duration_seconds INTEGER,
                    bitrate_kbps INTEGER,
                    transcript_text TEXT,
                    transcript_source TEXT,
                    transcript_status TEXT
                );
                ",
            )
            .map_err(|err| err.to_string())
    }
    pub fn list_recordings(&self) -> Result<Vec<Recording>, String> {
        let mut statement = self
            .connection
            .prepare(
                "
                SELECT
                    id,
                    file_name,
                    file_path,
                    imported_at,
                    title,
                    artist,
                    album,
                    date,
                    duration_seconds,
                    bitrate_kbps,
                    transcript_text,
                    transcript_source,
                    transcript_status
                FROM recordings
                ORDER BY imported_at DESC
                ",
            )
            .map_err(|err| err.to_string())?;
        let rows = statement
            .query_map([], |row| {
                let transcript_text: Option<String> = row.get(10)?;
                let transcript_source: Option<String> = row.get(11)?;
                let transcript_status: Option<String> = row.get(12)?;
                Ok(Recording {
                    id: row.get(0)?,
                    file_name: row.get(1)?,
                    file_path: row.get(2)?,
                    imported_at: row.get(3)?,
                    metadata: RecordingMetadata {
                        title: row.get(4)?,
                        artist: row.get(5)?,
                        album: row.get(6)?,
                        date: row.get(7)?,
                        duration_seconds: row.get(8)?,
                        bitrate_kbps: row.get(9)?,
                    },
                    transcript: transcript_text.map(|text| TranscriptRecord {
                        text,
                        source: transcript_source.unwrap_or_else(|| "local".to_string()),
                        status: transcript_status.unwrap_or_else(|| "ready".to_string()),
                    }),
                })
            })
            .map_err(|err| err.to_string())?;
        rows.collect::<Result<Vec<_>, _>>().map_err(|err| err.to_string())
    }
    pub fn create_recording(
        &self,
        id: &str,
        file_name: &str,
        file_path: &str,
        imported_at: &str,
        metadata: &RecordingMetadata,
    ) -> Result<(), String> {
        self.connection
            .execute(
                "
                INSERT INTO recordings (
                    id,
                    file_name,
                    file_path,
                    imported_at,
                    title,
                    artist,
                    album,
                    date,
                    duration_seconds,
                    bitrate_kbps,
                    transcript_status
                ) VALUES (?1, ?2, ?3, ?4, ?5, ?6, ?7, ?8, ?9, ?10, ?11)
                ON CONFLICT(file_path) DO UPDATE SET
                    title = excluded.title,
                    artist = excluded.artist,
                    album = excluded.album,
                    date = excluded.date,
                    duration_seconds = excluded.duration_seconds,
                    bitrate_kbps = excluded.bitrate_kbps
                ",
                params![
                    id,
                    file_name,
                    file_path,
                    imported_at,
                    metadata.title,
                    metadata.artist,
                    metadata.album,
                    metadata.date,
                    metadata.duration_seconds,
                    metadata.bitrate_kbps,
                    "pending"
                ],
            )
            .map_err(|err| err.to_string())?;
        Ok(())
    }
    pub fn save_transcript(&self, recording_id: &str, text: &str, source: &str) -> Result<(), String> {
        self.connection
            .execute(
                "
                UPDATE recordings
                SET transcript_text = ?1, transcript_source = ?2, transcript_status = ?3
                WHERE id = ?4
                ",
                params![text, source, "ready", recording_id],
            )
            .map_err(|err| err.to_string())?;
        Ok(())
    }
 }
@@ -0,0 +1,107 @@
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 mod db;
 mod metadata;
 mod models;
 use std::path::PathBuf;
 use std::sync::Mutex;
 use db::Database;
 use models::Recording;
 use tauri::Manager;
 use uuid::Uuid;
 struct AppState {
    db: Mutex<Database>,
 }
 #[tauri::command]
 fn list_recordings(state: tauri::State<'_, AppState>) -> Result<Vec<Recording>, String> {
    state
        .db
        .lock()
        .map_err(|_| "Failed to lock database state".to_string())?
        .list_recordings()
 }
 #[tauri::command]
 fn import_mp3(file_path: String, state: tauri::State<'_, AppState>) -> Result<Recording, String> {
    let path = PathBuf::from(&file_path);
    let file_name = path
        .file_name()
        .and_then(|name| name.to_str())
        .ok_or_else(|| "Invalid file path".to_string())?
        .to_string();
    let metadata = metadata::read_metadata(&file_path);
    let id = Uuid::new_v4().to_string();
    let imported_at = format!("{:?}", std::time::SystemTime::now());
    {
        let database = state
            .db
            .lock()
            .map_err(|_| "Failed to lock database state".to_string())?;
        database.create_recording(&id, &file_name, &file_path, &imported_at, &metadata)?;
    }
    Ok(Recording {
        id,
        file_name,
        file_path,
        imported_at,
        metadata,
        transcript: None,
    })
 }
 #[tauri::command]
 fn transcribe_recording(
    recording_id: String,
    state: tauri::State<'_, AppState>,
 ) -> Result<Recording, String> {
    let transcript_text = "Local transcription pipeline not wired yet. This is the first scaffolded backend placeholder.".to_string();
    {
        let database = state
            .db
            .lock()
            .map_err(|_| "Failed to lock database state".to_string())?;
        database.save_transcript(&recording_id, &transcript_text, "local")?;
        let recordings = database.list_recordings()?;
        if let Some(recording) = recordings.into_iter().find(|item| item.id == recording_id) {
            return Ok(recording);
        }
    }
    Err("Recording not found".to_string())
 }
 fn main() {
    tauri::Builder::default()
        .plugin(tauri_plugin_shell::init())
        .setup(|app| {
            let app_data_dir = app
                .path()
                .app_data_dir()
                .map_err(|err| -> Box<dyn std::error::Error> { Box::new(err) })?;
            std::fs::create_dir_all(&app_data_dir)?;
            let db_path = app_data_dir.join("mp3transriber.sqlite3");
            let database = Database::open(&db_path).map_err(std::io::Error::other)?;
            app.manage(AppState {
                db: Mutex::new(database),
            });
            Ok(())
        })
        .invoke_handler(tauri::generate_handler![
            list_recordings,
            import_mp3,
            transcribe_recording
        ])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
 }
@@ -0,0 +1,89 @@
 use std::path::Path;
 use std::process::Command;
 use crate::models::RecordingMetadata;
 pub fn read_metadata(file_path: &str) -> RecordingMetadata {
    let fallback_title = Path::new(file_path)
        .file_stem()
        .and_then(|stem| stem.to_str())
        .map(|value| value.to_string());
    let output = Command::new("ffprobe")
        .args([
            "-v",
            "quiet",
            "-print_format",
            "json",
            "-show_format",
            "-show_streams",
            file_path,
        ])
        .output();
    let Ok(output) = output else {
        return RecordingMetadata {
            title: fallback_title,
            artist: None,
            album: None,
            date: None,
            duration_seconds: None,
            bitrate_kbps: None,
        };
    };
    let json: serde_json::Value = match serde_json::from_slice(&output.stdout) {
        Ok(value) => value,
        Err(_) => {
            return RecordingMetadata {
                title: fallback_title,
                artist: None,
                album: None,
                date: None,
                duration_seconds: None,
                bitrate_kbps: None,
            }
        }
    };
    let tags = json
        .get("format")
        .and_then(|format| format.get("tags"))
        .and_then(|tags| tags.as_object());
    let duration_seconds = json
        .get("format")
        .and_then(|format| format.get("duration"))
        .and_then(|value| value.as_str())
        .and_then(|value| value.parse::<f64>().ok())
        .map(|value| value.round() as u64);
    let bitrate_kbps = json
        .get("format")
        .and_then(|format| format.get("bit_rate"))
        .and_then(|value| value.as_str())
        .and_then(|value| value.parse::<u64>().ok())
        .map(|value| (value / 1000) as u32);
    RecordingMetadata {
        title: tags
            .and_then(|items| items.get("title"))
            .and_then(|value| value.as_str())
            .map(|value| value.to_string())
            .or(fallback_title),
        artist: tags
            .and_then(|items| items.get("artist"))
            .and_then(|value| value.as_str())
            .map(|value| value.to_string()),
        album: tags
            .and_then(|items| items.get("album"))
            .and_then(|value| value.as_str())
            .map(|value| value.to_string()),
        date: tags
            .and_then(|items| items.get("date"))
            .and_then(|value| value.as_str())
            .map(|value| value.to_string()),
        duration_seconds,
        bitrate_kbps,
    }
 }
@@ -0,0 +1,31 @@
 use serde::Serialize;
 #[derive(Debug, Serialize, Clone)]
 #[serde(rename_all = "camelCase")]
 pub struct RecordingMetadata {
    pub title: Option<String>,
    pub artist: Option<String>,
    pub album: Option<String>,
    pub date: Option<String>,
    pub duration_seconds: Option<u64>,
    pub bitrate_kbps: Option<u32>,
 }
 #[derive(Debug, Serialize, Clone)]
 #[serde(rename_all = "camelCase")]
 pub struct TranscriptRecord {
    pub text: String,
    pub source: String,
    pub status: String,
 }
 #[derive(Debug, Serialize, Clone)]
 #[serde(rename_all = "camelCase")]
 pub struct Recording {
    pub id: String,
    pub file_name: String,
    pub file_path: String,
    pub imported_at: String,
    pub metadata: RecordingMetadata,
    pub transcript: Option<TranscriptRecord>,
 }
@@ -0,0 +1,38 @@
 {
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "mp3Transriber",
  "version": "0.1.0",
  "identifier": "com.ben.mp3transriber",
  "build": {
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build",
    "frontendDist": "../dist",
    "devUrl": "http://localhost:5173"
  },
  "app": {
    "windows": [
      {
        "title": "mp3Transriber",
        "width": 1320,
        "height": 860,
        "resizable": true
      }
    ],
    "security": {
      "csp": "default-src 'self'; connect-src ipc: http://ipc.localhost; img-src 'self' asset: http://asset.localhost; style-src 'self' 'unsafe-inline'; script-src 'self'"
    }
  },
  "bundle": {
    "active": true,
    "targets": "all",
    "icon": [
      "icons/32x32.png",
      "icons/64x64.png",
      "icons/128x128.png",
      "icons/128x128@2x.png",
      "icons/icon.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ]
  }
 }
@@ -0,0 +1,201 @@
 import { useEffect, useMemo, useState } from "react";
 import { importMp3, listRecordings, transcribeRecording } from "./lib/desktop";
 import type { Recording } from "./types";
 function formatDuration(seconds?: number): string {
  if (seconds === undefined) {
    return "Unknown";
  }
  const minutes = Math.floor(seconds / 60);
  const remaining = seconds % 60;
  return `${minutes}:${remaining.toString().padStart(2, "0")}`;
 }
 export default function App() {
  const [recordings, setRecordings] = useState<Recording[]>([]);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [manualPath, setManualPath] = useState("");
  const [busy, setBusy] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  useEffect(() => {
    void refreshRecordings();
  }, []);
  const selectedRecording = useMemo(
    () => recordings.find((recording) => recording.id === selectedId) ?? recordings[0] ?? null,
    [recordings, selectedId]
  );
  async function refreshRecordings() {
    try {
      setError(null);
      const data = await listRecordings();
      setRecordings(data);
      if (!selectedId && data.length > 0) {
        setSelectedId(data[0].id);
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to load recordings.");
    }
  }
  async function handleImport() {
    if (!manualPath.trim()) {
      setError("Enter an MP3 file path to import.");
      return;
    }
    try {
      setBusy("import");
      setError(null);
      const recording = await importMp3(manualPath.trim());
      setRecordings((current) => [recording, ...current]);
      setSelectedId(recording.id);
      setManualPath("");
    } catch (err) {
      setError(err instanceof Error ? err.message : "Import failed.");
    } finally {
      setBusy(null);
    }
  }
  async function handleTranscribe() {
    if (!selectedRecording) {
      return;
    }
    try {
      setBusy("transcribe");
      setError(null);
      const updated = await transcribeRecording(selectedRecording.id);
      setRecordings((current) =>
        current.map((recording) => (recording.id === updated.id ? updated : recording))
      );
    } catch (err) {
      setError(err instanceof Error ? err.message : "Transcription failed.");
    } finally {
      setBusy(null);
    }
  }
  return (
    <div className="app-shell">
      <header className="hero">
        <div>
          <p className="eyebrow">Local-first desktop app</p>
          <h1>mp3Transriber</h1>
          <p className="hero-copy">
            Manage recorder MP3 files, inspect metadata, and save transcripts locally by default.
          </p>
        </div>
        <div className="privacy-card">
          <strong>Privacy default</strong>
          <p>Audio and transcript text stay on-device unless a future cloud provider is explicitly enabled.</p>
        </div>
      </header>
      <section className="import-bar">
        <input
          aria-label="MP3 file path"
          placeholder="/path/to/recording.mp3"
          value={manualPath}
          onChange={(event) => setManualPath(event.target.value)}
        />
        <button onClick={handleImport} disabled={busy === "import"}>
          {busy === "import" ? "Importing..." : "Import MP3"}
        </button>
        <button className="secondary" onClick={() => void refreshRecordings()}>
          Refresh
        </button>
      </section>
      {error ? <p className="error-banner">{error}</p> : null}
      <main className="content-grid">
        <section className="panel">
          <div className="panel-header">
            <h2>Recordings</h2>
            <span>{recordings.length}</span>
          </div>
          <div className="recordings-list">
            {recordings.map((recording) => (
              <button
                key={recording.id}
                className={recording.id === selectedRecording?.id ? "recording-item active" : "recording-item"}
                onClick={() => setSelectedId(recording.id)}
              >
                <strong>{recording.fileName}</strong>
                <span>{new Date(recording.importedAt).toLocaleString()}</span>
              </button>
            ))}
            {recordings.length === 0 ? <p className="empty-state">No recordings imported yet.</p> : null}
          </div>
        </section>
        <section className="panel">
          <div className="panel-header">
            <h2>Metadata</h2>
            <button onClick={handleTranscribe} disabled={!selectedRecording || busy === "transcribe"}>
              {busy === "transcribe" ? "Transcribing..." : "Transcribe"}
            </button>
          </div>
          {selectedRecording ? (
            <dl className="metadata-grid">
              <div>
                <dt>Path</dt>
                <dd>{selectedRecording.filePath}</dd>
              </div>
              <div>
                <dt>Title</dt>
                <dd>{selectedRecording.metadata.title ?? "Unknown"}</dd>
              </div>
              <div>
                <dt>Artist</dt>
                <dd>{selectedRecording.metadata.artist ?? "Unknown"}</dd>
              </div>
              <div>
                <dt>Album</dt>
                <dd>{selectedRecording.metadata.album ?? "Unknown"}</dd>
              </div>
              <div>
                <dt>Date</dt>
                <dd>{selectedRecording.metadata.date ?? "Unknown"}</dd>
              </div>
              <div>
                <dt>Duration</dt>
                <dd>{formatDuration(selectedRecording.metadata.durationSeconds)}</dd>
              </div>
              <div>
                <dt>Bitrate</dt>
                <dd>
                  {selectedRecording.metadata.bitrateKbps !== undefined
                    ? `${selectedRecording.metadata.bitrateKbps} kbps`
                    : "Unknown"}
                </dd>
              </div>
            </dl>
          ) : (
            <p className="empty-state">Select a recording to inspect its metadata.</p>
          )}
        </section>
        <section className="panel transcript-panel">
          <div className="panel-header">
            <h2>Transcript</h2>
            <span>{selectedRecording?.transcript?.source ?? "none"}</span>
          </div>
          {selectedRecording?.transcript ? (
            <>
              <p className="status-pill">{selectedRecording.transcript.status}</p>
              <pre>{selectedRecording.transcript.text}</pre>
            </>
          ) : (
            <p className="empty-state">No transcript saved for this recording yet.</p>
          )}
        </section>
      </main>
    </div>
  );
 }
@@ -0,0 +1,74 @@
 import { invoke } from "@tauri-apps/api/core";
 import type { Recording } from "../types";
 const mockRecordings: Recording[] = [
  {
    id: "demo-1",
    fileName: "meeting-note.mp3",
    filePath: "/recordings/meeting-note.mp3",
    importedAt: new Date().toISOString(),
    metadata: {
      title: "Meeting Note",
      artist: "Pocket Recorder",
      album: "Field Notes",
      durationSeconds: 74,
      bitrateKbps: 192
    },
    transcript: {
      text: "This is sample placeholder transcript text for the initial scaffold.",
      source: "local",
      status: "ready"
    }
  }
 ];
 function isTauriRuntime(): boolean {
  return typeof window !== "undefined" && "__TAURI_INTERNALS__" in window;
 }
 export async function listRecordings(): Promise<Recording[]> {
  if (!isTauriRuntime()) {
    return mockRecordings;
  }
  return invoke<Recording[]>("list_recordings");
 }
 export async function importMp3(filePath: string): Promise<Recording> {
  if (!isTauriRuntime()) {
    return {
      id: crypto.randomUUID(),
      fileName: filePath.split("/").pop() ?? "recording.mp3",
      filePath,
      importedAt: new Date().toISOString(),
      metadata: {},
      transcript: {
        text: "Local import mock created in browser mode.",
        source: "local",
        status: "pending"
      }
    };
  }
  return invoke<Recording>("import_mp3", { filePath });
 }
 export async function transcribeRecording(recordingId: string): Promise<Recording> {
  if (!isTauriRuntime()) {
    const recording = mockRecordings.find((item) => item.id === recordingId);
    if (!recording) {
      throw new Error("Recording not found");
    }
    return {
      ...recording,
      transcript: {
        text: "Mock local transcription completed in browser mode.",
        source: "local",
        status: "ready"
      }
    };
  }
  return invoke<Recording>("transcribe_recording", { recordingId });
 }
@@ -0,0 +1,10 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import "./styles.css";
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
 );
@@ -0,0 +1,226 @@
 :root {
  color-scheme: dark;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0f172a;
  color: #e2e8f0;
 }
 * {
  box-sizing: border-box;
 }
 body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
 }
 button,
 input {
  font: inherit;
 }
 button {
  border: 0;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  background: #2563eb;
  color: white;
  cursor: pointer;
 }
 button.secondary {
  background: #334155;
 }
 button:disabled {
  opacity: 0.6;
  cursor: default;
 }
 input {
  width: 100%;
  border: 1px solid #334155;
  border-radius: 10px;
  background: #0f172a;
  color: #e2e8f0;
  padding: 0.75rem 1rem;
 }
 #root {
  min-height: 100vh;
 }
 .app-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
 }
 .hero {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 1.5rem;
 }
 .eyebrow {
  margin: 0 0 0.5rem;
  color: #93c5fd;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
 }
 .hero h1 {
  margin: 0;
  font-size: 2.5rem;
 }
 .hero-copy {
  max-width: 48rem;
  color: #cbd5e1;
 }
 .privacy-card,
 .panel {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(2, 6, 23, 0.25);
 }
 .privacy-card {
  max-width: 22rem;
  padding: 1rem 1.25rem;
 }
 .privacy-card p {
  color: #cbd5e1;
  margin-bottom: 0;
 }
 .import-bar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.75rem;
  margin-bottom: 1rem;
 }
 .error-banner {
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: rgba(127, 29, 29, 0.65);
  color: #fecaca;
 }
 .content-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(320px, 1fr) minmax(320px, 1.1fr);
  gap: 1rem;
 }
 .panel {
  padding: 1rem;
  min-height: 420px;
 }
 .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
 }
 .panel-header h2 {
  margin: 0;
  font-size: 1.1rem;
 }
 .recordings-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
 }
 .recording-item {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.25rem;
  text-align: left;
  background: #1e293b;
 }
 .recording-item.active {
  outline: 1px solid #60a5fa;
  background: #172554;
 }
 .recording-item span,
 .empty-state,
 dd {
  color: #cbd5e1;
 }
 .metadata-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin: 0;
 }
 dt {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #93c5fd;
  margin-bottom: 0.25rem;
 }
 dd {
  margin: 0;
  word-break: break-word;
 }
 .transcript-panel pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  line-height: 1.6;
  color: #e2e8f0;
 }
 .status-pill {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: #1d4ed8;
  font-size: 0.85rem;
 }
@media (max-width: 1024px) {
  .hero,
  .content-grid {
    grid-template-columns: 1fr;
    display: grid;
  }
  .privacy-card {
    max-width: none;
  }
 }
@media (max-width: 720px) {
  .app-shell {
    padding: 1rem;
  }
  .import-bar {
    grid-template-columns: 1fr;
  }
 }
@@ -0,0 +1,25 @@
 export type TranscriptSource = "local" | "cloud";
 export interface RecordingMetadata {
  title?: string;
  artist?: string;
  album?: string;
  date?: string;
  durationSeconds?: number;
  bitrateKbps?: number;
 }
 export interface TranscriptRecord {
  text: string;
  source: TranscriptSource;
  status: "ready" | "pending";
 }
 export interface Recording {
  id: string;
  fileName: string;
  filePath: string;
  importedAt: string;
  metadata: RecordingMetadata;
  transcript?: TranscriptRecord;
 }
@@ -0,0 +1,10 @@
 create an app that allows a user to manage recordings from a pocket recorder device. 
 Allow user to see the meta data in the mp3's . 
 add a feture that can transcribe the mp3 to text and also save the transcibed text in the app.
 use an sqllite3 database. 
 the app must be able to run on linux or a mac computer and easy to start when downloaded / aquired. 
 discuss a dev stack for this project
@@ -0,0 +1,20 @@
 {
  "compilerOptions": {
    "target": "ES2022",
    "useDefineForClassFields": true,
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
 }
@@ -0,0 +1,8 @@
 {
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    }
  ]
 }
@@ -0,0 +1,7 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 export default defineConfig({
  plugins: [react()],
  clearScreen: false
 });