storkit/src/App.tsx

import { useState, useEffect } from "react";
import { invoke } from "@tauri-apps/api/core";
import { open } from "@tauri-apps/plugin-dialog";
import { Chat } from "./components/Chat";
import "./App.css";

function App() {
  const [projectPath, setProjectPath] = useState<string | null>(null);
  const [errorMsg, setErrorMsg] = useState<string | null>(null);

  useEffect(() => {
    invoke<string | null>("get_current_project")
      .then((path) => {
        if (path) setProjectPath(path);
      })
      .catch((e) => console.error(e));
  }, []);

  async function closeProject() {
    try {
      await invoke("close_project");
      setProjectPath(null);
    } catch (e) {
      console.error(e);
    }
  }

  async function selectProject() {
    try {
      setErrorMsg(null);
      // Open native folder picker
      const selected = await open({
        directory: true,
        multiple: false,
      });

      if (selected === null) {
        // User cancelled selection
        return;
      }

      // Invoke backend command to verify and set state
      // Note: invoke argument names must match Rust function args
      const confirmedPath = await invoke<string>("open_project", {
        path: selected,
      });
      setProjectPath(confirmedPath);
    } catch (e) {
      console.error(e);
      setErrorMsg(
        typeof e === "string" ? e : "An error occurred opening the project.",
      );
    }
  }

  return (
    <main className="container">
      <h1>AI Code Assistant</h1>

      {!projectPath ? (
        <div className="selection-screen">
          <p>
            Please select a project folder to start the Story-Driven Spec
            Workflow.
          </p>
          <button onClick={selectProject}>Open Project Directory</button>
        </div>
      ) : (
        <div className="workspace">
          <div
            className="toolbar"
            style={{
              padding: "10px",
              background: "#f0f0f0",
              borderRadius: "4px",
              color: "#333",
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
            }}
          >
            <span>
              <strong>Active Project:</strong> {projectPath}
            </span>
            <button
              onClick={closeProject}
              style={{ padding: "5px 10px", fontSize: "0.9em" }}
            >
              Close
            </button>
          </div>
          <hr style={{ margin: "20px 0" }} />
          <Chat />
        </div>
      )}

      {errorMsg && (
        <div className="error-message" style={{ marginTop: "20px" }}>
          <p style={{ color: "red" }}>Error: {errorMsg}</p>
        </div>
      )}
    </main>
  );
}

export default App;